Use of the "Flex3" Advanceddatagrid (iv)

displaying hierarchical XML data

The example in the previous section uses ArrayCollection to create the Advanceddatagrid control. You can also use hierarchical XML data to create Advanceddatagrid controls. The following example modifies the data in the previous section to be formatted as XML and then passes the data to the Advanceddatagrid control:

<?xml version= "1.0" encoding= "Utf-8"?>
<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" >
<mx:Script>
<! [cdata[
Import Mx.collections.HierarchicalData;
Import mx.collections.XMLListCollection;
]]>
</mx:Script>
<mx: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>
</mx:XMLList>
<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>
</mx:Application>

Run the sample

Show grouped data

Grouped data is flat data that is organized into the same hierarchy to display in the Advanceddatagrid control. To group your data, you specify a more field to aggregate the data under the same hierarchy.

To use grouped data to generate Advanceddatagrid controls, you need to create an instance of the Groupingcollection class from your flattened data. The Groupingcollection instance is then passed as a data source to the Advanceddatagrid control. When you create an instance of a Groupingcollection class from flat data, you need to specify those fields in the data to create the hierarchy.

Most of the examples in this section use the following flattened data to create an instance of the Groupingcollection class:

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

The following example uses this data:

<?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 "Simpleflatdata.as"
]]>
</mx:Script>
<mx:advanceddatagrid id= "MYADG"
Width= "100%" height= "100%"
Initialize= "Gc.refresh ();" >
<mx:dataProvider>
<mx:groupingcollection id= "GC" source= "{Dpflat}" >
<mx:grouping>
<mx:Grouping>
<mx:groupingfield name= "Region"/>
<mx:groupingfield name= "Territory"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:advanceddatagridcolumn datafield= "Region"/>
<mx:advanceddatagridcolumn datafield= "Territory"/>
<mx:advanceddatagridcolumn datafield= "Territory_rep"
headertext= "Territory Rep"/>
<mx:advanceddatagridcolumn datafield= "Actual"/>
<mx:advanceddatagridcolumn datafield= "Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>

Run the sample

The above example uses two fields to group the data: region and territory.

Groupingcollection instances actually reformat the data based on these fields to represent the internal data of the Groupingcollection instance as follows:

[{grouplabel: "Southwest", children:[
{grouplabel: "Arizona", children:[
{region: "Southwest", Territory: "Arizona",
Territory_rep: "Barbara Jennings", actual:38865, estimate:40000},
{region: "Southwest", Territory: "Arizona",
Territory_rep: "Dana Binn", actual:29885, estimate:30000}]}
{grouplabel: "Central California", children:[
{region: ' Southwest ', Territory: ' Central California ',
Territory_rep: "Joe Smith", actual:29134, estimate:30000}]}
{grouplabel: "Nevada", children:[
{region: "Southwest", Territory: "Nevada",
Territory_rep: "Bethany Pittman", actual:52888, estimate:45000}]}
{grouplabel: "Northern California", children:[
{region: "Southwest", Territory: "Northern California",
Territory_rep: "Lauren Ipsum", actual:38805, estimate:40000},
{region: "Southwest", Territory: "Northern California",
Territory_rep: "T.R Smith", actual:55498, estimate:40000}]}
{grouplabel: "Southern California", children:[
{region: "Southwest", Territory: "Southern California",
Territory_rep: "Alice Treu", actual:44985, estimate:45000},
{region: "Southwest", Territory: "Southern California",
Territory_rep: "Jane Grove", actual:44913, estimate:45000}]}
]}]

Note that this represents the data hierarchy for the region and Territory fields based on the flattened data, which also contains the original rows of the input flat data, but the rows are organized into a hierarchical structure based on the grouping fields. The default data field name that is used to create a hierarchy from flat data is Grouplabel. You can use the Grouping.label property to specify a different name.

The Advanceddatagrid control uses the Grouplabel field to define the label of the navigation tree Branch node. The first column of the Advanceddatagrid control also corresponds to the Region field. So the navigation tree uses the Region field to define the label of the tree leaf node.

The Grouping property is the default Mxml property of the Groupingcollection class, so you can override the previous example as follows:

<?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 "Simpleflatdata.as"
]]>
</mx:Script>
<mx:advanceddatagrid id= "MYADG"
Width= "100%" height= "100%"
Initialize= "Gc.refresh ();" >
<mx:dataProvider>
<mx:groupingcollection id= "GC" source= "{Dpflat}" >
<mx:grouping>
<mx:groupingfield name= "Region"/>
<mx:groupingfield name= "Territory"/>
</mx:grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:advanceddatagridcolumn datafield= "Region"/>
<mx:advanceddatagridcolumn datafield= "Territory"/>
<mx:advanceddatagridcolumn datafield= "Territory_rep"
headertext= "Territory Rep"/>
<mx:advanceddatagridcolumn datafield= "Actual"/>
<mx:advanceddatagridcolumn datafield= "Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>

Call the Groupingcollection.refresh () method

The Groupingcollection.refresh () method applies the settings of the Groupingcollection class to the data. You must call this method at any time when you modify the Groupingcollection class by setting the grouping, source, or summaries property of the Groupingcollection class.

Create a column for the Grouplabel field

Optionally, you can create a separate column for the top-level entry generated for the grouped field when displaying grouped data. For example, you use the region and Territory fields to group flat data, which are displayed in the navigation tree as labels for branch nodes, so you omit separate columns for these columns, as follows:

The following code creates the example. Note The example contains a Advanceddatagridcolumn instance for the Grouplabel field. There are no columns defined for region and territory:

<?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 "simpleflatdata.as";
]]>
</mx:Script>
<mx:advanceddatagrid id= "MYADG"
Width= "100%" height= "100%"
Defaultleaficon= "{null}"
Initialize= "Gc.refresh ();" >
<mx:dataProvider>
<mx:groupingcollection id= "GC" source= "{Dpflat}" >
<mx:Grouping>
<mx:groupingfield name= "Region"/>
<mx:groupingfield name= "Territory"/>
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:advanceddatagridcolumn datafield= "Grouplabel"
headertext= "Region/territory"/>
<mx:advanceddatagridcolumn datafield= "Territory_rep"
headertext= "Territory Rep"/>
<mx:advanceddatagridcolumn datafield= "Actual"/>
<mx:advanceddatagridcolumn datafield= "Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>

Run the sample

Use of the "Flex3" Advanceddatagrid (iv)