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>

Solution

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] :-)