Extending DGColumn and ADGColumn to handle nested data fields.

I have seen numerous questions regarding how to specify DataGridColumn.dataField when the data is nested (object or XML). Developers attempt to use "datafield1.datafield2.datafield3" to find out that it doesn't work !

The data might look like this :

<mx:XMLList id="testData" xmlns="">
<root>
   <item>
      <childItem>
        <name>India Flex group</name>
        <mail>indiafx@gmail.com</mail>
      </childItem>
      <location>India</location>
   </item>
   <item>
      <childItem>
        <name>Singapore Flex group</name>
        <mail>singaporefx@gmail.com</mail>
      </childItem>
      <location>Singapore</location>
   </item>
   <item>
     <childItem>
       <name>Sreenivas</name>
       <mail>sreenivas.ramaswamy@gmail.com</mail>
     </childItem>
     <location>Bangalore</location>
   </item>
</root>
</mx:XMLList>

The answer has always (most of the time?) been to use DataGrid.labelFunction. I dislike the solution because it requires the developer to do this again and again for every column and every usage. I find it easier to extend the DataGridColumn and override the itemToLabel function to do the needful.

The usage is simple. The Nested and ordinary columns can be mixed or only nested columns can be used as the logic kicks in only when "." is present in dataField value.

<mx:AdvancedDataGrid dataProvider="{testData.item}">
  <mx:columns>
    <local:AdvancedDataGridColumnNested dataField="childItem.name" headerText="Name" width="150"/>
    <local:AdvancedDataGridColumnNested dataField="childItem.mail" headerText="email" width="100"/>
    <mx:AdvancedDataGridColumn dataField="location" headerText="Location" />
  </mx:columns>
</mx:AdvancedDataGrid>

<mx:DataGrid dataProvider="{testData.item}">
   <mx:columns>
     <local:DataGridColumnNested dataField="childItem.name" headerText="Name" width="150"/>
     <local:DataGridColumnNested dataField="childItem.mail" headerText="email" width="100"/>
     <mx:DataGridColumn dataField="location" headerText="Location" />
   </mx:columns>
</mx:DataGrid>

The result looks like this:

The data can be nested to any level not just two. The same logic takes care of everything!

Here are the source files for DataGridColumnNested and ADGColumnNested and test app.