ADOBE® FLEX® 3: ADVANCED DATA VISUALIZATION DEVELOPER GUIDE

ADOBE FLEX 3

Adobe Flex 3 Data Visualization Developer Guide

289

• Any object that implements the ICollectionView interface is represented internally by the AdvancedDataGrid

control as an instance of the ICollectionView interface.

• An object of any other data type is wrapped in an Array instance with the object as its sole entry.

For example, you use an Array to create an instance of the HierarchicalData class, and then pass that

HierarchicalData instance to the

AdvancedDataGrid.dataProvider property. If you read the data back from the

AdvancedDataGrid.dataProvider property, it is returned as an ArrayCollection instance.

Calling validateNow() after setting the data provider

In some situations, you may set the data provider of the AdvancedDataGrid control to hierarchical or grouped data,

and then immediately try to perform an action based on the new data provider. This typically occurs when you set

the

dataProvider property in ActionScript, as the following example shows:

adg.dataProvider = groupedCollection;

adg.expandAll();

In this example, the call to expandAll() fails because the AdvancedDataGrid control is in the process of setting the

dataProvider property, and the expandAll() method either processes the old value of the dataProvider

property, if one existed, or does nothing.

In this situation, you must insert the

validateNow() method after setting the data provider. The validateNow()

method validates and updates the properties and layout of the control, and then redraws it, if necessary. The

following example inserts the

validateNow() method before the expandAll() method:

adg.dataProvider = groupedCollection;

adg.validateNow();

adg.expandAll();

Do not insert the validateNow() method every time you set the dataProvider property because it can affect the

performance of your application; it is only required in some situations when you attempt to perform an operation

on the control immediately after setting the

dataProvider property.

Controlling the navigation tree of the AdvancedDataGrid control

The AdvancedDataGrid control is sometimes referred to as a tree datagrid because a column of the control uses an

expandable tree to determine which rows are currently visible in the control. Often, the tree appears in the left-most

column of the control, where the first column of the control is associated with a field of the control’s data provider.

That data field of the data provider provides the text for the labels of the tree nodes.

In the following example, you populate the AdvancedDataGrid control with the hierarchal data structure shown in

“Hierarchical and grouped data display” on page 287. The data contains a top-level object that contains a Region

field, and multiple second-level children. Each second-level child also contains a Region field and one or more

children.

The AdvancedDataGrid control in this example defines four columns to display the data: Region, Territory Rep,

Actual, and Estimate.

<?xml version="1.0"?>

<!-- dpcontrols/adg/SimpleHierarchicalADG.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

include "SimpleHierarchicalData.as";

]]>

</mx:Script>

ADOBE FLEX 3

Adobe Flex 3 Data Visualization Developer Guide

290

<mx:AdvancedDataGrid width="100%" height="100%">

<mx:dataProvider>

<mx:HierarchicalData source="{dpHierarchy}"/>

</mx:dataProvider>

<mx:columns>

<mx:AdvancedDataGridColumn dataField="Region"/>

<mx:AdvancedDataGridColumn dataField="Territory_Rep"

headerText="Territory Rep"/>

<mx:AdvancedDataGridColumn dataField="Actual"/>

<mx:AdvancedDataGridColumn dataField="Estimate"/>

</mx:columns>

</mx:AdvancedDataGrid>

</mx:Application>

The following image shows the AdvancedDataGrid control created by this example. The control displays a folder

icon to represent branch nodes of the tree, and a file icon to represent leaf nodes. The first column of the control is

associated with the Region field of the data provider, so the tree labels display the value of the Region field.

Notice that the leaf icon for the tree does not show a label. This is because the individual records for each territory

representative do not contain a Region field.

While the tree is often positioned in the left-most column of the control, you can use the

treeColumn property to

specify any column in the control, as the following example shows:

<?xml version="1.0"?>

<!-- dpcontrols/adg/HierarchicalADGCategoriesTreeColumn.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

include "HierarchicalDataCategories.as";

]]>

</mx:Script>

<mx:AdvancedDataGrid

width="100%" height="100%"

treeColumn="{rep}">

<mx:dataProvider>

<mx:HierarchicalData source="{dpHierarchy}"

childrenField="categories"/>

</mx:dataProvider>

<mx:columns>

<mx:AdvancedDataGridColumn dataField="Region"/>

<mx:AdvancedDataGridColumn id="rep"