Flex update dataprovider after datagrid edited

Question

I have a datagrid in flex with an itemrenderer and a dataprovider.

The problem is when I edit a datagrid, the provider don't get updated with the edited value.

Here is my datagrid:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderColor="#FFFFFF" cornerRadius="0">
        <mx:Script>
            <![CDATA[
                import mx.core.Application;
                [Bindable]
                private var provider:ArrayCollection = new ArrayCollection([
                {data:'1'},
                {data:'2"}]);
            ]]>
        </mx:Script>

<!-- Here is the data grid , the provider is groupeCollection, ihave set editable to true-->
            <mx:DataGrid id="myGrid" width="100%" height="80%" 
                dataProvider="{provider}" x="0" editable="true" >
                <mx:columns>
                    <mx:DataGridColumn dataField="data" >
                        <mx:itemRenderer>
                            <mx:Component>
                                <mx:NumericStepper minimum="1" maximum="10000" />
                            </mx:Component>
                        </mx:itemRenderer>
                    </mx:DataGridColumn>
                </mx:columns> 
            </mx:DataGrid>
    </mx:Canvas>

Now after editing the cell ( dataFiel="data" ) and printing the dataprovider, nothing changes in it.

Answer 1

Have not used Flex 3 since long but can you once check that whether ItemRenderer supports boolean property rendererIsEditor? If yes then set it to true then your renderer will also work as editor.

EDIT: I tried your code now and there seems to be some compiler error with delcaration of items in ArrayCollection. You seem to mix " and ' for items. I corrected it and now verified it in the below example which works. You can click the button to check before and after scenarios. I am pasting the complete code for your convenience just paste and run:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                for(var i:int = 0; i<provider.length; i++) {
                    Alert.show(provider.getItemAt(i).data); 
                }
            }
        ]]>
    </mx:Script>
    <mx:VBox width="100%" height="100%">
        <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderColor="#FFFFFF" cornerRadius="0">
            <mx:Script>
                <![CDATA[
                    import mx.collections.ArrayCollection;
                    import mx.core.Application;
                    [Bindable]
                    private var provider:ArrayCollection = new ArrayCollection([
                        {data:'1'},
                        {data:'2'}]);

                ]]>
            </mx:Script>

            <!-- Here is the data grid , the provider is groupeCollection, ihave set editable to true-->
            <mx:DataGrid id="myGrid" width="100%" height="80%" 
                         dataProvider="{provider}" x="0" editable="true" >
                <mx:columns>
                    <mx:DataGridColumn dataField="data" >
                        <mx:itemRenderer>
                            <mx:Component>
                                <mx:NumericStepper minimum="1" maximum="10000" />
                            </mx:Component>
                        </mx:itemRenderer>
                    </mx:DataGridColumn>
                </mx:columns> 
            </mx:DataGrid>
        </mx:Canvas>
        <mx:Button label="Check DP" click="button1_clickHandler(event)"/>
    </mx:VBox>
</mx:Application>