Disappearing data in your itemRenderer?
Note: An update to this post has been posted here. It provides a better solution than the one offered below, so I recommend you check it out.
Although I love Flex, it can still be a bit buggy at times. I was working with an itemRenderer the other day and came across some very odd behavior. I had a list using an itemRenderer and when the data originally loaded everything was fine, but whenever I scrolled some of the data started disappearing. You can see this demonstrated in the sample below.
|
<mx:List dataProvider="{myData.item}"
variableRowHeight="true"
alternatingItemColors="['#FFFFFF','#E6EEF3']" width="100%" height="100%">
<mx:itemRenderer>
<mx:Component>
<mx:VBox verticalGap="0">
<mx:HBox>
<mx:Label text="{data.Label}" fontWeight="bold" />
<mx:Label text="{data.date}" color="#999999" /> </mx:HBox> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:List> |
Apparently, Flex likes to have all the items in a list the same height; so when an item such as the Text field in the example causes variation, Flex simply doesn’t display it. I found that the easiest way to remedy the issue was to set explicit heights for the items in the renderer. Here is an example of how it works with the height explicitly set:
|
<mx:List dataProvider="{myData.item}"
variableRowHeight="true"
alternatingItemColors="['#FFFFFF','#E6EEF3']" width="100%" height="100%">
<mx:itemRenderer>
<mx:Component>
<mx:VBox verticalGap="0">
<mx:HBox>
<mx:Label text="{data.Label}" fontWeight="bold" />
<mx:Label text="{data.date}" color="#999999" /> </mx:HBox> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:List> |
Now, this isn’t a perfect solution. What we are doing here is effectively the same thing as setting variableRowHeight to false; thus making all the items in the List the same height. So if anybody has a better solution for this issue please let me know.
Tags: itemRenderer, List, variableRowHeight
Try forcing validation when changing the data. In your renderer, at creation complete, add an event listener on “dataChange” and call validateNow() in the function used by the listener.
Thanks a bunch Olivier, that worked like a charm. I created a new post to demonstrate what you suggested. You can find it at http://www.kalengibbons.com/blog/index.php/2008/10/disappearing-data-in-your-itemrenderer/.
So glad someone else was experiencing this … I have been pulling my hair out with this thinking it was a bug I had caused or something. I will be trying the solution tonight when I get home! Thanks!!
Unfortunately this still doesnt work for me … its much worse on my Vista x64 machine at work than my Win XP machine at home, but I still get the disappearing text. I even have an image to the left of the text that always appears and the row has a minheight the size of the image, but the text still disappears sometimes and gets progressively worse. This is a real bad bug as far as I am concerned, there must be a way around it that works completely as apps like Twhirl dont suffer this problem, I wonder how they are doing it.
This solution worked great for me. Thanks!
On my ItemRenderer:
import mx.events.FlexEvent;
private function init():void
{
this.addEventListener(FlexEvent.DATA_CHANGE,val);
}
private function val(evt:FlexEvent):void
{
this.validateNow();
}