1 Reply Latest reply on Nov 12, 2012 1:42 AM by zltao2007@163.com

    Flex spark dataGrid gridColumn itemrenderer binding bug

    MalcomChen

      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>