3 Replies Latest reply on Feb 12, 2009 5:37 PM by _Zakaria

    Datagrid: Only headertexts displayed

    _Zakaria Level 1
      Hi everybody!

      "rtalton" helped me to get over a problem which was discussed in a top called = "Displaying an Array stocked in an ArrayCollection in a Datagrid" at this address :
      http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1424232&highlight_key=y&keyword1=datagrid

      Based on his source code, i tried to add two headertexts to the data grid (see below the attachment), but, by runnning the app, it displays only the headers without data.
      Can anybody help me please?
      Thank you!

        • 1. Re: Datagrid: Only headertexts displayed
          atta707 Level 2
          For the simplest cases, each 'row' in the array collection need to be an object and DataGridColumn needs to know the 'dataField' property. So instead of adding a an array at each element, try adding an object and specify the dataField property for you columns:

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

          private var myArray:Array = new Array;

          [Bindable]
          private var myAC:ArrayCollection = new ArrayCollection();

          private var myDataGridCol1:DataGridColumn = new DataGridColumn();
          private var myDataGridCol2:DataGridColumn = new DataGridColumn();

          private function initApp():void{
          var i:int = 0;
          myDataGridCol1.headerText="one";
          myDataGridCol1.dataField = 'a';
          myDataGridCol2.headerText="two";
          myDataGridCol2.dataField = 'b';

          myDG.columns = [myDataGridCol1,myDataGridCol2];

          for (i=0;i<10;i++){
          // myArray = {a:"a" + i, b:"b" + i};
          myAC.addItem({a:"a" + i, b:"b" + i});
          // trace(myArray.toString());
          }
          }
          ]]>
          </mx:Script>
          <mx:DataGrid id="myDG" dataProvider="{myAC}" x="72" y="59">

          </mx:DataGrid>
          </mx:Application>

          ATTA
          • 2. Re: Datagrid: Only headertexts displayed
            theLoggerGuy Level 1
            Okay, so first you want to remove the dataprovider from the Datagrid tag and add it after you update your data (otherwise there will be binding updates all over the place). Note that 'myAC' will no longer be bindable if you do this.

            Now because you have manually created your columns there is no code to associate which data goes with which column. You need to set the myDataGridCol1.datafield and myDataGridCol2.datafield properties.

            I would suggest that you rewrite your loop to be something like this:

            var myObj: Ojbect;
            for (i=0;i<10;i++){
            myObject = { "one": "a" + i, "two": "b" + i };
            myAC.addItem( myObject );
            }
            myDataGridCol1.dataField = "one";
            myDataGridCol2.dataField = "two";
            myDG.dataProvider = myAC;

            None of the above is tested.
            • 3. Re: Datagrid: Only headertexts displayed
              _Zakaria Level 1
              thanks a lot! I took the Atta's solution.