Friday, January 9, 2009

Complex editors on a datagrid

There are times when you want to have a data grid whose cells can have other complex controls like combobox , numeric stepper.To achieve this multi-entity ,entry form t, we use the inline itemEditor field of the datagrid component.

The key here is the itemEditor property of the datagrid column to which you can specify a class ,aka editor or renderer(either flex built in or custom). Now how will flex know which property of the editor or renderer is the user input? . The editorDataField” property specifies which property of the renderer is to be taken as the user input. Example: value property of a numeric stepper, when numeric stepper is the itemEditor.

One very important thing to notice here is that the dataprovider is also synched with the values committed on the item renderers.

Here is an example that shows how to do this.



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>

<![CDATA[

private function showArrayCollection():void {

resultText.htmlText="";

for (var i:Number=0;i<stateArray.length;i++) {

resultText.htmlText+="Name:"+stateArray.getItemAt(i).name;

resultText.htmlText+=" Age:"+stateArray.getItemAt(i).age;

resultText.htmlText+="<br>";

}

}

]]>

</mx:Script>

<!--

The data provider for the datagrid.The age property will be synched with the user's input,

when he selects it from the age property.

!-->

<mx:ArrayCollection id="stateArray">

<mx:Object name="Amitha" age="25"/>

<mx:Object name="Priyanka" age="27"/>

<mx:Object name="Krups" age="45"/>

</mx:ArrayCollection>

<mx:DataGrid x="531" y="82" editable="true" dataProvider="{stateArray}">

<mx:columns>

<mx:DataGridColumn headerText="Name" dataField="name" editable="false"/>

<mx:DataGridColumn headerText="Age" dataField="age" editable="true"

itemEditor="mx.controls.NumericStepper" editorDataField="value"/>

</mx:columns>

</mx:DataGrid>

<mx:Button label="show" click="showArrayCollection()">

</mx:Button>

<mx:TextArea width="300" height="300" id="resultText">

</mx:TextArea>

</mx:Application>

Hope it helps!!

No comments: