Jul 12, 2005 - Using XML dataProvider with DataGrid: labelFunction
Using XML dataProvider with DataGrid: labelFunction

The DataGrid expects an Array as its dataProvider, with each element of that array providing a single "item" or row.  The column data is contained in each item object.  If the item element is a simple object with property values at its first level, or if it is an XMLNode, with the column values in its attributes, then you can specify the contents of a column using the "columnName" property.

However, if the item object is more complex, as in an xml node where the column values are contained in nested child objects, you will need to use a labelFunction to navigate within the item object and return the desired column data.

In the example below, there are columns that use different labelFunctions to display nested xml data, and one that uses columName.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="initApp()">
<mx:Script>
<![CDATA[
 private var gXMLDoc:XMLNode;
 private function initApp():Void
 {
  var sXML:String = "<employees>" +
         '<emp hiredate="1989-01-31" >' +
          "<first>Tracy</first> " +
          "<last>Spratt</last>" +
          "<empid>333333</empid>" +
          "<dept>development</dept>" +
          "<tsnode />" +
         "</emp>" +
         '<emp hiredate="1999-02-28">' +
          "<first>Bill</first>" +
          "<last>Gates</last>" +
          "<empid>666666</empid>" +
          "<dept>management</dept>" +
          "<bgnode />" +
         "</emp>" +
        "</employees>"
  
  gXMLDoc = mx.utils.XMLUtil.createXML(sXML)
 }//
 
 private function getLabelFirst(item:Object):String
 {
  return item.childNodes[0].firstChild.nodeValue;
 }//
 private function getLabelLast(item:Object):String
 {
  return item.childNodes[1].firstChild.nodeValue;
 }//
 private function getLabelId(item:Object):String
 {
  return item.childNodes[2].firstChild.nodeValue;
 }//
 private function getLabelDept(item:Object):String
 {
  return item.childNodes[3].firstChild.nodeValue;
 }//   
 private function getLabelNode(item:Object):String
 {
  return item.childNodes[4].nodeName;
 }//  
]]>
</mx:Script>

<mx:DataGrid id="datagrid1" dataProvider="{gXMLDoc.firstChild.childNodes}" >
   <mx:columns>
      <mx:Array>
   <mx:DataGridColumn headerText="First" labelFunction="getLabelFirst" />
         <mx:DataGridColumn headerText="Last" labelFunction="getLabelLast" />
         <mx:DataGridColumn headerText="Id"  labelFunction="getLabelId"/>
         <mx:DataGridColumn headerText="Department" labelFunction="getLabelDept"  />
   <mx:DataGridColumn headerText="Hire Date" columnName="hiredate"  />
   <mx:DataGridColumn headerText="Special Node" labelFunction="getLabelNode" />
      </mx:Array>
   </mx:columns>
</mx:DataGrid>
</mx:Application>