FlexOuti am an itemrendrer in the making!

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. i still need to add other important functionalities. close headerrenderer for each column, delete entire row functionality , user defined default state … etc

check out the code:

will be posting the demo app shortly

(make a new dynamicGridColum.mxml component and add in an application tag)

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:HDividedBox xmlns:mx=”http://www.adobe.com/2006/mxml” height=”100%” width=”100%”

xmlns:containers=”framework.view.components.containers.*”

dividerRelease=”handleDivderRelease()”>

<mxcript>

<![CDATA[

import mx.controls.CheckBox;

import mx.controls.ComboBox;

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 init():void{

// do something!!

}

private function hideShowColumns():void  {

var actualColumns:Array = ResultGrid.columns;

var actualSelectedColumns:Array =  lstColumns.selectedItems;

var dataGridColumnataGridColumn;

var sDataFieldtring;

var sDataFieldCurtring;

var columnVisibleoolean

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;

}

]]>

</mxcript>

<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″ />

<mxpacer height=”5″ />

<mxutton label=”Select All”  width=”100%” click=”selectAll()”/>

<mxutton label=”Default”  width=”100%” click=”setDefault()”/>

<mxutton label=”Clear All” width=”100%” click=”clearAll()”/>

</mx:VBox>

<mx:VBox height=”100%” width=”100%”>

<mxataGrid  height=”100%” id=”ResultGrid” selectedIndex=”0″ enabled=”true” selectable=”true” creationComplete=”init()”>

<mx:columns>

<mxataGridColumn headerText=”col1″ dataField=”c1″ visible=”true” />

<mxataGridColumn headerText=”col2″ dataField=”c2″ visible=”true” />

<mxataGridColumn headerText=”col3″ dataField=”c3″ visible=”true” />

<mxataGridColumn headerText=”col4″ dataField=”c4″ visible=”true” />

<mxataGridColumn headerText=”col5″ dataField=”c5″ visible=”false” />

<mxataGridColumn headerText=”col6″ dataField=”c6″ visible=”false” />

</mx:columns>

</mxataGrid>

</mx:VBox>

</mx:HDividedBox>

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tags: datagrid, flex

This entry was posted on Friday, July 10th, 2009 at 7:46 am and is filed under flex. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.