ArrayCollection to populate Datagrid

Question

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
, fieldName2: value}] );
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>
The dataGrid does populate in the sense that i am allowed to
select the rows; the number of rows that my array consists of ...
however the cells are empty. 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

Answer 1

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
ataGrid x="424" y="425" height="125" width="340"
id="grd" editable="true"
enabled="true" dataProvider="{arrayCol}">
<mx:columns>
<mx
ataGridColumn headerText="Tag" dataField="fieldName1"
editable="false"/>
<mx
ataGridColumn headerText="Tag Value"
dataField="fieldName2"
editable="true"/>
</mx:columns>
</mx
ataGrid>
</mx:Application>
Mike Morearty
Developer, Flex Builder team
http://www.morearty.com/blog
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
ataGrid x="424" y="425" height="125" width="340"
id="grd" editable="true"
> enabled="true" dataProvider="{arrayCol}">
> <mx:columns>
> <mx
ataGridColumn headerText="Tag" dataField="fieldName1"
> editable="false"/>
> <mx
ataGridColumn headerText="Tag Value"
dataField="fieldName1"
> editable="true"/>
> </mx:columns>
> </mx
ataGrid>
>
> 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
>