Flex Examples
The following example shows how you can use a NumericStepper as an item editor for a Flex DataGrid control by setting the itemEditor and editorDataField properties on the DataGridColumn object.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="8" />
<mx:Object label="Student B" score="4" />
<mx:Object label="Student C" score="7" />
<mx:Object label="Student D" score="8" />
<mx:Object label="Student E" score="2" />
<mx:Object label="Student F" score="6" />
<mx:Object label="Student G" score="7" />
<mx:Object label="Student H" score="7" />
<mx:Object label="Student I" score="9" />
<mx:Object label="Student J" score="8" />
<mx:Object label="Student K" score="4" />
<mx:Object label="Student L" score="7" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
editable="true"
rowCount="8">
<mx:columns>
<mx:DataGridColumn dataField="label"
editable="false" />
<mx:DataGridColumn dataField="score"
editable="true"
itemEditor="mx.controls.NumericStepper"
editorDataField="value" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
UPDATE: But what if you want to change the properties (such as minimum and maximum) or styles on the NumericStepper item editor? One method is to create a custom component which extends the NumericStepper and override the properties and default styles.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="81" />
<mx:Object label="Student B" score="42" />
<mx:Object label="Student C" score="75" />
<mx:Object label="Student D" score="84" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="62" />
<mx:Object label="Student G" score="71" />
<mx:Object label="Student H" score="77" />
<mx:Object label="Student I" score="91" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="44" />
<mx:Object label="Student L" score="72" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
editable="true"
rowCount="8">
<mx:columns>
<mx:DataGridColumn dataField="label"
editable="false" />
<mx:DataGridColumn dataField="score"
editable="true"
itemEditor="comps.MyNumericStepper"
editorDataField="value" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ -->
<mx:NumericStepper xmlns:mx="http://www.adobe.com/2006/mxml"
minimum="0"
maximum="100"
cornerRadius="0">
</mx:NumericStepper>
View source is enabled in the following example.
You could also define the item renderer using a ClassFactory, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.NumericStepper;
[Bindable]
private var numericStepperFac:ClassFactory;
private function init():void {
numericStepperFac = new ClassFactory(NumericStepper);
numericStepperFac.properties = {minimum:0, maximum:100};
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="81" />
<mx:Object label="Student B" score="42" />
<mx:Object label="Student C" score="75" />
<mx:Object label="Student D" score="84" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="62" />
<mx:Object label="Student G" score="71" />
<mx:Object label="Student H" score="77" />
<mx:Object label="Student I" score="91" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="44" />
<mx:Object label="Student L" score="72" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
editable="true"
rowCount="8">
<mx:columns>
<mx:DataGridColumn dataField="label"
editable="false" />
<mx:DataGridColumn dataField="score"
editable="true"
itemEditor="{numericStepperFac}"
editorDataField="value" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
Or, you could define an inline item editor using the following code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.NumericStepper;
[Bindable]
private var numericStepperFac:ClassFactory;
private function init():void {
numericStepperFac = new ClassFactory(NumericStepper);
numericStepperFac.properties = {minimum:0, maximum:100};
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="81" />
<mx:Object label="Student B" score="42" />
<mx:Object label="Student C" score="75" />
<mx:Object label="Student D" score="84" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="62" />
<mx:Object label="Student G" score="71" />
<mx:Object label="Student H" score="77" />
<mx:Object label="Student I" score="91" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="44" />
<mx:Object label="Student L" score="72" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
editable="true"
rowCount="8">
<mx:columns>
<mx:DataGridColumn dataField="label"
editable="false" />
<mx:DataGridColumn dataField="score"
editable="true"
editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper minimum="0" maximum="100" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
This source is only for flex3.0?
I compiled this source in flex2.0. But It has a bug.
basker,
I only tested this in Flex 3.
Peter
Peter,
GREAT post on the datagrid/steppers.
Is it possible to have different (and bound) min/max values for each stepper in the datagrid ???
-df
Hi,
Is it possible to take decimal values also for score in this example.
siva,
Yes, just set the
stepSizeproperty on the NumericStepper control.Peter
You sir, are the _man_. I’ve been beating my head on this all day, trying to use a ComboBox as an itemRenderer for boolean data stored in an XML file.
All I did was edit the dataprovider for the comboBox a little (to reflect boolean data) and add the requisite variables and imports to my main MXML file.
It works like a dream – no strange ‘initializer’ or ‘text property’ errors.
Nicely executed.
Thanks,
Les
doh! posted to the wrong page – I used this example as well, but the code I was referring to is next door at Flex Monkey Patch:
http://blog.flexmp.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/
The panel that displays code is a but mucked up, the code works beautifully.