How to bind an itemRenderer to a datagrid

Question

I have a datagrid that uses an itemRenderer. The itemRenderer contains a checkbox. I want the selected checkbox in the datagrid to stay in the correct row when the datagrid is sorted, but when I sort a column the checkbox moves to the wrong row. How do I bind the checkBox to the datagrid? I tried playing around with the following 2 lines of code in the itemRenderer, but without success:
//super.data = value;
//dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
Thanks for looking.
Here is my main file:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]               
            private var initDG:ArrayCollection = new ArrayCollection([
                {Artist:'aaa', Album:'1', Price:3},
                {Artist:'ccc', Album:'2', Price:2},
                {Artist:'bbb', Album:'3', Price:1},
                {Artist:'ddd', Album:'2', Price:4}
        ]]>
    </mx:Script>
    <mx:DataGrid id="myGrid" dataProvider="{initDG}"       > 
        <mx:columns>
            <mx:DataGridColumn dataField="Artist"/>
            <mx:DataGridColumn dataField="Album"/>
            <mx:DataGridColumn dataField="Price"/>
            <mx:DataGridColumn itemRenderer="RendererDGImage"/>
        </mx:columns>      
    </mx:DataGrid> 
</mx:Application>
Here is my itemRenderer:RendererDGImage.mxml
<?xml version="1.0"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            private var myVal:Boolean=false;          
            public function checkSelected():void {     
                myVal= ! myVal
            override public function set data(value:Object):void {   
                   //super.data = value;
                    if (myVal){
                        trace("true")
                      myCheckBox.selected=true;
                    } else {
                        trace("false")
                        myCheckBox.selected=false;
                // Dispatch the dataChange event.
                //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
        ]]>
    </mx:Script>
      <mx:CheckBox id="myCheckBox" enabled="true"  click="checkSelected();"/>
</mx:HBox>

Answer 1

I would create an object let's say.. Album.. that has four properties.. and create instances of this object based on the length of the arrayCollection..
and..
[Bindable]
public var album:Album;
public function checkSelected():void {    
                album.Buy = myCheckBox.selected.
change this too..
<mx:CheckBox id="myCheckBox" enabled="album.Buy"  click="checkSelected();"/>
and finally..
override public function set data(value:Object):void {  
                   album = (value as Album);
hope this helps,
BaBo,