Setting the DataGridColumn's dataField based on XML node with the same name

Question

I am stuck.

Given this XML:

<matrix>
<row>
    <column>0.51</column>
    <column>0.52</column>
    <column>0.53</column>
    <column>0.54</column>
</row>
<row>
    <column>0.61</column>
    <column>0.62</column>
    <column>0.63</column>
    <column>0.64</column>
</row>

I am trying to define a DataGrid such that the row nodes will represent new rows in the DataGrid and the column nodes will be used to auto-populate the DataGrid's columns. I am having a problem setting the dataField for each of the DataGridColumn ojects created. The DataGrid is created but the cell values for row 1 are all 0.51 and row 2 are 0.61.

What am I doing wrong here?

Answer 1

I think the thing that is tripping you up is that you can't define a DataGrid this way (at least not without a lot of adaptation). Basically, a DataGrid is expecting a set of objects that it will display as a set of rows.

The columns come in to play as views onto specific properties of the given objects in the dataProvider. A DataGridColumn will display the property that matches the value of its dataField property.

So, a quick/dirty example follows. I was having trouble using XML as a data source for some reason, so I converted your data into generic objects - not something I would recommend in actual practice - for the purpose of explaining how the datagrid populates columns:

<mx:Script>
<![CDATA[

    private var data:Array = [
                         {column0:0.51, column1:0.52, column2:0.53, column3:0.54},
                         {column0:0.61, column1:0.62, column2:0.63, column3:0.64}
                        ];

    private var dataDisplayDP:ArrayCollection = new ArrayCollection(data);

    private function dataDisplayerCreationListener():void
    {
    dataDisplayer.dataProvider = dataDisplayDP;
    }      

]]>>
</mx:Script>

<mx:DataGrid id="dataDisplayer" creationComplete="dataDisplayerCreationListener()">
  <mx:DataGridColumn dataField="column0"/>
  <mx:DataGridColumn dataField="column1"/>
  <mx:DataGridColumn dataField="column2"/>
  <mx:DataGridColumn dataField="column3"/>
</mx:DataGrid>

So, again, the idea is that each row represents an item in your dataProvider, while each column represents a particular property of the object represented by the row. This approach might seem strangely loose, at first, but it allows you to visually represent data in a tabular format without having to structure the data in a tabular format.

You can use an Array object as a data source, but it's generally better to wrap it in an ArrayCollection object - when Collection objects are used as data sources, the view component will automatically update itself when the data is changed.

Again, you aren't constrained to using only Array or ArrayCollection as your data source. From the Flex documentation on dataProvider:

...[the dataProvider property] lets you use most types of objects as data providers. If you set the dataProvider property to an Array, it will be converted to an ArrayCollection. If you set the property to an XML object, it will be converted into an XMLListCollection with only one item. If you set the property to an XMLList, it will be converted to an XMLListCollection. If you set the property to an object that implements the IList or ICollectionView interface, the object will be used directly.

Incidentally, I'm pretty sure that you will not get the benefit of automatic view updating if you use an Array or XML object, even though they will be converted to a Collection object.