ADOBE FLEX 3
Adobe Flex 3 Data Visualization Developer Guide
309
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 c o lumns 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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// Import the data used by the AdvancedDataGrid control.
include "SimpleFlatData.as";
]]>
</mx: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>
ADOBE FLEX 3
Adobe Flex 3 Data Visualization Developer Guide
310
</mx:Application>
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 -->
<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"
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>
</mx:Application>
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 -->
<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"
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"/>

Get ADOBE® FLEX® 3: ADVANCED DATA VISUALIZATION DEVELOPER GUIDE now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.