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.

View MXML

<?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.

View MXML

<?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>

comps/MyNumericStepper.mxml

<?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>
 
Tagged with:
 
About The Author

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.

7 Responses to Using a NumericStepper control as an item editor for a DataGrid control in Flex

  1. basker says:

    This source is only for flex3.0?
    I compiled this source in flex2.0. But It has a bug.

  2. peterd says:

    basker,

    I only tested this in Flex 3.

    Peter

  3. davidf says:

    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

  4. siva says:

    Hi,

    Is it possible to take decimal values also for score in this example.

  5. peterd says:

    siva,

    Yes, just set the stepSize property on the NumericStepper control.

    Peter

  6. LesBerg says:

    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

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree