The AdvancedDataGrid control extends the capabilities of the standard DataGrid control to improve data visualization. The following table describes the main data visualization capabilities of the AdvancedDataGrid control:

Displaying hierarchical and grouped data

One of the most important aspects of the AdvancedDataGrid control is its support for the display of hierarchical and grouped data. Hierarchical data is data already in a structure of parent and child data items. Grouped data is flat data with no inherent hierarchy. Before passing flat data to the AdvancedDataGrid control, you specify one or more data fields that are used to group the flat data into a hierarchy.

To support the display of hierarchical and grouped data, the AdvancedDataGrid control displays a navigation tree in a column that lets you navigate the data hierarchy. The following example shows an AdvancedDataGrid control with a navigation tree in the first column that controls the visible rows of the control, but it can be in any column:

Migrating from the DataGrid control

Besides the major new features added to the AdvancedDataGrid control described in the section About the AdvancedDataGrid control, the AdvancedDataGrid control adds the following property:

firstVisibleItem 

Specifies the item that is currently displayed in the top row of the AdvancedDataGrid control.

For a complete list of properties and methods of the control, see the Adobe Flex Language Reference.

One consideration when migrating an existing application from the DataGrid control to the AdvancedDataGrid control is that the data type of many event objects dispatched by the AdvancedDataGrid control is of type AdvancedDataGridEvent, not of type DataGridEvent as it is for the DataGrid control. If your application references the event object by type, you must update your application so that it uses the correct data type.

To determine the type of the event object for any event, see the Adobe Flex Language Reference.

Example: Creating column groups

Column grouping lets you collect multiple columns under a single column heading. The following example shows the Actual and Estimate columns grouped under the Revenues column:

The AdvancedDataGrid control is defined by the mx.controls.AdvancedDataGrid class and additional classes in the package mx.controls.advancedDataGridClasses. This package includes the AdvancedDataGridColumn class that you use to define a column.

The following code creates the column grouping shown in the previous image:

<?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>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example imports the data used by the AdvancedDataGrid control from a file named SimpleFlatData.as. You can see the contents of that file in the topic Hierarchical and grouped data display.