2 Replies Latest reply on Jun 7, 2006 12:27 PM by McDusty

    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 , 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
        • 1. Re: ArrayCollection to populate Datagrid
          Level 7
          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
          >
          • 2. Re: ArrayCollection to populate Datagrid
            McDusty Level 1
            cheers for your response Mike.

            It works a treat!