FB4 DataGrid - ArrayList changes not persistent

Question

I made a small test app to show the problem:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            xmlns:mx="library://ns.adobe.com/flex/mx"
                            creationComplete="creationCompleteHandler( event )" >
     <fx:Script>
          <![CDATA[
               import mx.collections.ArrayList;
               import mx.events.CollectionEvent;
               import mx.events.FlexEvent;
               //    >>>>>  Variables  <<<<<
               [Bindable]
               private var _mainData:ArrayList;
               //    >>>>>  Event Handlers  <<<<<
               protected function creationCompleteHandler( event:FlexEvent ):void
                    _mainData = new ArrayList();
                    _mainData.addItem( new TestValueObject( false ) );
                    _mainData.addItem( new TestValueObject( true ) );
                    _mainData.addEventListener( CollectionEvent.COLLECTION_CHANGE, dataChange );
               private function dataChange( event:CollectionEvent ):void
                    if( event.items[ 0 ].oldValue != event.items[ 0 ].newValue ) {
                         // ToDo: update value on server
                         var justForBreakpoint:uint = 1;
          ]]>
     </fx:Script>
     <mx:DataGrid dataProvider="{ _mainData }"
                     editable="true"
                     textAlign="center"
                     horizontalCenter="0" >
          <mx:columns>
               <mx:DataGridColumn dataField="active"
                                      headerText="Active"
                                      width="50"
                                      draggable="false"
                                      editable="true"
                                      itemRenderer="CheckBoxRenderer"
                                      rendererIsEditor="true" />
               <mx:DataGridColumn dataField="active"
                                      headerText="value"
                                      width="50"
                                      draggable="false"
                                      editable="false" />
          </mx:columns>
     </mx:DataGrid>
</s:WindowedApplication>
The Value Object:
package
     [Bindable]
     public final class TestValueObject
          //    >>>>>  Variables  <<<<<
          public var active:Boolean;
          //    >>>>>  Constructor  <<<<<         
          public function TestValueObject( itemActive:Boolean )
               active = itemActive;
The CheckBox ItemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                xmlns:mx="library://ns.adobe.com/flex/mx"
                                focusEnabled="true">
     <s:CheckBox id="cb"
                    selected="{ data.active }"
                    change="data.active = cb.selected"
                    horizontalCenter="0"/>
</s:MXDataGridItemRenderer>
The Boolean value in the value object changes permanently only from true to false but not vice versa.
The value of true only stays as long as its DataGrid row is selected. When highlighting the other row, it flips back to false.
How do I get this item renderer to function properly?
Thanks,
David

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          focusEnabled="true" creationComplete="mxdatagriditemrenderer1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            protected function mxdatagriditemrenderer1_creationCompleteHandler(event:FlexEvent):void
                // TODO Auto-generated method stub
                cb.selected=data.active;
        ]]>
    </fx:Script> 
     <s:CheckBox id="cb"
                click="data.active=cb.selected"
                horizontalCenter="0"/>
</s:MXDataGridItemRenderer>
With these changes in CheckBoxRenderer, I was able to get the functionality you had described. I used this logic. Whenever , the checkbox is clicked, selected is toggled. and then active can be assigned accordingly. Also, since The value object is bindable,  selected ={data.active}  would change the value of selected which is not something you might find useful. In my opinion the changed value of selected(on click) should be used rather than trying to change it's value.
Hope this helps
Nishad