ADOBE® FLEX® 3: ADVANCED DATA VISUALIZATION DEVELOPER GUIDE

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"/>