Creating column groups

You collect multiple columns under a single column heading by using column groups, as the following example shows:

In this example, you use flat data to populate the data grid, and group the Actual and Estimate columns under a single column named Revenues.

To group columns in an AdvancedDataGrid control, you must do the following:

  • Use the AdvancedDataGrid.groupedColumns property, rather than the AdvancedDataGrid.columns property, to specify the columns.

  • Use the AdvancedDataGridColumnGroup class to specify the column groups.

The following code implements the AdvancedDataGrid control shown in the previous figure:

<?xml version="1.0"?>
<!-- dpcontrols/adg/ColumnGroupADG.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;
                  
            // Import the data used by the AdvancedDataGrid control. 
            include "SimpleFlatData.as";
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG"
        dataProvider="{dpFlat}"
        width="100%" height="100%">
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory"/>
            <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>
</s:Application>

The executing SWF file for the previous example is shown below:

The groupedColumns property contains instances of the AdvancedDataGridColumn class and of the AdvancedDataGridColumn class. Instances of the AdvancedDataGridColumn class appear in the control as stand-alone columns. All the columns specified in an AdvancedDataGridColumnGroup instance appear together as a grouped column.

You can add multiple groups to the control. The following example adds groups named Area and Revenues:

<?xml version="1.0"?>
<!-- dpcontrols/adg/ColumnGroupADG2Groups.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 "SimpleFlatData.as";
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG"
        dataProvider="{dpFlat}"
        width="100%" height="100%">
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumnGroup headerText="Area">    
                <mx:AdvancedDataGridColumn dataField="Region"/>
                <mx:AdvancedDataGridColumn dataField="Territory"/>
            </mx:AdvancedDataGridColumnGroup>    
            <mx:AdvancedDataGridColumnGroup headerText="Revenues">    
                <mx:AdvancedDataGridColumn dataField="Actual"/>
                <mx:AdvancedDataGridColumn dataField="Estimate"/>
            </mx:AdvancedDataGridColumnGroup>    
        </mx:groupedColumns>
   </mx:AdvancedDataGrid>
</s:Application>

The executing SWF file for the previous example is shown below:

You can nest groups so that one column group contains multiple column groups, as the following example shows:

<?xml version="1.0"?>
<!-- dpcontrols/adg/ColumnGroupADG2NestedGroups.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 "SimpleFlatData.as";
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG"
        dataProvider="{dpFlat}"
        width="100%" height="100%">
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumnGroup headerText="All Groups">
                <mx:AdvancedDataGridColumnGroup headerText="Area">
                    <mx:AdvancedDataGridColumn dataField="Region"/>
                    <mx:AdvancedDataGridColumn dataField="Territory"/>
                </mx:AdvancedDataGridColumnGroup>
                <mx:AdvancedDataGridColumnGroup headerText="Revenues">
                    <mx:AdvancedDataGridColumn dataField="Actual"/>
                    <mx:AdvancedDataGridColumn dataField="Estimate"/>
                </mx:AdvancedDataGridColumnGroup>
            </mx:AdvancedDataGridColumnGroup>
        </mx:groupedColumns>
   </mx:AdvancedDataGrid>
</s:Application>

The executing SWF file for the previous example is shown below:

Dragging and dropping columns in the group

By default, you can drag the columns in a group within the group to reposition them. You can also drag the entire group to reposition it in the AdvancedDataGrid control.

To disable dragging of all columns in a group, set the AdvancedDataGridColumnGroup.childrenDragEnabled property to false.

Using grouped columns with hierarchical data

You can use column groups with hierarchical data, as well as flat data. The following example modifies the example in the section Creating a separate column for the navigation tree to group the Actual and Estimates columns under the Revenues group column:

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleHierarchicalADGGroupCol.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 "SimpleHierarchicalData.as";
      ]]>
    </fx: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>    
</s:Application>

The executing SWF file for the previous example is shown below:

Specify a data field for the AdvancedDataGridColumnGroup class

The previous examples for column groups do not specify a data field 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 subfields of that data field.

In the following example, the HierarchicalDataForGroupedColumns.as file defines a hierarchical data set where the Revenues field contains two subfields, 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 this data and specifies the Revenues field as the value of the AdvancedDataGridColumnGroup.dataField property, and creates the following output:

The following code implements this example:

<?xml version="1.0"?>
<!-- dpcontrols/adg/ColumnGroupHierarchData.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 "HierarchicalDataForGroupedColumns.as";
        ]]>
    </fx: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>
</s:Application>

The executing SWF file for the previous example is shown below: