ArrayCollection to populate Datagrid

[McDusty]

Hi,

Im having problems getting my own array data to bind to a dataGrid. I've tried
formating my array data several ways but none work. Here is an example of one
of the iterations i have tried which i beleive should work. I build my array
like this ...

for(i) {
arrayName.push( [{ fieldName1: value<i> , fieldName2: value<i>}] );
}

which gives me a nice 2d array. this is put in an arrayCollection which is
bindable....

arrayCol = new ArrayCollection( arrayName);

and it is set as the dataProvider for my grid and the fieldNames are set as
the column dataFields ...

<mx:DataGrid x="424" y="425" height="125" width="340" id="grd" editable="true"
enabled="true" dataProvider="{arrayCol}">
<mx:columns>
<mx:DataGridColumn headerText="Tag" dataField="fieldName1"
editable="false"/>
<mx:DataGridColumn headerText="Tag Value" dataField="fieldName1"
editable="true"/>
</mx:columns>
</mx:DataGrid>

I've spent a fair time trying to work this out and search the docs / this
forum. If anyone has any recommendations about how to bind array /
arrayCollection data to a dataGrid it would be greatly appreciated.

Regards

[Mike Morearty (Adobe)]

The way you have it structured, it looks like you have a two-dimensional array
where the second dimension always just contains a single item. Unless I'm
misinterpreting your goal, the way to change this would be to remove the extra
left/right brackets in your arrayName.push:

change
arrayName.push( [{ fieldName1: value<i> , fieldName2: value<i>}] );
to
arrayName.push( { fieldName1: value<i> , fieldName2: value<i>} );

That way, you have a one-dimensional array, but each item in that array has a
field named 'fieldName1' and another field named 'fieldName2'.

Here is a complete sample that works for me (with the latest internal build --
I haven't tried beta 3):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initData()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

public var mydata:Array;

[Bindable]
public var arrayCol:ArrayCollection;

private function initData():void
{
mydata = [];
mydata.push( { fieldName1: '1', fieldName2: '2' } );
mydata.push( { fieldName1: '3', fieldName2: '4' } );

arrayCol = new ArrayCollection(mydata);
}
]]>
</mx:Script>

<mx:DataGrid x="424" y="425" height="125" width="340" id="grd" editable="true"
enabled="true" dataProvider="{arrayCol}">
<mx:columns>
<mx:DataGridColumn headerText="Tag" dataField="fieldName1" editable="false"/>
<mx:DataGridColumn headerText="Tag Value" dataField="fieldName2"
editable="true"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>




--
Mike Morearty
Developer, Flex Builder team
[url]http://www.morearty.com/blog[/url]


McDusty wrote:

> Hi,
>
> Im having problems getting my own array data to bind to a dataGrid. I've tried
> formating my array data several ways but none work. Here is an example of one
> of the iterations i have tried which i beleive should work. I build my array
> like this ...
>
> for(i) {
> arrayName.push( [{ fieldName1: value<i> , fieldName2: value<i>}] );
> }
>
> which gives me a nice 2d array. this is put in an arrayCollection which is
> bindable....
>
> arrayCol = new ArrayCollection( arrayName);
>
> and it is set as the dataProvider for my grid and the fieldNames are set as
> the column dataFields ...
>
> <mx:DataGrid x="424" y="425" height="125" width="340" id="grd" editable="true"
> enabled="true" dataProvider="{arrayCol}">
> <mx:columns>
> <mx:DataGridColumn headerText="Tag" dataField="fieldName1"
> editable="false"/>
> <mx:DataGridColumn headerText="Tag Value" dataField="fieldName1"
> editable="true"/>
> </mx:columns>
> </mx:DataGrid>
>
> I've spent a fair time trying to work this out and search the docs / this
> forum. If anyone has any recommendations about how to bind array /
> arrayCollection data to a dataGrid it would be greatly appreciated.
>
> Regards
>

[McDusty]

cheers for your response Mike.

It works a treat!