in the flex app that i'm currently working on, i have a DataGrid that uses an itemRenderer to display an image. the image is a 'delete' button that allows the user to delete the item. fairly straightforward, and the code below was working fine...

1. <mx:DataGridColumn width="24" sortable="false" paddingLeft="4" paddingRight="4" headerText="">
2. <mx:itemRenderer>
3. <mx:Component>
4. <mx:Image source="assets/icon_delete.png" horizontalAlign="center" height="17" width="17" click="parentDocument.confirmDelete(event);" />
5. </mx:Component>
6. </mx:itemRenderer>
7. </mx:DataGridColumn>

... until the customer called and said that the user should not be allowed to delete a record if that record meets a particular condition. ok. i think i can do that. i made some modifications and now had the following code:

1. <mx:DataGridColumn width="24" sortable="false" paddingLeft="4" paddingRight="4" headerText="" dataField="CAN_DELETE">
2. <mx:itemRenderer>
3. <mx:Component>
4. <mx:Image source="assets/icon_delete.png" horizontalAlign="center" height="17" width="17" click="parentDocument.confirmDelete(event);" visible="{data.CAN_DELETE == 1}" />
5. </mx:Component>
6. </mx:itemRenderer>
7. </mx:DataGridColumn>

i added a "dataField" property to the DataGridColumn, and added a "visible" property to the image itself, bound to the value of CAN_DELETE. recompiled, and still saw that every record displayed the delete image. i wondered if my logic, as simple as it was, might have been off. just for kicks and giggles, i hard coded the value 'false' into the "visible" property of the image. still, it displayed for all records. now this was odd.

one of the big perks of my current job is that i get to work with tariq ahmed, flex guru and all around good guy. while he wasn't able to offer up a reason as to why this behavior was happening, he suggested throwing the image into an <mx:HBox> component. new code:

1. <mx:DataGridColumn width="24" sortable="false" paddingLeft="4" paddingRight="4" headerText="" dataField="CAN_DELETE">
2. <mx:itemRenderer>
3. <mx:Component>
4. <mx:HBox>
5. <mx:Image source="assets/icon_delete.png" horizontalAlign="center" height="17" width="17" click="parentDocument.confirmDelete(event);" visible="{data.CAN_DELETE == 1}" />
6. </mx:HBox>
7. </mx:Component>
8. </mx:itemRenderer>
9. </mx:DataGridColumn>

you'll notice the only change is the addition of the <mx:HBox> around the <mx:Image>. for whatever reason, that worked perfectly. i don't pretend to know why, but i'm curious as heck. if you've got any ideas, please feel free to comment and enlighten me.