Packageorg.openzet.controls
Classpublic class TreeDataGrid
InheritanceTreeDataGrid Inheritance mx.controls.DataGrid
ImplementsITreeDataGrid
SubclassesSelectionDataGrid

The TreeDataGrid expands on the functionality of DataGrid to show data in a hierarchical tree view, horizontally and vertically.

The TreeDataGrid control provides the following features:

The TreeDataGrid class is a base Class for SelectionDataGrid.

View the examples.


Public Properties
 PropertyDefined by
  dataProvider : Object
[write-only] Overrides DataGrid's dataProvider property to show hierarchical data view on a TreeDataGrid control.
TreeDataGrid
  treeColumnField : String
[read-only] Function that returns treeColumnField.
TreeDataGrid
  treeDirection : String
A property to set TreeDataGrid's data direction, horizontal or vertical.
TreeDataGrid
  treeFields : Array
An array type of property to set dataFields that should be used as tree dataFields.
TreeDataGrid
  treeInfo : Dictionary
A dictionary that saves information on which node has which information, such as whether a specific node has children, whether is has been opened or not.
TreeDataGrid
Protected Properties
 PropertyDefined by
  source : Object
TreeDataGrid
  treeColumnInfo : Dictionary
A dictionary that saves information on how many items under a specific column have been opened.
TreeDataGrid
Public Methods
 MethodDefined by
  
TreeDataGrid()
Constructor
TreeDataGrid
  
collapseTreeItem(item:Object, dataField:String = null):void
public function to collapse a child node's data either horizontally or vertically.
TreeDataGrid
  
expandTreeItem(item:Object, dataField:String = null):void
public function to expand a child node's data either horizontally or vertically.
TreeDataGrid
Events
 EventSummaryDefined by
  
directionChanged
Dispatched when tree's direction is changed.TreeDataGrid
  
itemClose
Dispatched when a child node is closed.TreeDataGrid
  
itemOpen
Dispatched when a child node is expanded.TreeDataGrid
Styles
 StyleDescriptionDefined by
  
closeIcon
Type: Class   Format: EmbeddedFile   CSS Inheritance: no
The icon that is displayed next to a closed branch node of the navigation tree. The default value is icon_close.png file. 		TreeDataGrid
  
indentation
Type: Number   Format: Length   CSS Inheritance: no
The indentation for each node of the navigation tree, in pixels. The default value is 0.		TreeDataGrid
  
openIcon
Type: Class   Format: EmbeddedFile   CSS Inheritance: no
The icon that is displayed next to an open branch node of the navigation tree. The default value is the icon_open.png file. 		TreeDataGrid
Property detail
dataProviderproperty
dataProvider:Object  [write-only]

Overrides DataGrid's dataProvider property to show hierarchical data view on a TreeDataGrid control. If value is IHierarchicalData type of data, we make HierarchicalCollectionView based on the value and gets its root data, ie the top node data, and calls super class' dataProvider method by assigning root data as its dataProvider. If value is just an arrayCollection we simply calls super.dataProvider = value and try to make treeData if treeFields are set.

Implementation
    public function set dataProvider(value:Object):void
sourceproperty 
protected var source:Object
treeColumnFieldproperty 
treeColumnField:String  [read-only]

Function that returns treeColumnField. This method is only used when treeDirection property is set as vertical since when it is horizontal, there could be many treeFields.

Implementation
    public function get treeColumnField():String
treeColumnInfoproperty 
protected var treeColumnInfo:Dictionary

A dictionary that saves information on how many items under a specific column have been opened. This dictionary is used to track children nodes that have been opened and closed on a specific column so that we can show and hide specific columns of a TreeDataGrid when children nodes change their status of openness. This dictionary is used only when treeDirection is set horizontal.

treeDirectionproperty 
treeDirection:String  [read-write]

A property to set TreeDataGrid's data direction, horizontal or vertical. Default value is vertical.

Implementation
    public function get treeDirection():String
    public function set treeDirection(value:String):void
treeFieldsproperty 
treeFields:Array  [read-write]

An array type of property to set dataFields that should be used as tree dataFields. If not set, you should always provide dataProvider as type of GroupingCollectionView. Otherwise, tree type of data wouldn't show up correctly. Yet if you provide arrayCollection as a dataProvider along with treeFields property, the data would show up correctly since TreeDataGrid control internally converts an arrayCollection dataProvider to a GroupingCollection instance with treeFields property's value.

Implementation
    public function get treeFields():Array
    public function set treeFields(value:Array):void
treeInfoproperty 
public var treeInfo:Dictionary

A dictionary that saves information on which node has which information, such as whether a specific node has children, whether is has been opened or not. A node saves its information by combining mx_internal_uid of the node and its column dataField.

Constructor detail
TreeDataGrid()constructor
public function TreeDataGrid()

Constructor

Method detail
collapseTreeItem()method
public function collapseTreeItem(item:Object, dataField:String = null):void

public function to collapse a child node's data either horizontally or vertically. This method is an implementation of ITreeDataGrid interface.

Parameters
item:Object — A row data object
 
dataField:String (default = null) — Column's dataField. Default value is null.
expandTreeItem()method 
public function expandTreeItem(item:Object, dataField:String = null):void

public function to expand a child node's data either horizontally or vertically. This method is an implementation of ITreeDataGrid interface.

Parameters
item:Object — A row data object
 
dataField:String (default = null) — Column's dataField. Default value is null.
Event detail
directionChangedevent 
Event object type: org.openzet.events.TreeDataGridEvent

Dispatched when tree's direction is changed.

itemCloseevent  
Event object type: org.openzet.events.TreeDataGridEvent

Dispatched when a child node is closed.

itemOpenevent  
Event object type: org.openzet.events.TreeDataGridEvent

Dispatched when a child node is expanded.

Examples
TreeDataGridExample
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12"
            xmlns:zet="org.openzet.controls.*" layout="vertical"
            creationComplete="onCreationComplete();" xmlns:dataGridClasses="org.openzet.controls.dataGridClasses.*">
    <mx:Script>
        <![CDATA[
            import mx.collections.HierarchicalData;
            import mx.utils.ObjectUtil;
            import mx.core.UIComponent;
            
            import mx.utils.ObjectProxy;
            import mx.collections.HierarchicalCollectionView;
            import mx.collections.IHierarchicalCollectionView;
            import mx.collections.SummaryField;
            import mx.collections.ArrayCollection;
            import mx.collections.Grouping;
            import mx.collections.GroupingCollection;
            import mx.collections.GroupingField;
            import mx.collections.ICollectionView;
            import mx.controls.AdvancedDataGrid;
            import mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer
            import mx.controls.OLAPDataGrid;
        
        [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}
        ]);

      

        private var gc:GroupingCollection = new GroupingCollection();
        
        public function onCreationComplete():void
        {
             var g:Grouping = new Grouping();
            g.fields = [new GroupingField("planet"), new GroupingField("kind")];
            gc.source = new ArrayCollection(planets);
            gc.grouping = g;
            gc.refresh(); 
            dg.dataProvider = dpFlat;
              dg2.dataProvider =new ArrayCollection(planets);
            dg3.dataProvider = gc; 
        }
        
        private function buttonClickHandler(event:MouseEvent):void {
            dg.treeDirection = dg.treeDirection =="vertical"?"horizontal":"vertical";
            dg2.treeDirection = dg2.treeDirection =="vertical"?"horizontal":"vertical";
            dg3.treeDirection = dg3.treeDirection =="vertical"?"horizontal":"vertical";
        }
        ]]>
    </mx:Script>
        <mx:Array id="planets">
        <mx:Object planet="Mercury" kind="Terrestrial"
            year_duration="0.24" moons="0" cost="1250" />
        <mx:Object planet="Venus" kind="Terrestrial"
            year_duration="0.62" moons="0" cost="2400" />
        <mx:Object planet="Jupiter" kind="Gas giant"
            year_duration="11.86" moons="63" cost="500" />
        <mx:Object planet="Neptune" kind="Gas giant"
            year_duration="164.8" moons="13" cost="3000" />
        <mx:Object planet="Ceres" kind="Ice dwarf"
            year_duration="4.60" moons="0" cost="4000" />
        <mx:Object planet="Pluto" kind="Ice dwarf"
            year_duration="248.09" moons="3" cost="4500" />
        <mx:Object planet="Eris" kind="Ice dwarf"
            year_duration="557" moons="1" cost="3000" />
    </mx:Array>
        
    <zet:AdvancedTreeDataGrid
            id="dg" treeDirection="horizontal" treeFields="{['Region','Territory']}"
            width="700">
       <zet:columns>
            <mx:AdvancedDataGridColumn dataField="Region"
                                       headerText="Region" >
            </mx:AdvancedDataGridColumn>
            <mx:AdvancedDataGridColumn dataField="Territory"  headerText="Territory" />
            <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory_Rep" />
            <mx:AdvancedDataGridColumn dataField="Actual" headerText="Actual" />
            <mx:AdvancedDataGridColumn dataField="Estimate" headerText="Estimate" />
       </zet:columns>
    </zet:AdvancedTreeDataGrid>
    
    
    <zet:TreeDataGrid
            id="dg2" treeDirection="vertical" treeFields="{['planet','kind']}"
            width="700">
       <zet:columns>
            <mx:DataGridColumn dataField="planet"
                                       headerText="planet" />
            <mx:DataGridColumn dataField="kind"  headerText="kind" />
            <mx:DataGridColumn dataField="year_duration" headerText="year_duration" />
            <mx:DataGridColumn dataField="moons" headerText="moons" />
       </zet:columns>
    </zet:TreeDataGrid>
    
      <zet:ZetDataGrid
            id="dg3" treeDirection="horizontal" treeFields="{['planet','kind']}"
            width="700">
       <zet:columns>
            <mx:DataGridColumn dataField="planet"
                                       headerText="planet" />
            <mx:DataGridColumn dataField="kind"  headerText="kind" />
            <mx:DataGridColumn dataField="year_duration" headerText="year_duration" />
            <mx:DataGridColumn dataField="moons" headerText="moons" />
       </zet:columns>
    </zet:ZetDataGrid>
    <mx:Button label="change Direction" click="buttonClickHandler(event)" />
</mx:Application>