Flex update dataprovider after datagrid edited - actionscript-3

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>

Answer 2

You can use itemEditor instead of itemRenderer, itemRenderer only show your values if you want edit the data at runtime we have set value manually by using
data.propertyname = value;
Try this code:
<?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.collections.ArrayCollection;
import mx.core.Application;
[Bindable]
private var provider:ArrayCollection = new ArrayCollection([
{data:'1'},
{data:'2'}]);
]]>
</mx:Script>
<mx:VBox>
<!-- 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" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid 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:VBox>
</mx:Canvas>