Flex spark dataGrid gridColumn itemrenderer binding bug

Question

I hava a TextInput within mx DataGrid gridColumn itemrenderer and binding its text to {data.f1} ,
when I set DataGrid dataProvider column (0,0) to "value1" by actionsript code,
it will update "value1" to TextInput field.
But if I change to spark DataGrid, TextInput Text won't be changed.
Please see below two samples, when user click "set var" button, it set dataProvider column (0,0) to "value1",
sample1 is in mx comopent, it works fine and will update "value1" to TextInput Text.
sample2 is in spark component, it did not work.
anyone can help for spark component ?
many thanks.
*** sample1 (mx componet): ***
<?xml version="1.0" encoding="utf-8"?>
<mx: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"
minWidth="955" minHeight="600"
  layout="absolute">
<mx:Button x="235" y="52" label="set var" click="setVar()"/>
<mx:DataGrid id="grid_1" dataProvider="{ia_row}" x="25" y="52">
  <mx:columns>
   <mx:DataGridColumn dataField="f1" headerText="Column 1">
    <mx:itemRenderer>
     <fx:Component>
      <mx:TextInput text="{data.f1}" width="95%"/>
        </fx:Component>
    </mx:itemRenderer>    
   </mx:DataGridColumn>
   <mx:DataGridColumn dataField="f2" headerText="Column 2"></mx:DataGridColumn>
  </mx:columns>
</mx:DataGrid>
<fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   [Bindable]
   private var ia_row:ArrayCollection = new ArrayCollection([
    {f1:"a1", f2:"b1"},
    {f1:"a2", f2:"b2"}
   private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
  ]]>
</fx:Script>
</mx:Application>
*** sample2 (spark componet): ***
<?xml version="1.0" encoding="utf-8"?>
<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"
minWidth="955" minHeight="600"     
>
<s:Button x="267" y="94" label="set var" click="setVar()"/>
<s:DataGrid id="grid_1" x="55" y="94" width="204" height="139" dataProvider="{ia_row}">
  <s:columns>
   <s:ArrayList>
    <s:GridColumn dataField="f1" headerText="Column 1" width="120">
     <s:itemRenderer>
      <fx:Component>
       <s:GridItemRenderer>       
        <s:TextInput text="{data.f1}" width="95%"/>
         </s:GridItemRenderer>
      </fx:Component>
     </s:itemRenderer>    
    </s:GridColumn>
    <s:GridColumn dataField="f2" headerText="Column 2"></s:GridColumn>
   </s:ArrayList>
  </s:columns>
</s:DataGrid>
<fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   [Bindable]
   private var ia_row:ArrayCollection = new ArrayCollection([
    {f1:"a1", f2:"b1"},
    {f1:"a2", f2:"b2"}
   private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
  ]]>
</fx:Script>
</s:Application>

Answer 1

sir, I think it does not send CHANGE event to dataGrid, so my suggestion is following:
private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    Alert.show(t_row.f1);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
    ia_row.refresh();//it is used to dispatch Event if dataprovider was changed.