bpurcell.org - Binding Complex XML to a DataGrid in Flex

The datagrid in Flex works very well with flat XML. For example if you have the following XML it is very simple to bind it to a DataGrid.

<mx:Model id="thePersonModel">
 <name>Brandon</name>
 <age>30</age>
 <address>19 foobar</address>
</mx:Model>

<mx:DataGrid id="myDataGrid" dataProvider="{mx.utils.ArrayUtil.toArray(thePersonModel)}"/>

But what if you have a more complex XML packet that you need to bind to a DataGrid?

<mx:Model id="thePersonModel">
 <name>Brandon</name>
 <age>30</age>
 <address>
  <street>foobar</street>
  <number>19</number>
 </address>
</mx:Model>

<mx:DataGrid id="myDataGrid" dataProvider="{mx.utils.ArrayUtil.toArray(thePersonModel)}"/>

In the above code the name and age will bind appropriately but the addess column will show [object Object] instead of the value of street and number. There is an easy workaround to display the values of complex XML using the labelFunction from the <mx:DataGridColumn> tag. When we call the labelFunction tag the dataprovider gets passed to the function and we can grab any value from the dataprovider. The following code shows how this works

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" 
                                      width="600" height="450">
<mx:Script>
 <![CDATA[ 
 function myLabelFunc(item):String 
 {
  if (item.address.number==undefined)
  {return null;}
  else
  {return item.address.number + " " + item.address.street;}
 }
 ]]>
</mx:Script>
<mx:Model id="thePersonModel">
 <name>Brandon</name>
 <age>30</age>
 <address>
  <street>foobar</street>
  <number>19</number>
 </address>
</mx:Model>

<mx:DataGrid id="myDataGrid2" 
   dataProvider="{mx.utils.ArrayUtil.toArray(thePersonModel)}">
  <mx:columns>
  <mx:Array>
   <mx:DataGridColumn columnName="name" headerText="Name"/>
   <mx:DataGridColumn columnName="age" headerText="Age"/>
   <mx:DataGridColumn headerText="Address" labelFunction="myLabelFunc"/>
   </mx:Array>
 </mx:columns>
</mx:DataGrid>
</mx:Application>

While this is a very simple example where we have XML data hard coded to a Model there may be times where you get data from web services that you have no control over the format of the data. labelFunction can provide an easy workaround to get the appropriate data into your DataGrid.

The labelFunction is also avilable on <mx:List> an example of using it can be found in the livedocs.