So… because the itemRenderers are re-used you can’t store instance data in them, like the state of a checkbox. Instead you need to store that information somewhere outside the renderer, typically in the data that’s being passed into the renderer. You can simply add a property to the data that will store whether the checkbox has been checked or not and then override the set data function in the itemRenderer. In the set data function you can look at the data, and manually check or uncheck that checkbox. The same article above expands on this concept a bit in the second part of the article.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt2.html

I have having problems with checkboxes in my itemrenderer being checked/unchecked when scrolling in my datagrid. Grateful if you could have a look.

My Flex application is as such:

<!–

–>

And my XML file is as such:

Bet I am missing something in the code, but dont know what. Pls help


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


I’m not sure what the difference is between calling validateNow this way versus calling it in the data change event listener, but this worked for me while the event listener method didn’t.

So much for using differing ItemRenderers in the same tree. I guess I’ll play with show/hide, states, or height=0 techniques.

public class BaseTreeItemRenderer extends TreeItemRenderer {

private var itemIcon:Image;
private var legendIcon:Image;

public function BaseTreeItemRenderer() {
super();

itemIcon = new Image();
itemIcon.width = 16;
itemIcon.height = 16;
itemIcon.scaleContent = true;
itemIcon.visible = false;

legendIcon = new Image();
legendIcon.width = 25;
legendIcon.height = 25;
legendIcon.scaleContent = true;
legendIcon.visible = false;

this.addEventListener(FlexEvent.DATA_CHANGE, dataChangeHandler);
}

private function dataChangeHandler(event:FlexEvent):void {
validateNow();
}

override protected function commitProperties( ): void {
super.commitProperties( );
if ((data != null) && (data is TreeNode)) {
var node:TreeNode = data as TreeNode;
getControl().selected = node.selected;
}
}

override protected function measure():void {
super.measure();
var w:Number = data ? (data as BaseNode).indent : 0;

if ( disclosureIcon )
w += disclosureIcon.width;

if ( icon )
w += icon.measuredWidth;

if ( label.width < 4 || label.height measuredHeight )
measuredHeight = icon.measuredHeight;
}
}

override protected function createChildren(): void {
super.createChildren();
addChild(itemIcon);
addChild(legendIcon);
}

override protected function updateDisplayList( unscaledWidth: Number, unscaledHeight: Number ): void {
super.updateDisplayList( unscaledWidth, unscaledHeight );
var node:TreeNode = data as TreeNode;
var startx:Number = data ? (data as BaseNode).indent : 0;
var xIncrement:Number = 3;

if ( disclosureIcon ) {
disclosureIcon.x = startx;
startx = disclosureIcon.x + disclosureIcon.width;
disclosureIcon.setActualSize( disclosureIcon.width, disclosureIcon.height );
}

var labelFormat:TextFormat = new TextFormat();

if ( icon ) {
if ((node) && (node.level == 2)) {
icon.visible = false;
legendIcon.visible = false;

labelFormat.italic = true;
label.setTextFormat(labelFormat);

itemIcon.source = (data as BaseNode).iconSource;
itemIcon.visible = true;
itemIcon.x = startx + xIncrement;
startx = itemIcon.x + itemIcon.width;
} else if (data is LegendNode) {
icon.visible = false;
itemIcon.visible = false;

legendIcon.source = (data as BaseNode).iconSource;
legendIcon.visible = true;
legendIcon.visible = true;
legendIcon.x = startx + xIncrement;
startx = legendIcon.x + legendIcon.width;
} else {
labelFormat.bold = true;
labelFormat.size = 11;
label.setTextFormat(labelFormat);

itemIcon.visible = false;
legendIcon.visible = false;
icon.x = startx + xIncrement;
startx = icon.x + icon.measuredWidth;
icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
}
}

if (getControl()) {
if ((node) && (node.level == 2)) {
getControl().x = startx + xIncrement;
startx = getControl().x + getControl().measuredWidth;
getControl().setActualSize(getControl().measuredWidth, getControl().measuredHeight);
} else {
getControl().visible = false;
}
}
label.x = startx + xIncrement;
label.setActualSize(unscaledWidth – startx, measuredHeight );
}

protected function getControl():Button { // this is overriden by some renderers wich also inherit from this one
return null;
}

}
this item renderer creates a check or radio button next to the label of the item; the class that inherit from this one pass the created checkbox or radio button via the getControl method

as you see, i have placed your solution in the dataChangeHandler but is not working; if i scroll the tree the checkbox or radio button still disappears