Flex CheckBox in Datagrid

Question

In the followin flex Code : 
Also viewable at : http://www.cse.epicenterlabs.com/checkBoxDg/checkBoxDg.html
1. Add a row in datagrid by clicking on "AddRow"
2. Click on "CheckDg" to see the values of all the checkboxes
     - it shows "checkBox57" or "checkBox64" or some similar string
3. Now, "select" the checkBox in the first row.
4. Click again on "CheckDg"
    -it show "true"

So, initially dp.getItemAt(i).date returns a CheckBox
and later it returns the "selected" value of the CheckBox?
Why this difference?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
     <mx:Canvas>
     <mx:DataGrid x="69" y="119" id="dgFee" editable="true" dataProvider="{dp}">
      <mx:columns>
      <mx:DataGridColumn headerText="Date" dataField="date" width="100" editable="true" 
      editorDataField="selected" rendererIsEditor="true">
      <mx:itemRenderer>
       <mx:Component>
        <mx:CheckBox selected="false">
                           </mx:CheckBox>
               </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
                 <mx:DataGridColumn dataField="amount" headerText="Amount" editable="true">
                   <mx:itemEditor>
                   <mx:Component>
                         <mx:TextInput restrict="0-9"/>
                   </mx:Component>
                   </mx:itemEditor>  
                 </mx:DataGridColumn>
      </mx:columns>
     </mx:DataGrid>
     <mx:CheckBox x="130" y="54" label="Checkbox" selected="true" click="Alert.show(abc.selected.toString())" id="abc"/>
<mx:Script>
    <![CDATA[
     import mx.controls.CheckBox;
     import mx.collections.ArrayCollection;
     import mx.controls.Alert;
     public var dp:ArrayCollection = new ArrayCollection();
     public function addRow():void
     {
       var tmp:Object = new Object();
       tmp['amount'] = 100;
       tmp['date'] = new CheckBox();
       dp.addItem(tmp);
     }
     public function delRow():void
     {
      if(dgFee.selectedIndex != -1)
      dp.removeItemAt(dgFee.selectedIndex);
     }

     public function loop1():void
     {
      for(var i:int=0;i<dp.length;i++)
      {
         Alert.show(dp.getItemAt(i).date);
      }
     }
    ]]>
</mx:Script>
       <mx:Button x="29" y="89" label="AddRow" click="addRow()"/>
       <mx:Button x="107" y="89" label="DelRow" click="delRow()"/>
       <mx:Button x="184" y="89" label="CheckDg" click="loop1()"/>

</mx:Canvas>    
</mx:Application>

Answer 1

When you click on the check box in the grid, it writes "true" or "false" into the date field, replacing the original CheckBox object that was there. I believe what itemEditors (you are using your render as an editor) do is they write the .data property from the respective components into the collection.

Answer 2

You are not supposed to assign objects to data variables but data. Checkbox.select property is set to your check box object first and then true or false after the preceding actions. Try this instead

public function addRow():void
{
  var tmp:Object = new Object();
  tmp['amount'] = 100;
  tmp['date'] = false; // not new CheckBox();
  dp.addItem(tmp);
}

PS: Also dp should be attributed with [Bindable] :-)