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

, . Checkbox.select , true false .

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

PS: dp [Bindable]: -)

Answer 2

, "true" "false" , CheckBox, . , itemEditors ( ), , .data .

Answer 3

Set the "editable" property for this particular datagrid column to false. This will solve the problem.