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:
Wrapping lists into columns

It is similar to "wordwrap", but isn't wordwrap associated strictly to text labels so that it spans two rows instead of just one (and possibly to avoid truncating the text). — Luis B, Nov 13 '09 at 05:34
Sorry for the confusion, I definitely don't want wordwrap, because wordwrap gives me more rows per item. Let me edit my question some. — Luis B, Nov 13 '09 at 19:01

score 1 · Accepted Answer · answered Nov 13 '09 at 20:55

1

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

answered Nov 13 '09 at 20:55

Luis B

1,684
3
15
25

score 0 · Answer 2 · answered Nov 12 '09 at 21:35

0

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.

answered Nov 12 '09 at 21:35

Simon

78,655
25
88
118

score 0 · Answer 3 · answered Nov 13 '09 at 16:55

0

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.

answered Nov 13 '09 at 16:55

RJ Owen

615
3
8

I wish whoever down voted this answer would tell us why. I think this solution works. – RJ Owen Nov 14 '09 at 00:31

score 0 · Answer 4 · answered Nov 13 '09 at 19:19

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.

This idea should work, but I don't like that it has to depend on instantiating multiple adjacent lists. — Luis B, Nov 13 '09 at 19:20
I also don't like this solution, because then you also need to add logic for deselecting all the other list.selectedItem, when you select an item from a produced list. — Luis B, Nov 13 '09 at 19:40

score -1 · Answer 5 · answered Nov 13 '09 at 07:10

-1

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

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

answered Nov 13 '09 at 07:10

Amarghosh

58,710
11
92
121

score -1 · Answer 6 · answered Nov 13 '09 at 16:37

-1

Try setting the following two properties on List:

wordWrap=true
variableRowHeight=true

answered Nov 13 '09 at 16:37

cliff.meyers

17,666
5
51
66

In Flex, how do wrap Lists into columns?

6 Answers6