Resizing a Flex List control using the rowCount property

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.

View MXML

<?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>

17 thoughts on “Resizing a Flex List control using the rowCount property

  1. 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

  2. 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

  3. 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 rowCount property to the same number of items in the data provider.

    As for your other question/comment. Yes, if you set the rowCount to 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 the rowHeight property to 80, it will show the scroll bars.

    Peter

  4. 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

  5. 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.

  6. 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 ?

  7. 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.

  8. 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?

  9. 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.

  10. I, too, have the problem of rowCount not working with rows of varying heights. PLEASE — any work-around?

  11. 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…

    1. 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;

  12. 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:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
     
        <mx:Panel title="HDividedBox Container Example" width="90%" height="90%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
     
            <mx:Text width="100%" color="blue" text="Drag the divider side to side to resize the children."/>
     
            <mx:HDividedBox width="100%" height="100%">
     
                <mx:List>
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="A string that is kinda long." />
                            <mx:Object label="A string that is kinda long." />
                            <mx:Object label="A string that is kinda long." />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:List>
     
                <mx:Canvas label="Canvas 2" width="100%" height="100%" backgroundColor="#99CCFF">
                    <mx:List x="0" y="26" width="100%">
                        <mx:dataProvider>
                            <mx:Array>
                                <mx:Object label="A string that is kinda long." />
                                <mx:Object label="A string that is kinda long." />
                                <mx:Object label="A string that is kinda long." />
                            </mx:Array>
                        </mx:dataProvider>
                    </mx:List>
                </mx:Canvas>
     
            </mx:HDividedBox>
     
        </mx:Panel>
     
    </mx:Application>
  13. I was also struggling with dynamic height of the list control and than found this post: http://www.sdfug.org/san-diego-flash-users-group/flex/flex-list-items-with-dynamic-heights/. When you have a list with items of variable rowheight it’s better not to rely on the rowcount property, but you can change the height of the list using the measureHeightOfItems() method like this:

    <mx:List render="event.target.height=event.target.measureHeightOfItems()+event.+ target.viewMetrics.top+target.viewMetrics.bottom;" />

    Hope this helps.

  14. Peter,

    What if I wanted a mx:List to have more rows than what was in the dataprovider? Such as having 50 rows (and therefore a large scrollbar) even if there are only 10 items. I could add 40 null items (to the 10 real items) but that seems ridiculous. I’d also want to be able to still scroll up and down and get the correct scroll indexes.

    Have you done this before?

Comments are closed.