AdvancedZetDataGrid

From Openzet

Contents 1 Introduction 2 Property 3 Usage 4 Application Example

Introduction

Custom class that expands on the functionality of AdvancedSelectionDataGrid 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 AdvancedSelectionDataGrid 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: