ZetDataGrid
From Openzet
Contents |
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:
