Datagrid
From Openzet
Contents |
TreeDataGrid
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 [datagrid#TreeDataGrid|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 :
SelectionDataGrid
Introduction
Custom class that expands on the functionality of TreeDataGrid class and implements ICellSelectable interface by providing enableDragSelection property. The control allows users to drag-select DataGrid’s cells. Also this class provides a context menu which pops up a TitleWindow to show a Chart data of the drag-selected cells. To specify a specific series of a chart type, you need to assign seriesType property’s value, whose default value is ColumnSeries. Also SelectionDataGrid has dragSelectionData property, which is defined by ICellSelectable interface. The value of this property equals the data value of drag-selected cells. dragSelectionData property’s value is most commonly used when users want to bind drag-selected region’s data with other controls, such as a CartesianChart.
Additionally, though not always a required property, SelectionDataGrid class provides xField property, which is used to specify chart series’ xField. If not assigned, popup chart series’ xField values could be odd values, such as 0, 1, 2 etc. Default value of this property is null.
Property
enableDragSelection Specifies whether users can drag-select cells of this control. Default value is true.
seriesType Specifies the series type to show when users select showChart context menu item. Default value of this property is ColumnSeries and possible values are ColumnSeries, LineSeries, BarSeries, AreaSeries.
Usage
For usage, here is a simple example for SelectionDataGrid class. This class internally takes care of a lot of work, so as a developer, you don’t need to worry about assigning various properties or handling events. In the following example, this control would show BarSeries chart when user selects context menu item to show popup chart.
Default value of SelectionDataGrid’s enableDragSelection property is true.
<zet:SelectionDataGrid seriesType="BarSeries" id="dg" width="100%" height="100%">
<zet:columns>
<mx:DataGridColumn dataField="A" textAlign="right" />
<mx:DataGridColumn dataField="B" textAlign="right" />
<mx:DataGridColumn dataField="C" textAlign="right" />
<mx:DataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:SelectionDataGrid>
Application Example
The following is the entire application source code for this control.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:zet="org.openzet.controls.*" layout="horizontal" creationComplete="initApp();">
<mx:Script>
<![CDATA[
import mx.charts.series.LineSeries;
import mx.events.AdvancedDataGridEvent;
import mx.events.DataGridEvent;
import mx.charts.series.ColumnSeries;
import mx.charts.chartClasses.Series;
import mx.core.UIComponent;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import flash.utils.*;
import mx.charts.series.ColumnSeries;
import org.openzet.controls.dataGridClasses.ICellSelectable;
private function initApp():void {
var arr:ArrayCollection = new ArrayCollection();
var len:Number = 30 + Math.round(Math.random()*50);
for (var i:int=0; i<len;i++) {
arr.addItem({});
arr[i].A= Math.random()*1000;
arr[i].B= Math.random()*1000;
arr[i].C= Math.random()*1000;
arr[i].D= Math.random()*1000;
}
dg.dataProvider = arr;
dg2.dataProvider = arr;
}
private function dragEnterHandler(event:DragEvent):void {
DragManager.acceptDragDrop(event.currentTarget as UIComponent);
}
private function dropHandler(event:DragEvent):void {
var arr:ArrayCollection = ICellSelectable(event.dragInitiator).dragSelectionData as ArrayCollection;
var fields:Array = cloneFields(arr);
var series:Array=[];
for (var i:int=0; i<fields.length;i++) {
var ser:ColumnSeries= new ColumnSeries();
ser.yField=fields[i];
ser.displayName = fields[i];
series.push(ser);
}
chart.dataProvider=arr;
chart.series=series;
}
private function cloneFields(value:ArrayCollection):Array {
var item:Object;
var fields:Array;
if (value && value.length >0) {
item = value[0];
fields = [];
for (var prop:String in item) {
fields.push(prop);
}
}
return fields;
}
]]>
</mx:Script>
<mx:VBox width="100%" height="80%">
<zet:AdvancedSelectionDataGrid rowHeight="30" enableDragSelection="true" seriesType="LineSeries" id="dg" width="100%" height="100%">
<zet:columns>
<mx:AdvancedDataGridColumn dataField="A" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="B" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="C" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:AdvancedSelectionDataGrid>
<zet:SelectionDataGrid seriesType="BarSeries" id="dg2" width="100%" height="100%">
<zet:columns>
<mx:DataGridColumn dataField="A" textAlign="right" />
<mx:DataGridColumn dataField="B" textAlign="right" />
<mx:DataGridColumn dataField="C" textAlign="right" />
<mx:DataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:SelectionDataGrid>
</mx:VBox>
<mx:ColumnChart id="chart" dragEnter="dragEnterHandler(event);" dragDrop="dropHandler(event);" width="100%" height="100%">
</mx:ColumnChart>
</mx:Application>
Application result:
ZetDataGrid
Introduction
Custom class that expands on the functionality of SelectionDataGrid and implements IZetDataGrid interface. This class provides enableFilter property, which lets users filter data bound with DataGrid control easily as you do with Excel 2007. Also this class allows rowspan, meaning cells of the same column with same data values could be merged.
This is a descendent class of both SelectionDataGrid and 클래스와 TreeDataGrid, so provides all the functionalities, such as data tree view and cell drag selection, chart popup view, implemented by its ancestors. Yet as of writing this document, there’s a known bug about enableDragSelection property, where merged cells and this property come into conflict.
This class allows users to filter data as you would with Excel 2007 by providing enableFilter property. If set to true, ZetDataGrid class internally sets all columns’ headerRenderer as FilterItemRenderer to provide this feature.
Note that to merge data vertically, you must use ZetDataGridColumn as a DataGridColumn instance. ZetDataGridColumn implements enableMerge setter/getter method defined by IMergeable interface.
Property
enableFilter Specifies whether to allow Excel 207 type of data filtering to this control. Default value is false.
Usage
Basic usage for ZetDataGridColumn is not that different from ordinary DataGrid controls, except that you should always use ZetDataGridColumn as a DataGridColumn. Also you can set the value of enableFilter property by mxml and actionscript. This property’s default value is false.
The following is a simple example that enables data merge and data filtering of the ZetDataGrid control.
<zet:ZetDataGrid id="dg" enableFilter="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%" dataProvider="{arr}">
<zet:columns>
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="A" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="B" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:ZetDataGrid>
ZetDataGridColumn column also provides checked property. If set to true, the column’s headerRenderer and itemRenderer will be set as DataGridHeaderCheckBox and DataGridCheckBoxRenderer respectively. Setting these renderers dynamically would be done internally by ZetDataGrid control.
The following is an example code for this.
<controls:ZetDataGrid id="dg" dataProvider="{arr}" draggableColumns="true">
<controls:columns>
<dataGridClasses:ZetDataGridColumn dataField="A" />
<dataGridClasses:ZetDataGridColumn dataField="B" />
<dataGridClasses:ZetDataGridColumn dataField="selected" checked="true" />
</controls:columns>
</controls:ZetDataGrid>
In this example, values for selected field should always be Boolean type (true/false).
Application Example
The following is an entire application code for ZetDataGrid control.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:local="*"
xmlns:zet="org.openzet.controls.*"
xmlns:aZetColumn="org.openzet.controls.advancedDataGridClasses.*"
xmlns:zetColumn="org.openzet.controls.dataGridClasses.*"
>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.ListCollectionView;
import mx.charts.series.ColumnSeries;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection([
{A:10, B:20, C:30},
{A:20, B:20, C:30},
{A:20, B:30, C:30},
{A:20, B:30, C:30},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:10, B:20, C:40},
{A:10, B:20, C:30}]);
]]>
</mx:Script>
<zet:AdvancedZetDataGrid id="dg" enableFilter="true" fontSize="24" verticalAlign="bottom" paddingTop="4"
paddingBottom="4" sortableColumns="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%"
dataProvider="{arr}">
<zet:columns>
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="A" />
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="B" />
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:AdvancedZetDataGrid>
<zet:ZetDataGrid id="dg2" enableFilter="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%" dataProvider="{arr}">
<zet:columns>
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="A" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="B" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:ZetDataGrid>
</mx:Application>
Application result:
AdvancedTreeDataGrid
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 AdvancedTreeDataGrid 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 AdvancedTreeDataGrid control. Depending on the value of [datagrid#AdvancedTreeDataGrid|AdvancedTreeDataGrid]]’s treeDirection property, This controls shows horizontal tree view, like that of OLAP DataGrid, or vertical tree view of data.
<zet:AdvancedTreeDataGrid
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:AdvancedTreeDataGrid>
You should always use DataGridTreeItemRenderer as itemRenderer when you use AdvancedTreeDataGrid 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:AdvancedTreeDataGrid
id="dg" treeDirection="vertical" treeFields="{['planet','kind']}"
width="700" />
And for a horizontal tree view, you simply assign it with “horizontal” value.
<zet:AdvancedTreeDataGrid
id="dg" treeDirection="horizontal" treeFields="{['planet','kind']}"
width="700" />
You could use GroupingCollection instance for AdvancedTreeDataGrid’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:AdvancedTreeDataGrid
id="dg" treeDirection="horizontal" treeFields="{['planet','kind']}"
width="700" />
you can simply use an ArrayCollection instance for dataProvider. In this case, 이 경우, AdvancedTreeDataGrid 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}
]);
AdvancedTreeDataGrid 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 AdvancedTreeDataGrid 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 :
AdvancedSelctionDataGrid
Introduction
Custom class that expands on the functionality of AdvancedTreeDataGrid class and implements ICellSelectable interface by providing enableDragSelection property. The control allows users to drag-select DataGrid’s cells. Also this class provides a context menu which pops up a TitleWindow to show a Chart data of the drag-selected cells. To specify a specific series of a chart type, you need to assign seriesType property’s value, whose default value is ColumnSeries. Also AdvancedSelctionDataGrid has dragSelectionData property, which is defined by ICellSelectable interface. The value of this property equals the data value of drag-selected cells. dragSelectionData property’s value is most commonly used when users want to bind drag-selected region’s data with other controls, such as a CartesianChart.
Additionally, though not always a required property, AdvancedSelctionDataGrid class provides xField property, which is used to specify chart series’ xField. If not assigned, popup chart series’ xField values could be odd values, such as 0, 1, 2 etc. Default value of this property is null.
Property
enableDragSelection Specifies whether users can drag-select cells of this control. Default value is true.
seriesType Specifies the series type to show when users select showChart context menu item. Default value of this property is ColumnSeries and possible values are ColumnSeries, LineSeries, BarSeries, AreaSeries.
Usage
For usage, here is a simple example for AdvancedSelctionDataGrid class. This class internally takes care of a lot of work, so as a developer, you don’t need to worry about assigning various properties or handling events. In the following example, this control would show BarSeries chart when user selects context menu item to show popup chart.
Default value of AdvancedSelctionDataGrid’s enableDragSelection property is true.
<zet:AdvancedSelctionDataGrid seriesType="BarSeries" id="dg" width="100%" height="100%">
<zet:columns>
<mx:DataGridColumn dataField="A" textAlign="right" />
<mx:DataGridColumn dataField="B" textAlign="right" />
<mx:DataGridColumn dataField="C" textAlign="right" />
<mx:DataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:AdvancedSelctionDataGrid>
Application Example
The following is the entire application source code for this control.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:zet="org.openzet.controls.*" layout="horizontal" creationComplete="initApp();">
<mx:Script>
<![CDATA[
import mx.charts.series.LineSeries;
import mx.events.AdvancedDataGridEvent;
import mx.events.DataGridEvent;
import mx.charts.series.ColumnSeries;
import mx.charts.chartClasses.Series;
import mx.core.UIComponent;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import flash.utils.*;
import mx.charts.series.ColumnSeries;
import org.openzet.controls.dataGridClasses.ICellSelectable;
private function initApp():void {
var arr:ArrayCollection = new ArrayCollection();
var len:Number = 30 + Math.round(Math.random()*50);
for (var i:int=0; i<len;i++) {
arr.addItem({});
arr[i].A= Math.random()*1000;
arr[i].B= Math.random()*1000;
arr[i].C= Math.random()*1000;
arr[i].D= Math.random()*1000;
}
dg.dataProvider = arr;
dg2.dataProvider = arr;
}
private function dragEnterHandler(event:DragEvent):void {
DragManager.acceptDragDrop(event.currentTarget as UIComponent);
}
private function dropHandler(event:DragEvent):void {
var arr:ArrayCollection = ICellSelectable(event.dragInitiator).dragSelectionData as ArrayCollection;
var fields:Array = cloneFields(arr);
var series:Array=[];
for (var i:int=0; i<fields.length;i++) {
var ser:ColumnSeries= new ColumnSeries();
ser.yField=fields[i];
ser.displayName = fields[i];
series.push(ser);
}
chart.dataProvider=arr;
chart.series=series;
}
private function cloneFields(value:ArrayCollection):Array {
var item:Object;
var fields:Array;
if (value && value.length >0) {
item = value[0];
fields = [];
for (var prop:String in item) {
fields.push(prop);
}
}
return fields;
}
]]>
</mx:Script>
<mx:VBox width="100%" height="80%">
<zet:AdvancedSelectionDataGrid rowHeight="30" enableDragSelection="true" seriesType="LineSeries" id="dg" width="100%" height="100%">
<zet:columns>
<mx:AdvancedDataGridColumn dataField="A" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="B" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="C" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:AdvancedSelectionDataGrid>
<zet:SelectionDataGrid seriesType="BarSeries" id="dg2" width="100%" height="100%">
<zet:columns>
<mx:DataGridColumn dataField="A" textAlign="right" />
<mx:DataGridColumn dataField="B" textAlign="right" />
<mx:DataGridColumn dataField="C" textAlign="right" />
<mx:DataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:SelectionDataGrid>
</mx:VBox>
<mx:ColumnChart id="chart" dragEnter="dragEnterHandler(event);" dragDrop="dropHandler(event);" width="100%" height="100%">
</mx:ColumnChart>
</mx:Application>
Application result:
AdvancedZetDataGrid
Introduction
Custom class that expands on the functionality of AdvancedSelctionDataGrid and implements IZetDataGrid interface. This class provides enableFilter property, which lets users filter data bound with DataGrid control easily as you do with Excel 2007. Also this class allows rowspan, meaning cells of the same column with same data values could be merged.
This is a descendent class of both AdvancedSelctionDataGrid and 클래스와 AdvancedTreeDataGrid, so provides all the functionalities, such as data tree view and cell drag selection, chart popup view, implemented by its ancestors. Yet as of writing this document, there’s a known bug about enableDragSelection property, where merged cells and this property come into conflict.
This class allows users to filter data as you would with Excel 2007 by providing enableFilter property. If set to true, AdvancedZetDataGrid class internally sets all columns’ headerRenderer as FilterItemRenderer to provide this feature.
Note that to merge data vertically, you must use AdvancedZetDataGridColumn as a DataGridColumn instance. AdvancedZetDataGridColumn implements enableMerge setter/getter method defined by IMergeable interface.
Property
enableFilter Specifies whether to allow Excel 207 type of data filtering to this control. Default value is false.
Usage
Basic usage for AdvancedZetDataGridColumn is not that different from ordinary DataGrid controls, except that you should always use AdvancedZetDataGridColumn as a DataGridColumn. Also you can set the value of enableFilter property by mxml and actionscript. This property’s default value is false.
The following is a simple example that enables data merge and data filtering of the AdvancedZetDataGrid control.
<zet:AdvancedZetDataGrid id="dg" enableFilter="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%" dataProvider="{arr}">
<zet:columns>
<zetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="A" />
<zetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="B" />
<zetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:AdvancedZetDataGrid>
AdvancedZetDataGridColumn column also provides checked property. If set to true, the column’s headerRenderer and itemRenderer will be set as DataGridHeaderCheckBox and DataGridCheckBoxRenderer respectively. Setting these renderers dynamically would be done internally by AdvancedZetDataGrid control.
The following is an example code for this.
<controls:AdvancedZetDataGrid id="dg" dataProvider="{arr}" draggableColumns="true">
<controls:columns>
<dataGridClasses:AdvancedZetDataGridColumn dataField="A" />
<dataGridClasses:AdvancedZetDataGridColumn dataField="B" />
<dataGridClasses:AdvancedZetDataGridColumn dataField="selected" checked="true" />
</controls:columns>
</controls:AdvancedZetDataGrid>
In this example, values for selected field should always be Boolean type (true/false).
Application Example
The following is an entire application code for AdvancedZetDataGrid control.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:local="*"
xmlns:zet="org.openzet.controls.*"
xmlns:aZetColumn="org.openzet.controls.advancedDataGridClasses.*"
xmlns:zetColumn="org.openzet.controls.dataGridClasses.*"
>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.ListCollectionView;
import mx.charts.series.ColumnSeries;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection([
{A:10, B:20, C:30},
{A:20, B:20, C:30},
{A:20, B:30, C:30},
{A:20, B:30, C:30},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:10, B:20, C:40},
{A:10, B:20, C:30}]);
]]>
</mx:Script>
<zet:AdvancedZetDataGrid id="dg" enableFilter="true" fontSize="24" verticalAlign="bottom" paddingTop="4"
paddingBottom="4" sortableColumns="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%"
dataProvider="{arr}">
<zet:columns>
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="A" />
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="B" />
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:AdvancedZetDataGrid>
<zet:ZetDataGrid id="dg2" enableFilter="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%" dataProvider="{arr}">
<zet:columns>
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="A" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="B" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:ZetDataGrid>
</mx:Application>
Application result:
