Accessibility

Flex Article

 

Displaying XML-based DataGrids using dynamic E4X expressions


Table of Contents

  1. Introduction
  2. Some background on working with E4X
  3. Motivation for using E4X: A sample application
  4. Example of an E4X-based solution
Comments

Motivation for using E4X: A sample application

You have an application backed by the following XML data that you need to display in a DataGrid:

<mx:XML id="order">
   <order>
      <item id='1'>
         <menuName>burger</menuName>			
         <criticalInfo>
            <vegetarian>false</vegetarian>
            <containsPeanuts>false</containsPeanuts>
         </criticalInfo>
         <salesInfo>
            <quantity>3</quantity>
            <price>3.95</price>
            <lineTotal>11.85</lineTotal>
         </salesInfo>
      </item>
      <item id='2'>
         <menuName>fries</menuName>
         <criticalInfo>
            <vegetarian>true</vegetarian>
            <containsPeanuts>false</containsPeanuts>
         </criticalInfo>
         <salesInfo>
            <quantity>4</quantity>
            <price>1.45</price>
            <lineTotal>5.80</lineTotal>
         </salesInfo>
      </item>
   </order>
</mx:XML>

In Flex 2, the DataGrid can accept XML directly as a dataProvider. So you can quickly craft your grid to display the information:

<mx:DataGrid dataProvider="{order.item}">
   <mx:columns>
      <mx:DataGridColumn headerText="Name" dataField="menuName"/>
      <mx:DataGridColumn headerText="Vegetarian" dataField="criticalInfo.vegetarian"/>
      <mx:DataGridColumn headerText="Peanuts" dataField="criticalInfo.containsPeanuts"/>
      <mx:DataGridColumn headerText="Quantity" dataField="salesInfo.quantity"/>
      <mx:DataGridColumn headerText="Price" dataField="salesInfo.price"/>
      <mx:DataGridColumn headerText="Line Total" dataField="salesInfo.lineTotal"/>
   </mx:columns>
</mx:DataGrid>

Using your new E4X skills, you quickly add a dataField to each of the columns with the appropriate path to your data and test your application. However, Name is the only column of your DataGrid that displays data (see Figure 1). Looking at the help files further, you discover that the dataField property of the DataGridColumn accepts a string, not an expression. So how will you display the other columns whose data exist deeper than the first level in the XML hierarchy?

DataGrid with only Name displaying correctly

Figure 1. DataGrid with only Name displaying correctly

Page 3 of 4
Previous Page
Next Page