Setting the number of visible items in a ComboBox control’s dropdown menu in Flex

The following example shows how you can set the number of visible items in a Flex ComboBox control’s dropdown menu by setting the rowCount property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.NumericStepperEvent;

            private function numericStepper_change(evt:NumericStepperEvent):void {
                callLater(comboBoxOpen);
            }

            private function comboBoxOpen():void {
                comboBox.open();
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:NumericStepper id="numericStepper"
                minimum="0"
                maximum="10"
                change="numericStepper_change(event);" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            rowCount="{numericStepper.value}"
            openDuration="0"
            closeDuration="0"
            width="100" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/11/setting-the-number-of-visible-items-in-a-combobox-controls-dropdown-menu-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.ComboBox;
            import mx.controls.NumericStepper;
            import mx.containers.ApplicationControlBar;
            import mx.events.NumericStepperEvent;

            private var arr:Array;
            private var appControlBar:ApplicationControlBar;
            private var numericStepper:NumericStepper;
            private var comboBox:ComboBox;

            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({label:"Four"});
                arr.push({label:"Five"});
                arr.push({label:"Six"});
                arr.push({label:"Seven"});
                arr.push({label:"Eight"});
                arr.push({label:"Nine"});

                numericStepper = new NumericStepper();
                numericStepper.minimum = 0;
                numericStepper.maximum = 10;
                numericStepper.addEventListener(NumericStepperEvent.CHANGE, numericStepper_change);

                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(numericStepper);
                Application.application.addChildAt(appControlBar, 0);

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.rowCount = 5;
                comboBox.width = 100;
                comboBox.setStyle("openDuration", 0);
                comboBox.setStyle("closeDuration", 0);
                addChild(comboBox);
            }

            private function numericStepper_change(evt:NumericStepperEvent):void {
                comboBox.rowCount = evt.value;
                callLater(comboBoxOpen);
            }

            private function comboBoxOpen():void {
                comboBox.open();
            }
        ]]>
    </mx:Script>

</mx:Application>

6 thoughts on “Setting the number of visible items in a ComboBox control’s dropdown menu in Flex

  1. Unrelated to this post, but I’m not sure how to contact you via Email. Anyway, I’m using the charting components provided with Flex Builder 3 Pro and can’t seem to get the y-axis title to display multi-line. I traced the code back to the ChartLabel.as class provided in the sdk and it shows that when the label is created, multi-line is set to true. Is there a special string I need to pass with the title to make it use 2 lines?

    The strings I’ve tried are…

    “% of e-mail users accessing e-mail eight or more times per month”
    “% of e-mail users accessing e-mail\neight or more times per month”
    “% of e-mail users accessing e-mail<br>eight or more times per month”

    …but each still displays on a single line.

  2. Greg,

    Thanks a lot. I commented on the bug with two possible workarounds:

    attached workaround.mxml with two possible workarounds.

    workaround #1 — define the axis title in ActionScript:

    [Bindable]
    public var str:String = "% of e-mail users accessing e-mail" + "\\n" + "eight or more times per month";
    

    workaround#2 — define the axis title in MXML using <mx:String />:

    <mx:String id="str">% of e-mail users accessing e-mail
    eight or more times per month</mx:String>
    

    Finally, assign the title title to the LinearAxis using binding:

    <mx:verticalAxis>
        <mx:LinearAxis id="yAxis" title="{str}" />
    </mx:verticalAxis>
    

    Peter

  3. Interesting. I hadn’t thought of trying that.

    Thanks for you help and quick replies! Do I need to close that bug now, or will someone at Adobe do that?

  4. Greg,

    We’ll leave the bug in community status. After the bug gets enough votes, somebody (else) at Adobe will have a look at the issue and see if it is a bug or if that is expected behavior.

    Actually, another solution may be to something like the following:

    <mx:LinearAxis id="yAxis" title="% of e-mail users accessing e-mail{'\\n'}eight or more times per month" />
    

    Peter

Comments are closed.