In Flex, how do wrap Lists into columns?

Question

How do you make a List control wrap around to a second column (or multiple columns)? Thanks, let me know if there is a solution for this with the List control or some other Flex control.

For example, if you have one list with 42 items in it, but I want to cap the height of a list to 20 items; then instead of having one list with 42 items all the way down, I would have that list of items look like the equivalent of 3 adjacent lists: the first with 20 items, the second with 20 items, and the third with 2 items (which represent the original list of 42 items).

This question seems similar but it is in ColdFusion:
http://stackoverflow.com/questions/4923/wrapping-lists-into-columns

Answer 1

You could use a Repeater and a simple Label based itemRenderer for the list items and avoid using a list completely. If you wrap it all up inside a custom control you can provide the same API as List so your consumers will never tell the difference.

Answer 2

The default itemRenderer for a List control is TextInput that supports only single line text. Use TextArea instead.

<mx:List itemRenderer="mx.controls.TextArea"/>

Answer 3

Try setting the following two properties on List:

wordWrap=true
variableRowHeight=true

Answer 4

I think you're looking for a second row, as others have noted. Either setting the wordWrap to true or using a different item renderer are the best way to get it done, but using a custom item renderer will give you more control over how the object is displayed.

Answer 5

I suggest creating a custom Component that wraps a variable number of Lists. This custom component can have a property named "maxListHeight". It can also have a "dataProvider" property. This custom component will produce a set of horizontally aligned lists. The number of lists produced by the custom component will be: floor(dataProvider.length/maxListHeight)+1. Where all but the last list produced will have a listHeight of maxListHeight; the last list produced will have a listHeight of: dataProvider.length % maxListHeight.

This should work but managing the addition and removal of items to the masterList should require some extra work (if it is not appended/removed from the back). This would also require instantiating multiple lists instead of just one.

Answer 6

Using a TileList and changing the direction variable is the best solution I have come up with.