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>
{ 5 comments… read them below or add one }
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