TreeDataGrid

From Openzet

Jump to: navigation, search

Contents

Introduction

Custom DataGrid component that accepts ArrayCollection with treeFieds property value assigned or GroupingCollection as dataProvider. This class show tree view data hierarchy, whose layout depends on treeDirection property accepting possible values of “vertical” and “horizontal.”

Property

treeFields Specifies tree fields as Array of TreeDataGrid control. treeFields should be an Array with more than one element of field string in the dataProvider object.

treeDirection Specifies the tree layout. Default value is “vertical” and possible values are “vertical” and “horizontal.”

Usage

You can bind an ArrayCollection instance with treeFields property value assigned or simply a GroupingCollection instance with TreeDataGrid control. Depending on the value of TreeDataGrid’s treeDirection property, This controls shows horizontal tree view, like that of OLAP DataGrid, or vertical tree view of data. 


<zet:TreeDataGrid
 id="dg" treeDirection="horizontal" treeFields="{['planet','kind']}"
 width="700">
 <zet:columns>
 <mx:DataGridColumn dataField="planet"
 headerText="planet" >
 <mx:itemRenderer>
 <mx:Component>
 <dataGridClasses:DataGridTreeItemRenderer />
 </mx:Component>
</mx:itemRenderer> </mx:DataGridColumn>
 <mx:DataGridColumn dataField="kind" headerText="kind" />
 <mx:DataGridColumn dataField="year_duration" headerText="year_duration" />
 <mx:DataGridColumn dataField="moons" headerText="moons" />
 </zet:columns>
 </zet:TreeDataGrid>
You should always use DataGridTreeItemRenderer as itemRenderer when you use TreeDataGrid control in an application. You can change the direction of tree view at compile time or at run time by changing the value of treeDirection property. For a vertical tree view, you specify “vertical” as this property’s value like the following code: 
<zet:TreeDataGrid
 id="dg" treeDirection="vertical" treeFields="{['planet','kind']}"
 width="700" />
And for a horizontal tree view, you simply assign it with “horizontal” value. 
<zet:TreeDataGrid
 id="dg" treeDirection="horizontal" treeFields="{['planet','kind']}"
 width="700" />
You could use GroupingCollection instance for TreeDataGrid’s datarovider like the following code: 
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 = gc;
Or with treeFields property value assigned, 
<zet:TreeDataGrid
 id="dg" treeDirection="horizontal" treeFields="{['planet','kind']}"
 width="700" />
you can simply use an ArrayCollection instance for dataProvider. In this case, TreeDataGrid class internally makes a GroupingCollection instance with both ArrayCollection instance and treeFields property value and binds again the resulting GroupingCollection data. 
[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}
 ]);
TreeDataGrid class implements ITreeDataGrid interface. ITreeDataGrid interface defines the following methods. 
package org.openzet.controls.dataGridClasses
{
 /**
 * Interface that defines methods needed for a DataGrid showing data in a tree hierarchy.
 * 
 **/
 public interface ITreeDataGrid
 {
 /**
 * Method to collapse tree Item
 * 
 * @param item Any node item object
 * @param dataField The datafield of the current column
 **/
 function collapseTreeItem(item:Object, dataField:String = null):void;
 
 /**
 * Method to expand tree Item
 * 
 * @param item Any node item object
 * @param dataField The datafield of the current column
 **/
 function expandTreeItem(item:Object, dataField:String = null):void; 
 
 /**
 * A getter method to return tree column's dataField when treeDirection is set as vertical.
 **/
 function get treeColumnField():String; 
 
 /**
 * @private 
 **/
 function set treeDirection(value:String):void;
 
 /**
 * Setter/getter method to define tree view direction. 
 **/
 function get treeDirection():String;
 }
}
Classes that implement ITreeDataGrid interface include TreeDataGrid and AdvancedTreeDataGrid, and both these classes use DataGridTreeItemRenderer to display tree view. The relationship between these classes and the itemRenderer are made through ITreeDataGrid interface.

The only difference between AdvancedTreeDataGrid and TreeDataGrid is that the former extends AdvancedDataGrid, while the latter extends DataGrid.

Application Example

The following is the entire application source code for TreeDataGrid control. 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 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.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();
 dg2.dataProvider = gc;
 dg3.dataProvider = new ArrayCollection(planets);
 
 dg.dataProvider = dpFlat;
 }
 
 ]]>
 </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:itemRenderer>
 <mx:Component>
 <dataGridClasses:DataGridTreeItemRenderer />
 </mx:Component>
 </mx:itemRenderer> 
 </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="horizontal" treeFields="{['planet','kind']}"
 width="700">
 <zet:columns>
 <mx:DataGridColumn dataField="planet"
 headerText="planet" >
 <mx:itemRenderer>
 <mx:Component>
 <dataGridClasses:DataGridTreeItemRenderer />
 </mx:Component>
 </mx:itemRenderer> </mx:DataGridColumn>
 <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="vertical" treeFields="{['planet','kind']}"
 width="700">
 <zet:columns>
 <mx:DataGridColumn dataField="planet"
 headerText="planet" >
 <mx:itemRenderer>
 <mx:Component>
 <dataGridClasses:DataGridTreeItemRenderer />
 </mx:Component>
 </mx:itemRenderer> 
 </mx:DataGridColumn>
 <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:Application>

Application result :

Image:TreeDataGrid.png

Retrieved from "http://www.openzet.org/wiki_en/index.php/TreeDataGrid"
Personal tools
Participation
Silverlight