Using the AdvancedDataGrid control

The Flex MX AdvancedDataGrid control expands on the functionality of the standard MX DataGrid control to add data visualization capabilities to your applications built in Adobe Flex. These capabilities provide greater control of data display, data aggregation, and data formatting.

The AdvancedDataGrid control is sometimes referred to as a tree datagrid because a column of the control can use 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.

The following list describes the main data visualization capabilities of the AdvancedDataGrid control:

• Collect multiple columns under a single column heading
• Sort by multiple columns
• Use an expandable navigation tree in a column to control the visible rows of the control
• Use the styleFunction property to specify a function to apply styles to rows and columns of the control

There are various ways of creating and using the AdvancedDataGrid control:

• Creating column groups
• Sorting by multiple columns
• Displaying hierarchical data
• Displaying grouped data
• Controlling the appearance of the navigation tree

Creating column groups

You can collect multiple columns in an AdvancedDataGrid control under a single column heading by using column groups. To group columns in an AdvancedDataGrid control, 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.

Example

The AdvancedDataGrid control example uses the data from the SimpleFlatData.as file shown below:

SimpleFlatData.as data file

MXML file

Result

Back to top

Sorting by multiple columns

By default, the AdvancedDataGrid control displays data in the order specified in the data passed to its dataProvider property. The AdvancedDataGrid control also lets you sort data in a single column or multiple columns.

By default, click in the header area of a column to sort the rows of the AdvancedDataGrid control by that column. Then click in the multiple column sort area of the header of another column to sort by additional columns. The multiple column sort area is the rectangular area on the right side of the column header.

To sort the columns in the following example:

1. Click in the "Territory" column header area to sort by that column in ascending order. Click the column header again to sort in descending order.
2. Click in the multiple column sort area of the "Territory Rep" column header to arrange it in ascending order while keeping the "Territory" column sorted in descending order.
3. Click in the "Actual" column header area to arrange it in descending order of revenue. Since you clicked in the header area, and not in the multiple column sort area, you create a new sorting by that column only.

Result

Back to top

Displaying hierarchical data

Hierarchical data is data already in a structure of parent and child data items. To support the display of hierarchical data, the AdvancedDataGrid control displays a navigation tree in a column that lets you navigate the data hierarchy.

To configure the AdvancedDataGrid control to display hierarchical data and the navigation tree, you pass to the control's dataProvider property an instance of the HierarchicalData class. You can create an instance of the HierarchicalData class from any data that you can use as a data provider. The structure of the data in the data provider defines how the AdvancedDataGrid control displays the data.

The following example shows an AdvancedDataGrid control with a navigation tree in the first column that controls the visible rows of the control.

Example

The file SimpleHierarchicalData.as contains the hierarchical data displayed by the control. The file contains data about the actual and estimated sales revenues for sales representatives arranged by regions and states of the United States.

SimpleHierarchicalData.as

MXML file

Result

Back to top

Displaying grouped data

Grouped data is flat data that you arrange in a hierarchy for display in the AdvancedDataGrid control. To group your data, you specify one or more data fields that collect the data into the hierarchy.

To populate the AdvancedDataGrid control with grouped data, create an instance of the GroupingCollection2 class from your flat data, and then pass that GroupingCollection2 instance to the data provider of the AdvancedDataGrid control. When you create the instance of the GroupingCollection2 from your flat data, you specify the fields for the data that are used to create the hierarchy.

The following example shows an AdvancedDataGrid control that takes a flat data file as input. You use the GroupingCollection2 to group the data by the Region and Territory fields. You then display the data with a navigation tree in the first column to control the visible rows of the control.

Example

The file SimpleFlataData.as contains the data displayed by the control as an array of Objects. The file contains data about the actual and estimated sales revenues for sales representatives in different states and regions of the United States.

SimpleFlataData.as

MXML file

Result

Back to top

Controlling the appearance of the navigation tree

In several of the examples shown above, the AdvancedDatagrid control displays navigation tree that lets you control the display of the rows of the control. By default, the control uses a folder icon to represent branch nodes of the tree, and a file icon to represent leaf nodes.

The AdvancedDatagrid control gives you a lot of control over the appearance of the navigation tree. For example, 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 to use for the tree.

The navigation tree lets you control the icons and labels used for the branch and leaf nodes. For example, you can display a tree of labels with no icons, a tree with just folder icons, a tree with no labels at all, or a tree in its own column that is not associated with any data field. Use the following properties to control the display of the tree icons: defaultLeafIcon, disclosureClosedIcon, disclosureOpenIcon, folderClosedIcon, and folderOpenIcon.

The following example sets the default folder and leaf icons to null to hide them so that the tree only shows the open and close icons:

Example

Result

Back to top

For more information

• AdvancedDataGrid control

Back to top