When using custom item renderer for a datagrid column, I came upon a problem that caused the grid to show incorrect options.
I was using a HBox to show different action buttons, the action buttons were created dynamically depending on some value of row. What was happening is that the item renderers were being reused and wrong link buttons were added in the HBox.
Here is some literature on the issue.
If you are using a container in an itemrenderer then you need to remove all of its children when the itemrenderer is being created forcing it not to reused.
Here is the code:
<mx:DataGrid >
<mx:columns>
<mx:DataGridColumn headerText="Actions" >
<mx:itemRenderer>
<fx:Component>
<mx:HBox >
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data=value;
this.removeAllChildren();
if(value!=null)
{
hgroup1_creationCompleteHandler();
}
}
protected function hgroup1_creationCompleteHandler():void
{
//Add children according to values in the row
//FOR EXAMPLE
//var viewDetailsButton:LinkButton = new LinkButton();
//viewDetailsButton.label = "Details";
//viewDetailsButton.setStyle("textDecoration","underline");
//viewDetailsButton.setStyle("textRollOverColor","0xFF0000");
//viewDetailsButton.setStyle("textSelectedColor","0x2A00FF");
//viewDetailsButton.addEventListener(MouseEvent.CLICK,ViewOrderDetails_ClickHandler);
//this.addChild(viewDetailsButton);
}
]]>
</fx:Script>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Comments