Weird Behaviour-CheckBoxes as ItemRenderer within Flex DataGrid - FLEX 3

Question

I'm having this weird behaviour in a datagridColumn which I've customized to have its cells rendered as checkBoxes rather than the dafault itemRenderer (i.e. strings). The relevant code is as follows:

<mx:DataGridColumn sortable="false" textAlign="center" headerText="" width="20" dataField="colCB">
  <mx:itemRenderer>
    <mx:Component>
      <mx:CheckBox selected="true">
        <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function change():void{
                //TODO
            }
        ]]>
        </mx:Script>
      </mx:CheckBox>
    </mx:Component>
  </mx:itemRenderer>
</mx:DataGridColumn>

Well, what happens is that whenever I check a checkbox, other checkboxes (in other rows) get randomly checked or unchecked, and if I scroll down or up they once again randomly get selected or unselected.

Can anybody help me with this one?

Thanks is advance

PS by the way, I've suppressed the starting "<" in the tags because it was messing with the textEditor, but in my code they're there

Answer 1

My guess is that the issue isn't that the checkboxes are getting randomly checked and unchecked. The DataGrid recycles its itemRenderers for better memory performance. What's likely happening is that you're checking a CheckBox on an itemRenderer and start scrolling, that itemRenderer with the checked box is getting reused to display other records with the selected="true" value still set.

What I would do is create an itemRenderer component and override the set data method to set the checkbox's selected value to what it should be.

Some sample code off the top of my head for the itemRenderer (you'll want to adjust it for your use):

<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off">
  <fx:Script>
    <![CDATA[

    override public function set data(value:Object):void
    {
      super.data = value;

      if (value["myCheckBoxData"] != null)
      {
        myCheckBox.selected = Boolean(value["myCheckBoxData"]);
      }

      validateDisplayList();
   }
  ]]>
  </fx:Script>

  <mx:CheckBox id="myCheckBox" />
</mx:HBox>