Monday, February 23, 2009

Auto-sizing the height of a TileList

Would you like the TileList component to auto-size to its content? If you have a fixed width OR height you could use the following hack (the example is based on a fixed width of 4 columns):

<mx:TileList
id="tl"
columnWidth="160"
rowHeight="160"
columnCount="4"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
updateComplete="upd()"
dataProvider="{xx}">

private function upd(): void
{
var rc: int = Math.ceil(xx.length / tl.columnCount);
if (tl.rowCount!=rc) tl.rowCount = rc;
}

It's important to turn of the scroll policy to prevent the vertical scrollbar from appearing and disappearing.

9 comments:

Marko Kecman said...

Great idea! It helped me figure out how to autosize my tilelist. I have tilelist inside canvas that is inside viewstack that is inside canvas. :) and it worked perfectly! Thanks!

Ria Flex said...

My pleasure!

cedric said...

Works Great !!! Thanks !!!!

Ria Flex said...

Just discovered that you might need to call invalidateList() after setting the rowCount property.

lordB8r said...

awesome idea, but how can you turn off the updateComplete() from the component? It acts like an eventlistener, but one that i can't find to set to null or remove. Thanks,

lordB8r

Ria Flex said...

"updateComplete" is an event that you can write some code for but nobody forces you to write code for the event... So why would you want to turn it off?

lordB8r said...

Sorry, I wasn't clear before (too many abstract thoughts to realize that nobody is following what I said).

I used updateComplete() to populate the tileList (should fire just once when I get a wsdl response which is tied to a bindable dataprovider) Th problem I ran into is that the updateComplete keeps firing, just like an anonymous eventListener, even after the updateComplete has happened. For this reason, I thought that maybe I could put in a statement like:

if(rc > 0){tl.updateComplete=null}, but it doesn't work. Does that make more sense?

Anonymous said...

lordB8r I am having the same problem. I am working on a Flex application and the updateComplete() on a mx:TileList keeps called constantly slowing the app down. Any solution to this issue?

Anonymous said...

I want to set the rowcount for popupmenubutton expecting the vertical scroll to appear when data is more than the rowcount. The data in dp is over 100 rows. I wrote below but didn't workthis:

<mx:PopUpMenuButton id="cmb1" minWidth="250" creationComplete="setMenuRowCount(event)" dataProvider="{dp}"

private function setMenuRowCount(e:*):void {

Menu(e.currentTarget.popUp).height = 100;

Menu
(e.currentTarget.popUp).verticalScrollPolicy = "ScrollPolicy.AUTO";

Menu(e.currentTarget.popUp).rowCount = 20;
}

Any help available?
Regards.
Toks