<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGItemEditor.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="450">
    <fx:Script>
        <![CDATA[                
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"Order #2314", quant:3, Sent:true},
                {label1:"Order #2315", quant:3, Sent:false}     
            ]);       
        ]]>
    </fx:Script>
    
    <s:DataGrid id="myDG" width="100%" 
        dataProvider="{myDP}" 
        variableRowHeight="true" 
        editable="true" >
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="label1" headerText="Order #"/>
                <s:GridColumn dataField="quant" 
                    headerText="Qty"
                    itemEditor="myComponents.DGNumStepperEditor"/>
            </s:ArrayList> 
        </s:columns >
    </s:DataGrid> 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\myComponents\DGNumStepperEditor.mxml -->
<s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            
            // Override the setter to initialize the NumericStepper control
            // with the cell data.
            override public function set value(newValue:Object):void {
                ns.value = newValue as Number;
            }

            // Override the getter to return the current value of 
            // the NumericStepper control.
            // The save() method updates the data provider element for the
            // row of the grid with this value. 
            override public function get value():Object {
                return ns.value;
            }
            
            // Override setFocus() to shift focus to the NumericStepper.
            override public function setFocus():void {
                ns.setFocus();
            }
        ]]>
    </fx:Script>

    <s:NumericStepper id="ns" width="100%"
        fontWeight="bold"/>
</s:GridItemEditor>