Use of Flex 3 AdvancedDataGrid (7)

Grouping hierarchical data by columns

As with flat data, you use hierarchical data for column grouping, the following example modifies the example in "create a separate column for the navigation tree" to group the Actual and Estimates columns to the Revenues group column:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
  import mx.collections.ArrayCollection;
  include "SimpleHierarchicalData.as";
  ]]>
</mx:Script>
<mx:AdvancedDataGrid width="100%" height="100%">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumnGroup headerText="Revenues">
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Application>

Running example

In the preceding column grouping example, no data field is specified for the AdvancedDataGridColumnGroup class. However, the AdvancedDataGridColumnGroup class is designed to work with hierarchical data. Therefore, if you specify a data field for the AdvancedDataGridColumnGroup class, it automatically creates a column group for the Child fields of the data field.

In the following example, the HierarchicalDataForGroupedColumns. as file defines a layered data. Set the Revenues field to contain two child fields, Actual and Estimate:

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

The following example uses the data and specifies that the Revenues field is the value of the AdvancedDataGridColumnGroup. dataField attribute. The output is as follows:

The following is the implementation code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
   import mx.collections.ArrayCollection;
   include "HierarchicalDataForGroupedColumns.as";
  ]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
defaultLeafIcon="{null}">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumnGroup dataField="Revenues">
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Application>

Running example