<charlie griefer>

*tap*tap*tap* is this thing on?

flex images: visible property funkiness in itemRenderer

may 13, 2008 at 9:56pm in flex

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.

Tony Fendall's Gravatar
Tony Fendall
# May 14, 2008 @ 1:05 AM
 
This is only speculation, but I believe that when you are creating an inline item renderer as you are, the <mx:Component> is not actually treated as the item renderer, but the UIComponent within that tag is.

This is means that your image was the item renderer, and the item renderer itself cannot be invisible. The item renderer can be blank, but not invisible. In your second case, the HBox is the item renderer, so the child component can change freely.

There are a few other weird cases which I have come across when using inline item renderers, so as a general rule, I always create item renderers as a seperate class. You then have to replace references to parentDocument with other solutions: http://www.munkiihouse.com/?p=47
Bryan Bartow's Gravatar
Bryan Bartow
# May 14, 2008 @ 1:46 AM
 
As best as I understand the Flex framework (and I admit it's not a whole lot) Tony is right. I guess you could go down the slippery slope of setting the image source dynamically to a transparent png or swf if you really wanted to stick with only the Image component. Making the image a child is much easier however.


 
© 1964-2008, charlie griefer - design based on *Limelight* by www.mitchinson.net
blogCFC was created by raymond camden. this blog is running version 5.9.002.

CSS | XHTML