Creating a variable row height item renderer on a ComboBox control in Flex

by Peter deHaan on July 4, 2008

The following example shows how you can create a variable row height item renderer on a Flex ComboBox control by setting the variableRowHeight property on the ComboBox control’s dropdown property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/04/creating-a-variable-row-height-item-renderer-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.DropdownEvent;
 
            private function comboBox_open(evt:DropdownEvent):void {
                evt.currentTarget.dropdown.variableRowHeight = true;
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <mx:Object name="Baltimore Orioles" abbr="BAL" />
        <mx:Object name="Boston Red Sox" abbr="BOS" />
        <mx:Object name="Chicago White Sox" abbr="CWS" />
        <mx:Object name="Cleveland Indians" abbr="CLE" />
        <mx:Object name="Detroit Tigers" abbr="DET" />
        <mx:Object name="Kansas City Royals" abbr="KC" />
        <mx:Object name="Los Angeles Angels of Anaheim" abbr="LAA" />
        <mx:Object name="Minnesota Twins" abbr="MIN" />
        <mx:Object name="New York Yankees" abbr="NYY" />
        <mx:Object name="Oakland Athletics" abbr="OAK" />
        <mx:Object name="Seattle Mariners" abbr="SEA" />
        <mx:Object name="Tampa Bay Devil Rays" abbr="TB" />
        <mx:Object name="Texas Rangers" abbr="TEX" />
        <mx:Object name="Toronto Blue Jays" abbr="TOR" />
    </mx:Array>
 
    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            width="140"
            labelField="name"
            open="comboBox_open(event);">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Text selectable="false"
                        toolTip="{data.name} ({data.abbr})" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:ComboBox>
 
</mx:Application>

View source is enabled in the following example.

{ 6 comments… read them below or add one }

lily July 15, 2009 at 5:15 am

but when the content is “gy” ,it does’t work. How to solve it?

Reply

Scott Delamater January 12, 2010 at 1:28 pm

If you’re trying to do this same thing without using an inline itemRenderer (e.g., just using the default ListItemRenderer, or a a custom renderer that extends that class), you also need to set the wordWrap property of the dropdown box to true:

private function comboBox_open(evt:DropdownEvent):void 
{
     evt.currentTarget.dropdown.wordWrap = true;
     evt.currentTarget.dropdown.variableRowHeight = true;
}

Reply

Steve March 23, 2010 at 2:46 pm

This was very helpful. Thanks.
Is there anyway to adjust the height of the dropdown when it opens, other than the rowCount? I have two answers in one of my dropdown; the first is short and the second is long. The comboBox then sets the rowCount to 2 and determines the height of the dropdown by multiplying the rowCount by the height of the first row. This forces the user to scroll to see the entire second item.
Thanks,
Steve

Reply

Peter deHaan March 23, 2010 at 3:04 pm

@Steve,

Try setting the dropdown height in the open handler:

<mx:Script>
    <![CDATA[
        import mx.events.DropdownEvent;
 
        private function comboBox_open(evt:DropdownEvent):void {
            ComboBox(evt.currentTarget).dropdown.variableRowHeight = true;
            ComboBox(evt.currentTarget).dropdown.height = 50;
        }
    ]]>
</mx:Script>

Because the open event is dispatched after the ComboBox is opened, you may want to set the ComboBox control’s openDuration style to 1ms so the resize isn’t as noticeable.

Peter

Reply

Steve March 23, 2010 at 4:05 pm

@Peter

That really helped. Two other things I would like to do:
1. adjust the dropdown height depending on the height of the rows available. (e.g. if I have 2 rows, 1 height=20 and 1 height=60, set to 80, etc.)
2. adjust the label area height depending on the height of the selected row.

Steve

Reply

Steve March 23, 2010 at 4:06 pm

addition to #2:
And display all the lines of multi-line selections in the label area.

Steve

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: