FlexOut » datagrid

Dynamically add remove columns in a datagrid

Vikram singh — Fri, 10 Jul 2009 14:46:33 +0000

I had a hard time figuring out how to add remove columns dynamically from a datagrid and after lots of code iterations I have reached a workable scenario. Right now the code is fairly easy to understand and can be enhanced to a gr8 deal,

I still need to add other important functionalities.

Close headerrenderer for each column
delete entire row functionality
user defined default state
and much more…

Dint get the time to complete this post but someday i will surely post a complete working APP
by that time check out the code USE AND MODIFY AS PLEASED!!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

< ?xml version="1.0" encoding="utf-8"?>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%" >

<mx:hdividedbox height="100%" width="100%" dividerRelease="handleDivderRelease()">
<mx:script>
< ![CDATA[
import mx.controls.CheckBox;
import mx.controls.ComboBox;
import mx.controls.dataGridClasses.DataGridColumn;

public var counter : int = 0;
public var conDataProvider : Array =[{label : "col1", data : "c1"},
{label : "col2", data : "c2"},
{label : "col3", data : "c3"},
{label : "col4", data : "c4"},
{label : "col5", data : "c5"},
{label : "col6", data : "c6"}];

private function hideShowColumns():void{
var actualColumns:Array = ResultGrid.columns;
var actualSelectedColumns:Array = lstColumns.selectedItems;
var dataGridColumn:DataGridColumn;
var sDataField:String;
var sDataFieldCur:String;
var columnVisible:Boolean
for (var i:int=0;i<actualColumns.length;i++) {
columnVisible = false
dataGridColumn = actualColumns[i];
sDataField = dataGridColumn.dataField;
for (var j : int = 0; j < actualSelectedColumns.length; j++) {
if(actualSelectedColumns[j] == null) continue;
sDataFieldCur = actualSelectedColumns[j].data;
if (sDataFieldCur == sDataField) {
columnVisible = true;
break;
}
}
if (columnVisible) {
dataGridColumn.visible = true;
}else {
dataGridColumn.visible = false;
}
}
}

private function selectAll():void{
lstColumns.selectedIndices=[0,1,2,3,4,5];
hideShowColumns();
}

private function clearAll():void{
lstColumns.selectedIndices=[];
hideShowColumns();
}

private function setDefault():void{
lstColumns.selectedIndices=[0,1,2,3];
hideShowColumns();
}

private function handleDivderRelease():void{
if(counter == 0){
controlBox.width =0
}else if(counter == 1){
controlBox.width =120
}
counter = (counter +1)%2;
}

]]>
mx:script>

<mx:vbox id="controlBox" height="100%" width="120" maxWidth="120" verticalGap="0" horizontalScrollPolicy="off">
<mx:label text="Selected columns" fontWeight="bold" />
<mx:list height="100%" width="120" id="lstColumns" dataProvider="{conDataProvider}"
labelField="label" borderColor="#000000"
allowMultipleSelection="true" click="hideShowColumns()"
selectedIndices="[0,1,2,3]"/>
<mx:textarea wordWrap="true" selectable="false" editable="false" borderStyle="none"
text="For multiple selection use ctrl/shift keys" width="120" />
<mx:spacer height="5" />
<mx:button label="Select All" width="100%" click="selectAll()"/>
<mx:button label="Default" width="100%" click="setDefault()"/>
<mx:button label="Clear All" width="100%" click="clearAll()"/>
mx:vbox>
<mx:vbox height="100%" width="100%">
<mx:datagrid height="100%" id="ResultGrid" selectedIndex="0" enabled="true" selectable="true" creationComplete="init()">
<mx:columns>
<mx:datagridcolumn headerText="col1" dataField="c1" visible="true" />
<mx:datagridcolumn headerText="col2" dataField="c2" visible="true" />
<mx:datagridcolumn headerText="col3" dataField="c3" visible="true" />
<mx:datagridcolumn headerText="col4" dataField="c4" visible="true" />
<mx:datagridcolumn headerText="col5" dataField="c5" visible="false" />
<mx:datagridcolumn headerText="col6" dataField="c6" visible="false" />
mx:columns>
mx:datagrid>
mx:vbox>
mx:hdividedbox>
mx:application>

Filter datagrid using a hslider

Vikram singh — Thu, 22 Jan 2009 13:53:08 +0000

Here is an example of Data grid filtered using a H slider with 2 thumbs to select the range of date for which to filter the data grid. The combo box is used to select the specific column on which the filter has to be applied to. The check box is used to either enable or disable the filter functionality.

Screenshot:

For source please read the complete article

layout=”vertical”
height=”300″ width=”600″
backgroundColor=”white”
creationComplete=”init();”>

import mx.events.SliderEvent;

private function init():void {
if (checkBox.selected) {
arrColl.filterFunction = sliderFilterFunc;
arrColl.refresh();
}
}
private var comb : Array = [{label:"value1",data:0},
{label:"value2",data:1},
{label:"value3",data:2}];

private function checkBox_change(evt:Event):void {
if (checkBox.selected) {
arrColl.filterFunction = sliderFilterFunc;
} else {
arrColl.filterFunction = null;
}
arrColl.refresh();
}

private function slider_change(evt:SliderEvent):void {
arrColl.refresh();
}

private function sliderFilterFunc(item:Object):Boolean {
var bool:Boolean;
switch(vx.selectedItem.data){
case 0:
bool = checkData(item.value1);
break;
case 1:
bool = checkData(item.value2);
break;
case 2:
bool = checkData(item.value3);
break;
}
return bool;
}

private function checkData(num:Number):Boolean{
var minSlider:Number = slider.values[0];
var maxSlider:Number = slider.values[1];
if ((num >= minSlider)&&(num <= maxSlider))
return true;
else
return false;

}

]]>

minimum=”0″ maximum=”1000″
values=”[0,1000]” labels=”[0,500,1000]”
thumbCount=”2″ showTrackHighlight=”true”
snapInterval=”1″ tickInterval=”100″
liveDragging=”true” change=”slider_change(event);” />

Printing dataGrid in Flex

Vikram singh — Thu, 16 Oct 2008 01:54:20 +0000

There are very few resources on the web about printing in Flex. Adobe LiveDocs is an excellent on-line reference for Flex. I thought of sharing my experience and the way I successfully printed the dataGrid in Flex.

Example below: shows how to call a function to print a datagrid

public function printDataGrid() : void
{
var printJob : FlexPrintJob = new FlexPrintJob();
var thePrintView : FormPrintView = new FormPrintView();
Application.application.addChild(thePrintView);
if(printJob.start() != true)
return;

//Set the print view properties.
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;
thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider
thePrintView.printableDataGrid.columns = originalDataGrid.columns ;
thePrintView.printableDataGrid.setStyle(”fontSize”, 8);
thePrintView.printableDataGrid.setStyle(”wordWrap”, true);
printJob.addObject(thePrintView);

printJob.send();
Application.application.removeChild(thePrintView);
}

Example below: shows printview

Below are the simple steps to print the DataGrid in Flex

1. Create an instance of the FlexPrintJob called printJob (you can call anything you want to)

2. Create an instance of the PrintDataGrid in another MXML file FormPrintView.mxml and create an instance of that – thePrintView (if you create in the same MXML, which uses the function –> printDataGrid() then the application reservers some place for component. This looks a bit ugly as we do not want to see that extra space in our application). Always use PrintGrid class to print the dataGrid instead of the DataGrid, which originally displays content in the application, as it is tailored to print DataGrid in flex

3. Add the thePrintView object to the application container

“Application.application.addChild(thePrintView);”

4. Only one print job can be active at a time. So check to see if the printJob.start() is true. Start printing when it is true

5. Set the height, width properties of the thePrintView object to the pageWidth and pageHeightof the pringJob object

6. Assign the dataProvider of the DataGrid to be printed to the instance of the PrintDataGrid class, You also need to set the columns of the original dataGrid to the thePrintView object. You can also control the appearance of the printDataGrid object as follows

printDataGrid.setStyle(”fontSize”, 8);
printDataGrid.setStyle(”wordWrap”, true);

7. Use addObject method to add object to the printJob instance

8. Use printJob.send() to send the print job to a printer

Download source here

Flex dataGrid default column sort

Vikram singh — Wed, 15 Oct 2008 10:55:44 +0000

The below example gives you a hook to sort a particular column in a datagrid without user input. One can use the below function where ever a datagrid has to have a default sort order on its column(s). Note : This works with flex 2 datagrid and not with Advanced datagrid in Moxie.

The dataGridDefaultSort functions requires two input items. The dgName which as the variable suggest is the name of the DataGrid and the dgColumn, DataGrid Column, to be sorted by the numbers. column numbering begins with zero.

These input items are used with the DataGridEvent below and is dispatched (excuted). The DataGridEvent has a total of 9 values for successful operation. They are listed below in expanded detail.

1. type : String — The event type; indicates the action that caused the event. This is represented by the dgName input variable. The DataGridEvent.HEADER_RELEASE constant defines the value of the type property of the event object for a headerRelease event, which indicates that the user pressed and released the mouse on a column header
2. bubbles : Boolean (default = false) — Specifies whether the event can bubble up the display list hierarchy.
3. cancelable : Boolean (default = false) — Specifies whether the behavior associated with the event can be prevented.
4. columnIndex : int (default = -1) — The zero-based index of the column where the event occurred. This is represented by the dgColumn input variable.
5. dataField : String (default = null) — The name of the field or property in the data associated with the column.
6. rowIndex : int (default = -1) — The zero-based index of the item in the in the data provider.
7. reason : String (default = null) — The reason for an itemEditEnd event.
8. itemRenderer : IListItemRenderer (default = null) — The item renderer that is being edited or the header renderer that was clicked.
9. localX : Number — Column x-position for replaying columnStretch events.

Call this function anywhere in the program and use as per above attributes.

1
2
3

private function dataGridDefaultSort (dgName:Object, dgColumn:int): void {
dgName.dispatchEvent(new DataGridEvent(DataGridEvent.HEADER_RELEASE, false,true,dgColumn,null,0,null,null,0));
}

Search dataGrid and Simple dataGrid Itemrenderer example

Vikram singh — Sun, 05 Oct 2008 02:13:56 +0000

The following example is a Simple searchable DataGrid, I have also included dataGrid item renderer to show how to define/use a dataGrid “itemRendrer”. Search and Highlight a row depending on the searched text in a dataGrid. Define a cursor to traverse dataGrid rows.

The Objective of this example :

How to create custom item rendrer using Updatedisplaylist and data property.
How to use the itemrendrer (detail).
How to use custom cursors in a dataGrid.
how to write a custom component extending a base component in this case dataGrid. (highlight a row in the dataGrid).

Download source:

search_datagrid.mxml (Main application)
UserLabelRendr3r.as (Item rendrer)
CustomRowColorDG.as (highlight selected row in a dataGrid)

Sample : search_datagrid

Inline Itemrenderer

Vikram singh — Mon, 08 Sep 2008 05:56:29 +0000

I stumbled upon an unknown property as I was trying to use an Inline Item Renderer on my DataGrid Columns. If you use the tag with your inline item renderer and try to have your component call an event in your main application you will get a nasty “Access to undefined method ……”. This is because your Inline Item Renderer is unaware of what exists in your main application. But you can use the outerDocument property to access event handlers in you main application.

Example:

outerDocument.remove()“/>

Copy functionality in DataGrid

Vikram singh — Mon, 18 Aug 2008 13:34:22 +0000

The following example shows the customize data grid by applying a copy and paste functionality.

The idea is very simple but i think its useful, the data copied in clipboard can directly paste in excel and it will pasted in proper columns rather than in a single column, I tested this on Excel 2007.

for the running examples click here

for the complete source here

package com.ib.custom
{
import flash.events.ContextMenuEvent;
import flash.events.Event;
import flash.system.System;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;

import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.EventPriority;
import mx.events.CloseEvent;
import mx.events.ListEvent;

public class IBDataGrid extends DataGrid
{
[Bindable] public var enableCopy : Boolean = true;
// for creating conext menu item for coping functionality
private var copyContextItem:ContextMenuItem;
// for storing the header text at only once.
private var headerString : String = ”;

private var dataToCopy:String = ”;
public function IBDataGrid()
{
super();
}

// I am creating a copy context item and its handler in creation complete of DATAGRID if and only if enableCopy is true.
override protected function createChildren():void{
super.createChildren();
var flag:Boolean = false
if(enableCopy){
contextMenu = new ContextMenu();
createContextMenu();
addEventListener(ListEvent.ITEM_CLICK,
itemClickHandler,
false, EventPriority.DEFAULT_HANDLER);
flag = true;
}
}

private function createContextMenu():void{
copyContextItem = new ContextMenuItem(”copy row/s”);
copyContextItem.enabled = false;
copyContextItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,copyDataHandler);
contextMenu.customItems.push(copyContextItem);
// comment the following line if you want default items in context menu.
contextMenu.hideBuiltInItems();
}

private function copyDataHandler(event:Event):void{
dataToCopy = ”;
if(selectedItems != null){
dataToCopy = getSelectedRowsData();
dataToCopy = ((headerString == ”) ? getHeaderData() : headerString)+”\n” + dataToCopy;
copyContextItem.enabled = true;
System.setClipboard(dataToCopy);
}
}

private function handleAlertClose(event:CloseEvent):void{
trace(”handling .. the event”);
if(event.detail == 1)
{

}

}
private function getHeaderData():String{
headerString = ”;
for(var j:int = 0; j< columnCount; j++){
if((columns[j] as DataGridColumn).visible)
headerString += (columns[j] as DataGridColumn).headerText +”\t”;
}
return headerString;
}

private function getSelectedRowsData():String{
var rowsData : String = ”;
for(var i:int =0;i for(var j:int = 0; j< columnCount; j++){
if((columns[j] as DataGridColumn).visible)
rowsData += selectedItems[i][(columns[j] as DataGridColumn).dataField] +”\t”;
}
rowsData+= “\n”;
}
return rowsData;
}

private function itemClickHandler(event:ListEvent):void
{
copyContextItem.enabled = true;
}
}
}

- imtiyaz