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]
Related
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.
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
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.
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>
Within a DataGrid, I have a DataGridColumn that uses a custom component as the item renderer. Within the component, I have an ArrayCollection that stores a set of value objects. My problem is that I cannot access the ArrayCollection values from outside of the item renderer component. Does anyone know how it would be possible to do this? I have posted a code snippet below.
<mx:Script>
<![CDATA[
// Cannot access arrFiles from here.
]]>
</mx:Script>
<mx:DataGrid editable="true">
<mx:columns>
<mx:DataGridColumn id="dgcUpload" width="130" headerText="Uploaded Files"
editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Script>
<![CDATA[
[Bindable]public var arrFiles:ArrayCollection = new ArrayCollection();
]]>
</mx:Script>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
Is this possible?
Thank you in advance for any assistance,
Orville
I would create a custom MXML Box component as the rendered with a label (myLabel) as a child. Set the data provider for the DataGrid to the array. In the custom MXML component override the set data method which is called each time the data is rendered for each row and set the label to the current value passed in:
override public function set data(value:Object):void{
myLabel.text = value.myTextForLabel;
}
If the field in the ArrayCollection (myArrayCollection) is always the same for the label, then just set the DataGrid data provider to the ArrayCollection and the dataField property of the column to the appropriate value (myText):
<mx:DataGrid editable="true" dataProvider="myArrayCollection">
<mx:columns>
<mx:DataGridColumn id="dgcUpload" width="130" dataField="myText" headerText="Uploaded Files"
editable="false">
</mx:columns>
</mx:DataGrid>
It is possible depending on how you want to access it. You can access the property of a specific item being rendered by the itemRenderer by calling the itemToItemRenderer function on the datagrid. That gives you an instance of that specific itemRenderer and you can call the arrFiles variable for that item.
Here's an example
protected function datagrid1_clickHandler(event:MouseEvent):void
{
var obj:Object = dgcUpload.itemToItemRenderer(dgcUpload.selectedItem);
var newArray:ArrayCollection = obj.arrFiles;
}
I call that when something is clicked on the DataGrid and I want to access the arrFiles variable for the selected item.
Is that what you're looking for?
=Ryan