Grouping XML data using GroupingCollection

I was under the impression this doesn't require any sample as it should be very easy to write one. But frequent questions on the forums have resulted in this post.

There is not much to describe so :

<mx:XML id="inputData" >
 <Tulokset>
 <Tulos id="xxx" group="xx" />
 <Tulos id="xxx" group="xx" />
 <Tulos id="xxx" group="xx" />
 </Tulokset>
</mx:XML> 
 
<mx:AdvancedDataGrid creationComplete="gc.refresh()">
 <mx:dataProvider>
  <mx:GroupingCollection source="{inputData.Tulos}" id="gc">
   <mx:Grouping>
    <mx:GroupingField name="@group" />
   </mx:Grouping>
  </mx:GroupingCollection>
 </mx:dataProvider>
 <mx:columns>
  <mx:AdvancedDataGridColumn dataField="@id" />
 </mx:columns>
</mx:AdvancedDataGrid>

The source is here.

Update: The below example shows how to use grouping when the data is in child nodes instead of attributes. This is a bit tricky because GroupingCollection is derived from HierarchicalData which treats child nodes as children by default. This leads to problems when we try to display the data after grouping. The trick is to make use of the childrenField property and point it to something like "undefined".

<mx:XML id="inputData" >
 <Tulokset>
  <Tulos>
     <id>xx1</id>
     <group>xxx</group>
  </Tulos>
  <Tulos>
     <id>xx2</id>
     <group>xxx</group>
  </Tulos>
  <Tulos>
     <id>xx3</id>
     <group>xxx</group>
  </Tulos>
 </Tulokset>
</mx:XML> 
 
<mx:AdvancedDataGrid creationComplete="gc.refresh()">
 <mx:dataProvider>
  <mx:GroupingCollection source="{inputData.Tulos}" id="gc" childrenField="undefined">
   <mx:Grouping>
    <mx:GroupingField name="group"  />
   </mx:Grouping>
  </mx:GroupingCollection>
 </mx:dataProvider>
 <mx:columns>
  <mx:AdvancedDataGridColumn dataField="id" />
 </mx:columns>
</mx:AdvancedDataGrid>

The source is here.

Please note that childrenField is also helpful when we are trying to display XML data with data and children as child nodes. Use it to point to the proper node name which contains the children. In the following example we need to set childrenField="details" to work properly.

<mx:XML id="special">
<rows>
<row>
  <name>A</name>
  <fund>100</fund>
  <details>
   <row>
   <name>a</name>
   <fund>20</fund>
   </row>
   <row>
   <name>b</name>
   <fund>80</fund>
   </row>
  </details>
</row>
<row>
  <name>C</name>
  <fund>200</fund>
  <details>
   <row>
   <name>a</name>
   <fund>80</fund>
   </row>
   <row>
   <name>b</name>
   <fund>80</fund>
   </row>
   <row>
   <name>c</name>
   <fund>40</fund>
   </row>
  </details>
</row>
</rows> 
</mx:XML>

<mx:AdvancedDataGrid >
   <mx:dataProvider>
       <mx:HierarchicalData source="{special.row}" childrenField="details" >
       </mx:HierarchicalData>
   </mx:dataProvider>
 <mx:columns>
  <mx:AdvancedDataGridColumn dataField="name" />
  <mx:AdvancedDataGridColumn dataField="fund" />
 </mx:columns>
</mx:AdvancedDataGrid>

XMLList, HierarchicalData and AdvancedDataGrid

Using a XMLList as source for GroupingCollection or HierarchicalData is a bit tricky. The trickiness comes from the fact that there are two ways to specify values for a XML node. One as attributes and second as child nodes. Depending on which way values are specified we need to set properties differently to get the desired display in ADG. For XMLList data type HierarchicalData treats the child nodes of a node to be children of the parent node by default. Specifying values as attributes:

<Parent field1="valueA" field2="valueB" >
 <Child1 field1="value1" field2="value1b" />
 <Child2 field1="value2" field2="value2b" />
 <Child3 field1="value3" field2="value3b" />
</Parent>

Here Child1, Child2 and Child3 would be recognized as children of Parent node. Specifying values as sub nodes:

<Parent>
    <field1>valueA</field1>
    <field2>valueB</field2>

   <subnodes>
    <Child1>
     <field1>value1</field1>
     <field2>value1b</field2>
    </Child1>
    <Child2>
     <field1>value2</field1>
     <field2>value2b</field2>
    </Child2>
    <Child3>
     <field1>value3</field1>
     <field2>value3b</field2>
    </Child3>
   </subnodes>
</Parent>

If above data is set as source to HierarchicalData it would treat field1, field2 and subnodes as children of Parent node, which is not correct. To tell HierarchicalData to use only the nodes under subnodes as children set HierarchicalData.childrenField to "subnodes".

The same rules apply when GroupingCollection (which is derived from HierarchicalData) is used to group flat data.

Suppose following data is used as input to GroupingCollection and grouped on Region

<Row>
    <Region>Southwest</Region>
    <Territory>Arizona</Territory>
    <Territory_Rep>Barbara Jennings</Territory_Rep>
    <Actual>38865</Actual>
    <Estimate>40000</Estimate>
</Row>

<Row>
    <Region>Southwest</Region>
    <Territory>trials</Territory>
    <Territory_Rep>Dana Binn</Territory_Rep>
    <Actual>4000</Actual>
    <Estimate>5000</Estimate>
</Row>
 
<Row>
    <Region>SouthEast</Region>
    <Territory>Central California</Territory>
    <Territory_Rep>Joe Smith</Territory_Rep>
    <Actual>5000</Actual>
    <Estimate>6000</Estimate>
</Row>

<Row>
   <Region>Southwest</Region>
   <Territory>Nevada</Territory>
   <Territory_Rep>Bethany Pittman</Territory_Rep>
   <Actual>1000</Actual>
   <Estimate>2000</Estimate>
</Row>

The result won't get displayed because the base HierarchicalData would treat <Region>, <Territory> etc nodes also as children of Row. To get proper display we need to set GroupingCollection.childrenField="abc" or some non existent node name. This would cause HierarchicalData to report that no children exist for the Row.