Displaying hierarchical data

Hierarchical data is data in a structured format where the data is already arranged in a hierarchy. To display hierarchical data in the AdvancedDataGrid control, you set the data provider of the control to an instance of the HierarchicalData class. The structure of the data in the data provider defines how the AdvancedDataGrid control displays the data.

Defining hierarchical data with an ArrayCollection

Using an ArrayCollection is a common way to create hierarchical data, as the following example shows in the SimpleHierarchicalData.as file. In this example, the data has three levels – a root level and two child levels:

[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
  {Region:"Southwest", children: [
     {Region:"Arizona", children: [ 
        {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
        {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
     {Region:"Central California", children: [ 
        {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
     {Region:"Nevada", children: [ 
        {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
     {Region:"Northern California", children: [ 
        {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
        {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
     {Region:"Southern California", children: [ 
        {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
        {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
  ]}
]);

This example uses the children keyword in the ArrayCollection definition to define the data hierarchy. The children keyword is the default keyword used by the HierarchicalData class to define the hierarchy.

You can use a different keyword to define the hierarchy. The following example shows the HierarchicalDataCategories.as file, which uses the categories keyword:

[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
  {Region:"Southwest", categories: [
     {Region:"Arizona", categories: [ 
        {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
        {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
     {Region:"Central California", categories: [ 
        {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
     {Region:"Nevada", categories: [ 
        {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
     {Region:"Northern California", categories: [ 
        {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
        {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
     {Region:"Southern California", categories: [ 
        {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
        {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
  ]}
]);

Use the HierarchicalData.childrenField property to specify the name of the field that defines the hierarchy, as the following example shows:

<?xml version="1.0"?>
<!-- dpcontrols/adg/HierarchicalADGCategories.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

  <fx:Script>
    <![CDATA[
          import mx.collections.ArrayCollection;
                
          include "HierarchicalDataCategories.as";
      ]]>
    </fx:Script>

    <mx:AdvancedDataGrid width="100%" height="100%"> 
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}" 
                childrenField="categories"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>    
</s:Application>
The executing SWF file for the previous example is shown below:

Displaying hierarchical XML data

The examples in the previous section use an ArrayCollection to populate the AdvancedDataGrid control. You can also populate the control with hierarchical XML data. The following example modifies the data from the previous section to format it as XML, and then passes that data to the AdvancedDataGrid control:

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleHierarchicalADGXML.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            import mx.collections.HierarchicalData;
            import mx.collections.XMLListCollection;
        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:XMLList id="dpHierarchyXML" >
            <Region Region="Southwest">
                <Region Region="Arizona">
                    <Territory_Rep Territory_Rep="Barbara Jennings" 
                        Actual="38865" Estimate="40000"/>
                    <Territory_Rep Territory_Rep="Dana Binn" 
                        Actual="29885" Estimate="30000"/>
                </Region>
                <Region Region="Central California">
                    <Territory_Rep Territory_Rep="Joe Smith" 
                        Actual="29134" Estimate="30000"/>
                </Region>
                <Region Region="Nevada">
                    <Territory_Rep Territory_Rep="Bethany Pittman" 
                        Actual="52888" Estimate="45000"/>
                </Region>
                <Region Region="Northern California">
                    <Territory_Rep Territory_Rep="Lauren Ipsum" 
                        Actual="38805" Estimate="40000"/>
                    <Territory_Rep Territory_Rep="T.R. Smith" 
                        Actual="55498" Estimate="40000"/>
                </Region>
                <Region Region="Southern California">
                    <Territory_Rep Territory_Rep="Alice Treu" 
                        Actual="44985" Estimate="45000"/>
                    <Territory_Rep Territory_Rep="Jane Grove" 
                        Actual="44913" Estimate="45000"/>
                </Region>
            </Region>  
        </fx:XMLList>
    </fx:Declarations>

    <mx:AdvancedDataGrid width="100%" height="100%" 
        dataProvider="{new HierarchicalData(dpHierarchyXML)}">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="@Region" 
                headerText="Region"/>
            <mx:AdvancedDataGridColumn dataField="@Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="@Actual" 
                headerText="Actual"/>
            <mx:AdvancedDataGridColumn dataField="@Estimate" 
                headerText="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>    
</s:Application>
The executing SWF file for the previous example is shown below: