Packageorg.openzet.controls
Classpublic class AdvancedTreeDataGrid
InheritanceAdvancedTreeDataGrid Inheritance mx.controls.AdvancedDataGrid
ImplementsITreeDataGrid
SubclassesAdvancedSelectionDataGrid

The AdvancedTreeDataGrid control adds horizontal tree view feature on AdvancedDataGrid to show data in a hierarchical tree way, horizontally and vertically.

The AdvancedTreeDataGrid control provides the following features:

The AdvancedTreeDataGrid class is a base Class for AdvancedZetDataGrid, which is a subclass of AdvancedSelectionDataGrid.

View the examples.


Public Properties
 PropertyDefined by
  dataProvider : Object
[write-only] Overrides DataGrid's dataProvider property to show hierarchical data view on a AdvancedTreeDataGrid control.
AdvancedTreeDataGrid
  treeColumnField : String
[read-only] Function that returns treeColumnField.
AdvancedTreeDataGrid
  treeDirection : String
A property to set TreeDataGrid's data direction, horizontal or vertical.
AdvancedTreeDataGrid
  treeFields : Array
An array type of property to set dataFields that should be used as tree dataFields.
AdvancedTreeDataGrid
  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.
AdvancedTreeDataGrid
Protected Properties
 PropertyDefined by
  source : Object
Property to store GroupingCollection instance's source data or ArrayCollection instance itself to reuse original data.
AdvancedTreeDataGrid
  treeColumnInfo : Dictionary
A dictionary that saves information on how many items under a specific column have been opened.
AdvancedTreeDataGrid
Public Methods
 MethodDefined by
  
AdvancedTreeDataGrid()
Constructor
AdvancedTreeDataGrid
  
collapseTreeItem(item:Object, dataField:String = null):void
public function to collapse a child node's data either horizontally or vertically.
AdvancedTreeDataGrid
  
expandTreeItem(item:Object, dataField:String = null):void
public function to expand a child node's data either horizontally or vertically.
AdvancedTreeDataGrid
Events
 EventSummaryDefined by
  
directionChanged
Dispatched when tree's direction is changed.AdvancedTreeDataGrid
  
itemClose
Dispatched when a child node is closed.AdvancedTreeDataGrid
  
itemOpen
Dispatched when a child node is expanded.AdvancedTreeDataGrid
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. 		AdvancedTreeDataGrid
  
indentation
Type: Number   Format: Length   CSS Inheritance: no
The indentation for each node of the navigation tree, in pixels. The default value is 0.		AdvancedTreeDataGrid
  
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. 		AdvancedTreeDataGrid
Property detail
dataProviderproperty
dataProvider:Object  [write-only]

Overrides DataGrid's dataProvider property to show hierarchical data view on a AdvancedTreeDataGrid control. Sinced AdvancedDataGrid class automatically makes Tree view when dataProvider is IHierarchicalData type of data, we make HierarchicalCollectionView based on the value and gets its root data when treeDirection property is set to horizontal. 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

Property to store GroupingCollection instance's source data or ArrayCollection instance itself to reuse original data.

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
AdvancedTreeDataGrid()constructor
public function AdvancedTreeDataGrid()

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>