Using the AdvancedDataGrid control
Requirements
User level
All
Required products
- Flex (Download trial)
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
styleFunctionproperty 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.groupedColumnsproperty, 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
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona", Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona", Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California", Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada", Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California", Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California", Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California", Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California", Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
MXML file
<?xml version="1.0"?>
<!-- ADGColumnGroup.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"
width="550" height="340">
<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>
Result
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:
- 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.
- 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.
- 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
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
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", children: [
{Region:"Arizona", children: [
{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
{Region:"Central California", children: [
{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
{Region:"Nevada", children: [
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"Northern California", children: [
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"Southern California", children: [
{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}
]);
MXML file
<?xml version="1.0"?>
<!-- ADGHierarchData.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"
width="550" height="340">
<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: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>
</s:Application>
Result
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
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona", Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona", Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California", Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada", Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California", Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California", Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California", Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California", Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
MXML file
<?xml version="1.0"?>
<!-- ADGGroupData.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"
width="550" height="340">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
include "SimpleFlatData.as"
]]>
</fx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection2 id="gc" source="{dpFlat}">
<mx:grouping>
<mx:Grouping label="Region">
<mx:GroupingField name="Region"/>
<mx:GroupingField name="Territory"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection2>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</s:Application>
Result
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
<?xml version="1.0"?>
<!-- ADGTreeColumn.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"
width="550" height="340">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
include "SimpleHierarchicalData.as";
]]>
</fx:Script>
<mx:AdvancedDataGrid width="100%" height="100%"
folderClosedIcon="{null}"
folderOpenIcon="{null}"
defaultLeafIcon="{null}">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn headerText="" width="50" draggable="false"/>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</s:Application>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
