Flex - AdvancedDataGrid Control



The AdvancedDataGrid control added multiple functionalities to the standard DataGrid control to add data visualization features to Flex application. These features provide greater control of data display, data aggregation, and data formatting.

Class declaration

Following is the declaration for mx.controls.AdvancedDataGrid class:

public class AdvancedDataGrid
   extends AdvancedDataGridBaseEx

Public properties

S.N.Property & Description
1displayDisclosureIcon : Boolean
Controls the creation and visibility of disclosure icons in the navigation tree.
2displayItemsExpanded : Boolean
If true, expand the navigation tree to show all items.
3firstVisibleItem : Object
The data provider element that corresponds to the item that is currently displayed in the top row of the AdvancedDataGrid control.
4groupedColumns : Array
An Array that defines the hierarchy of AdvancedDataGridColumn instances when performing column grouping.
5groupIconFunction : Function
A user-supplied callback function to run on each group item to determine its branch icon in the navigation tree.
6groupItemRenderer : IFactory
Specifies the item renderer used to display the branch nodes in the navigation tree that correspond to groups.
7groupLabelFunction : Function
A callback function to run on each item to determine its label in the navigation tree.
8groupRowHeight : Number
The height of the grouped row, in pixels.
9hierarchicalCollectionView : IHierarchicalCollectionView
The IHierarchicalCollectionView instance used by the control.
10itemIcons : Object
An object that specifies the icons for the items.
11lockedColumnCount : int
[override] The index of the first column in the control that scrolls.
12lockedRowCount : int
[override] The index of the first row in the control that scrolls.
13rendererProviders : Array
Array of AdvancedDataGridRendererProvider instances.
14selectedCells : Array
Contains an Array of cell locations as row and column indices.
15treeColumn : AdvancedDataGridColumn
The column in which the tree is displayed.

Protected properties

S.N.Property & Description
1anchorColumnIndex : int = -1
The column index of the current anchor.
2caretColumnIndex : int = -1
The column name of the item under the caret.
3cellSelectionTweens : Object
A hash table of selection tweens.
4highlightColumnIndex : int = -1
The column index of the item that is currently rolled over or under the cursor.
5selectedColumnIndex : int = -1
The column of the selected cell.
6treeColumnIndex : int
[read-only] The tree column number.
7tween : Object
The tween object that animates rows Users can add event listeners to this Object to get notified when the tween starts, updates and ends.
8visibleCellRenderers : Object
A hash table of data provider item renderers currently in view.

Public methods

S.N.Method & Description
Collapses all the nodes of the navigation tree.
Expands all the nodes of the navigation tree in the control.
4expandChildrenOf(item:Object, open:Boolean):void
Opens or closes all the nodes of the navigation tree below the specified item.
5expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void
Opens or closes a branch node of the navigation tree.
Returns the parent of a child item.
Returns true if the specified branch node is open.
8setItemIcon(item:Object, iconID:Class, iconID2:Class):void
Sets the associated icon in the navigation tree for the item.

Protected Methods

S.N.Method & Description
1addCellSelectionData(uid:String, columnIndex:int, selectionData:AdvancedDataGridBaseSelectionData):void
Adds cell selection information to the control, as if you used the mouse to select the cell.
2applyCellSelectionEffect(indicator:Sprite, uid:String, columnIndex:int, itemRenderer:IListItemRenderer):void
Sets up the effect for applying the selection indicator.
Applies styles from the AdvancedDataGrid control to an item renderer.
Returns true if the Object has at least one property, which means that the dictionary has at least one key.
Clears information on cell selection.
[override] Removes all selection and highlight and caret indicators.
7clearSelectedCells(transition:Boolean = false):void
Clears the selectedCells property.
[override] Handler for the DragEvent.DRAG_COMPLETE event.
[override] Handler for the DragEvent.DRAG_DROP event.
10drawVerticalLine(s:Sprite, colIndex:int, color:uint, x:Number):void
[override] Draws a vertical line between columns.
[override] Sets selected items based on the caretIndex and anchorIndex properties.
12initListData(item:Object, adgListData:AdvancedDataGridListData):void
Initializes an AdvancedDataGridListData object that is used by the AdvancedDataGrid item renderer.
13moveIndicators(uid:String, offset:int, absolute:Boolean):void
[override] Moves the cell and row selection indicators up or down by the given offset as the control scrolls its display.
14removeCellSelectionData(uid:String, columnIndex:int):void
Removes cell selection information from the control.
15selectCellItem(item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean
Updates the list of selected cells, assuming that the specified item renderer was clicked by the mouse, and the keyboard modifiers are in the specified state.
16selectItem(item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean
[override] Updates the set of selected items given that the item renderer provided was clicked by the mouse and the keyboard modifiers are in the given state.
Handler for keyboard navigation for the navigation tree.


S.N.Event & Description
Dispatched when the user drags a column outside of its column group.
Dispatched when the user drops a column outside of its column group.
Dispatched when a branch of the navigation tree is closed or collapsed.
Dispatched when a branch of the navigation tree is opened or expanded.
Dispatched when a tree branch open or close operation is initiated.

Methods inherited

This class inherits methods from the following classes:

  • mx.controls.AdvancedDataGridBaseEx

  • mx.controls.AdvancedDataGridBase

  • mx.controls.listClasses.AdvancedDataGridBase

  • mx.core.ScrollControlBase

  • mx.core.UIComponent

  • mx.core.FlexSprite

  • flash.display.Sprite

  • flash.display.DisplayObjectContainer

  • flash.display.InteractiveObject

  • flash.display.DisplayObject

  • flash.events.EventDispatcher

  • Object

Flex AdvancedDataGrid Control Example

Let us follow the following steps to check usage of AdvancedDataGrid control in a Flex application by creating a test application:

1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   width="100%" height="100%" minWidth="500" minHeight="500"
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>	
         import mx.collections.ArrayCollection;
         public var data:ArrayCollection = new ArrayCollection(
            {value:"France", code:"FR"},
            {value:"Japan", code:"JP"},
            {value:"India", code:"IN"},
            {value:"Russia", code:"RS"},
            {value:"United States", code:"US"}		
   <s:BorderContainer width="630" height="480" id="mainContainer" 
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Complex Controls Demonstration" 
            fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel id="dataGridPanel" title="Using DataGrid" 
            width="500" height="300">
               <s:VerticalLayout  gap="10" verticalAlign="middle" 
            <mx:AdvancedDataGrid dataProvider="{data}" id="advancedDataGrid" >
                  <mx:AdvancedDataGridColumn dataField="code" width="100" 
                  headerText="Code" />
                  <mx:AdvancedDataGridColumn dataField="value" width="200" 
            <s:HGroup width="60%">
               <s:Label text="Code :"/> 
               <s:Label text="{advancedDataGrid.selectedItem.code}"
               <s:Label text="Value :"/> 
               <s:Label text="{advancedDataGrid.selectedItem.value}"

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex AdvancedDataGrid Control