numbered rows in datagrid - apache-flex

I am creating an app where users input their investment info into a datagrid on each row one row at a time. As they move along new rows are dynamically generated so they can input new investments. As the user moves and puts in new info I want a column to display what row the user is on (or better said what number investment he is on). I had an idea about the how to create the function:
private function rowCount():void
{
myDG.dataProvider=tasks;
myDG.rowCount=tasks.length;
}
but Im just not sure how to implement it in the datagrid.
How would I implement something like that? What datagrid property would I use? Im still fairly new to flex 3 so any help is appreciated!
<mx:DataGrid id="myDG"
width="908" height="410"
dataProvider="{tasks}"
sortableColumns="false" editable="true"
itemEditBeginning="checkEdit(event)"
itemEditEnd="editEnd(event)" x="10" y="0" >
<mx:columns>
<mx:DataGridColumn headerText="Investment number"
dataField="investment number " width="80">
<mx:DataGridColumn headerText="Symbol"
dataField="symbol" width="105">
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Trade Date"
dataField="date" width="80">
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

Putting simply, you need to display the index of the row in itemRenderer.
Look at this question and answers, the problem and its solution are the same (since List and DataGrid derives from the same ListBase):
Display List ItemRenderer Index in Flex3

Related

flex return rowIndex from button in datagrid component

Hi I am trying to pass the rowindex when I click on a button in a row, the data value returns the correct information but the rowIndex returns nothing.
<mx:AdvancedDataGridColumn headerText="EDIT" showDataTips="false" editable="true">
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="center" verticalAlign="middle">
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, rowIndex)}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
thanks !
I'm surprised you're provided code does not throw an error.
You need to access listData.rowIndex. listData should be an instance of the AdvancedDataGridListData class.
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, listData.rowIndex)}"/>
Since the HBox does not have a listData property, you may have to implement it on your own for the data to be passed in. Something like this should suffice:
[Bindable]
public var listData:BaseListData;
It has been a while since I've been deep into an MX component, so my memory is a bit rusty on the last part.
In addition to the first answer, try not to use listData.rowIndex when your datagrid has the vertical scroll bar, because the rowIndex just shows the index of current visible Rows.
Try to use the current object index in the DataProvider of the datagrid instead.

flex zend amf - display results in different labels

I've got a simple app that is currently getting information form a database and just displaying the content into a datagrid.
Instead of having this information displayed in a datagrid, I'd like to display it in a couple of labels (first name, last name, phone, etc.), but I'm not really sure how to.
Currently on creationComplete I call my php query function - which looks like this.
public function getPeople() {
return mysql_query("SELECT * FROM tbl_people ORDER BY pers_name ASC");
}
Then I'm just putting my results into a datagrid
<mx:DataGrid id="empdg" x="22" y="184" dataProvider="{amfcall.getPeople.lastResult}" click="showName()">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="pers_id" editable="false"/>
<mx:DataGridColumn headerText="Name" dataField="pers_name"/>
<mx:DataGridColumn headerText="Image" dataField="pers_img"/>
<mx:DataGridColumn headerText="Job" dataField="pers_job"/>
<mx:DataGridColumn headerText="Bio" dataField="pers_bio"/>
</mx:columns>
</mx:DataGrid>
Eventually my query will be modified and will only ever return 1 row from the database. So how do I get the results to display in labels instead of the datagrid?
Your question is vague at best, but here's me trying anyway:
<s:Label text="First Name: {data.firstName}" />
<s:Label text="Last Name: {data.lastName}" />
<s:Label text="Phone: {data.phone}" />
I recommend you read up on how on to do binding and look up examples on data driven Flex application, like this one on my blog.

Binding data to DataGrid through ActionScript

I am trying to bind an ArrayCollection result coming in from the server to my DataGrid
created dynamically in AS.
The result data is not getting Displayed in the Grid.
var dg:DataGrid = new DataGrid();
dg.width=650;
dg.dataProvider=someArrayCollfromServer;
I am adding the dgColumn as runtime based on some data from a XML and it is the same as defined in below static format.
But if I use the same code and create the DataGrid as a Flex Component as below, it works fine.
<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{someArrayCollfromServer}">
<mx:columns>
<mx:DataGridColumn dataField="Value" headerText="Value"/>
<mx:DataGridColumn dataField="Code" headerText="Code" />
</mx:columns>
</mx:DataGrid>
This works fine. Is there some functionality or implementation different as far as DataGrid is concerned in Flex and AS.
Any point of issue here?
dg.dataProvider=someArrayCollfromServer; just assigns the current value of the variable someArrayCollfromServer (which might be null if it hasn't been populated yet) to the dataProvider. To get data binding, replace that line with:
BindingUtils.bindProperty(dg, "dataProvider", this, "someArrayCollfromServer");
And make sure that someArrayCollfromServer is [Bindable]

How Can I Make a Flex 3 Datagrid Show only One Row of an ArrayCollection's Results?

Is there a way to make a Flex 3 Datagrid show only the first node of an arrayCollection, instead of showing all of the arrayCollection's data?
myDGArray = [
{Name: "Judy", Talent: 'Pole-Dancing', Score: "40"},
{Name: "Jane", Talent: 'Yodelling', Score: "65"},
{Name: "Jim", Talent: 'Singing', Score: "82"}
]
myAC:ArrayCollection = new ArrayCollection(myDGArray);
If I set the datagrid's dataProvider as myAC, then all of myAc's results will be listed in the dataGrid. How do I make it show only the first person's data, the not-so-hot Judy?
(The data in the myDGArray is actually from a database call. So, I'd like to return it all at once instead of making multiple server calls).
My goals is to have the datagrid load with the first person's data. And then have a comboBox control what data is shown in the dataGrid. So, if the user selects "Jim" in the comboBox, then Jim's data shows up in the dataGrid.
Any suggestions or advice?
Thank you.
-Laxmidi
Try this
<mx:DataGrid dataProvider="myAC">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Talent"/>
<mx:DataGridColumn headerText="Score"/>
</mx:columns>
</mx:DataGrid>
If you always only want to show one record in your DataGrid, then you probably don't need to use the (rather heavy) DataGrid component. I would assign the data provider to the combo box and have something as simple as an HBox with Labels for the details. You can bind the label text to whatever detail of the selected combo box item:
<mx:Label text="{'Talent: " + myCombo.selectedItem.Talent}"/>
Try this
<mx:DataGrid dataProvider="myAC">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Talent"/>
<mx:DataGridColumn headerText="Score"/>
</mx:columns>
</mx:DataGrid>

how can i disable (enabled="false") particular checkbox in datagrid item Renderer?

In datagrid i shows number of checkbox for example 20 checkboz ,in 20 checkbox if i select any 15 checkboxs then remining checkboxs will be disable (enabled="false" But 15 selected checkbox accessable ?
How can i do that . i tried
<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5"
dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn headerText="Checked" dataField="checked">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox enabled="{data.checked}" change="{data.checked = this.enabled;}" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
You are going to need more robust item renderers (in separate class) that dispatch events up through the grid and into the containing class to perform some business logic on the data provider.
Part 3 of Peter Ent's excellent series on Flex item renderers covers this topic in depth. I highly recommend the entire series if you want in depth knowledge of how to best utilize item renderers in Flex.

Resources