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