The following example shows how you can resize a List control in Flex using the rowCount property. By setting the rowCount property, the List control is automatically resized so that only the specified number of rows are displayed.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/28/resizing-a-flex-list-control-using-the-rowcount-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="mlbXML" >
<teams>
<league id="AL">
<team label="Baltimore Orioles" />
<team label="Boston Red Sox" />
<team label="Chicago White Sox" />
<team label="Cleveland Indians" />
<team label="Detroit Tigers" />
<team label="Kansas City Royals" />
<team label="Los Angeles Angels of Anaheim" />
<team label="Minnesota Twins" />
<team label="New York Yankees" />
<team label="Oakland Athletics" />
<team label="Seattle Mariners" />
<team label="Tampa Bay Devil Rays" />
<team label="Texas Rangers" />
<team label="Toronto Blue Jays" />
</league>
</teams>
</mx:XML>
<mx:XMLListCollection id="alTeams"
source="{mlbXML.league.(@id == 'AL').team}" />
<mx:ApplicationControlBar dock="true">
<mx:Form>
<mx:FormItem label="rowCount:">
<mx:HSlider id="slider"
minimum="1"
maximum="10"
snapInterval="1"
liveDragging="true"
dataTipPrecision="0"
change="list.rowCount = event.value;" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:VBox id="vBox" height="100%">
<mx:List id="list"
maxHeight="{vBox.height}"
dataProvider="{alTeams}"
labelField="@label" />
</mx:VBox>
</mx:Application>
View source is enabled in the following example.
Dan’s comment below reminded me of another neat trick. If you want all the list items to be visible at once, simply set the rowCount property to the length of the items in the List control’s data provider, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/28/resizing-a-flex-list-control-using-the-rowcount-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="mlbXML" >
<teams>
<league id="AL">
<team label="Baltimore Orioles" />
<team label="Boston Red Sox" />
<team label="Chicago White Sox" />
<team label="Cleveland Indians" />
<team label="Detroit Tigers" />
<team label="Kansas City Royals" />
<team label="Los Angeles Angels of Anaheim" />
<team label="Minnesota Twins" />
<team label="New York Yankees" />
<team label="Oakland Athletics" />
<team label="Seattle Mariners" />
<team label="Tampa Bay Devil Rays" />
<team label="Texas Rangers" />
<team label="Toronto Blue Jays" />
</league>
</teams>
</mx:XML>
<mx:XMLListCollection id="alTeams"
source="{mlbXML.league.(@id == 'AL').team}" />
<mx:VBox id="vBox" height="100%">
<mx:List id="list"
dataProvider="{alTeams}"
rowCount="{list.dataProvider.length}"
labelField="@label" />
</mx:VBox>
</mx:Application>
{ 15 comments… read them below or add one }
It’s interesting that when you set the row count to 1 you lose the scrollbar. That’s something that could possibly be taken advantage of. I use the rowCount property when the dataprovider is a SQL lookup. I’ll do a SQL COUNT and use the number to set my comboBox or other list’s rowCount if it’s less than a maximum rowCount I set in init().
BTW — thanks for this site. No pontification, just example after example.. just what I need.
Cheers,
Dan
Dan,
Ah, thanks for the reminder. I updated the entry below and added a second example. A nice, easy way to resize the List control to match the number of items in the data provider is to set the list’s
rowCountproperty to the same number of items in the data provider.As for your other question/comment. Yes, if you set the
rowCountto 1, you do lose the scroll bar (at least in this case). I believe this is only because the row height isn’t large enough to show both the scroll buttons and scroll thumb (not specificially because the row count is set to 1). For example , if I create a List control, set its row count to 1, and then set therowHeightproperty to 80, it will show the scroll bars.Peter
Ayup, i just tried it out. I get scroll buttons at rowHeight 32 and the thumb appears at 42. Seems to be resolution independant as well.
Thanks again for your site Peter.
Cheers,
Dan
Dan,
It would also be very specific to the skin used on the scroll bar as well. I’m sure you could make your own custom scroll bar skin that would appear at smaller sizes if you wanted. For example, something like the numeric stepper, but without a scroll track/thumb.
Come to think of it, that isn’t a half-bad (or half-good, if you prefer) idea! Create a single row List control with NumericStepper control like up/down buttons. Although at that point it may just be better/easier to just use a ComboBox control, but where is the fun in that?!
Peter
This works nice when all fields have the same size, as soon as each field in the list has a different size Flex doesn’t understand it anymore.
Easy example is to use the posted code and add wordWrap=”true” variableRowHeight=”true” to the list element.
Now it uses the height of the single line fields, and goes awry as soon as one field is bigger then just one line. Sadly Flex doesn’t calculate the height of each field in the list.
If anyone knows a solution for this I would appreciate it allot since it has been bugging me alot lately.
Hi !
Does someone has tested to set the rowCount property to 0 ? When I try, the List takes a very big size !
Does somebody experienced the same problem ?
Jules,
I believe that is a known issue (or it works like that on purpose, where setting the row count to 0 would revert to a default List size rather than make the List disappear).
You can search the public Flex bug base at http://bugs.adobe.com/flex/
Peter
Thanks for your help Peter, I’ll checkout this link. As a workaround, I ‘ve set the rowCount property to 1, when the dataProvider becomes empty.
I have the same problem Hilger describes. Resizing a list with variable row heights does not work. Flex seems to resize the list only with (height of the first entry)*rowCount.
Is there a workaround for this?
has anyone noticed that when adding a list to a popupmanager or changing display containers the rows get larger even though they read out as the same height?
for whatever reason setting rowHeight again after its been reparented fixes.
flexer,
Can you please file a bug in the Flex bug base at http://bugs.adobe.com/flex/ and post the bug number here so a few of us can vote/subscribe.
Thanks,
Peter
I, too, have the problem of rowCount not working with rows of varying heights. PLEASE — any work-around?
does somebody know how to put a maximum limit to a list ?
I want to do a list where you can only put 3 elements, not more, but I don’t find
any properties in the documentation of the class to do so…
Hi Chris,
The list component lists items from a Data Provider – it doesn’t restrict or validate the data provider, just enumerate the children of that provider. You’d need to programmaticly limit it -
if (dataProvider.length > 3) return;
When I put a List inside a HDividedBox, and then I set the widths of the Lists to 100% I find that the horizontal scroll bars fail to appear properly. This also happens when it is nested in another container. Is there a way to do this?
Below is an example of the problem. Try adjusting the divider so that the list is too narrow to fit the text: