Setting a prompt on a ComboBox control in Flex

by Peter deHaan on June 1, 2008

The following example shows how you can set a prompt on a Flex ComboBox control by setting the prompt property.

Full code after the jump.

You can reset a ComboBox control so that its prompt message is visible again by setting the selectedIndex property to -1.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/01/setting-a-prompt-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object abbrev="AL" name="Alabama" />
        <mx:Object abbrev="AK" name="Alaska" />
        <mx:Object abbrev="AZ" name="Arizona" />
        <mx:Object abbrev="AR" name="Arkansas" />
        <mx:Object abbrev="CA" name="California" />
        <mx:Object abbrev="CO" name="Colorado" />
        <mx:Object abbrev="CT" name="Connecticut" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Reset ComboBox"
                click="comboBox.selectedIndex = -1;" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            labelField="name"
            prompt="Please select a state..." />

</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/01/setting-a-prompt-on-a-combobox-control-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.Button;
            import mx.containers.ApplicationControlBar;

            private var arr:Array;
            private var appControlBar:ApplicationControlBar;
            private var button:Button;
            private var comboBox:ComboBox;

            private function init():void {
                arr = [];
                arr.push({abbrev:"AL", name:"Alabama"});
                arr.push({abbrev:"AK", name:"Alaska"});
                arr.push({abbrev:"AZ", name:"Arizona"});
                arr.push({abbrev:"AR", name:"Arkansas"});
                arr.push({abbrev:"CA", name:"California"});
                arr.push({abbrev:"CO", name:"Colorado"});
                arr.push({abbrev:"CT", name:"Connecticut"});

                button = new Button();
                button.label = "Reset ComboBox";
                button.addEventListener(MouseEvent.CLICK, button_click);

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

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.labelField = "name";
                comboBox.prompt = "Please select a state...";
                addChild(comboBox);
            }

            private function button_click(evt:MouseEvent):void {
                comboBox.selectedIndex = -1;
            }
        ]]>
    </mx:Script>

</mx:Application>

{ 13 comments… read them below or add one }

enat June 2, 2008 at 7:19 am

wow, this blog is so great, thank you very much….
Thank you :-)

Reply

akshay June 2, 2008 at 7:54 pm

this is of great help….can you also mention how to control 3d zoom using as3.

thanks

Reply

Scott June 13, 2008 at 6:01 am

I am trying to figure out how to run my jsp files through a flex application. Can someone help me with this?

Reply

peterd June 13, 2008 at 7:04 am

Scott,

There are several examples of using Flex and JSP at http://learn.adobe.com/wiki/display/Flex/Getting+Started. You can use the search box in the top right corner to find several code snippets.

Peter

Reply

Alan July 10, 2008 at 1:47 pm

Thanks for this one. It’s helped me out

Reply

Srinivas Kusunam June 3, 2009 at 2:47 pm

Thanks for the tip. Problem with the “Prompt” is once you select a value from the drop down then you are done you can’t set it back to “-1″ (only through code). I have 20 comboboxes which are optional and in EDIT mode user might want to select “-1″ for some of the combo boxes for which there is a value. So far i did not find any easy solution for this. Any suggestions?

Reply

Peter deHaan June 3, 2009 at 6:51 pm

Srinivas Kusunam,

I believe if you hold down the Ctrl key (on Windows, not sure about Mac) while selecting an already selected item it will de-select that item and set the selectedIndex property back to -1.

Peter

Reply

Anon January 25, 2010 at 10:38 am

Wow – thanks for this great trick! It’s something I never knew.

Reply

Liviu September 11, 2009 at 4:38 pm

Hi Peter

I’m running into a problem on resetting editable ComboBoxes back to prompt. When the user writes their own text, the ComboBox does not respond to selectedIndex=-1 anymore.

Reply

Peter deHaan September 12, 2009 at 7:51 am

@Liviu,

This seems to work for me (Flex 3.4.0.9147):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:VBox>
        <mx:ComboBox id="cb" prompt="ok" dataProvider="[One,Two,Three]" editable="true" width="100%" />
        <mx:Label text="text = {cb.text}" />
        <mx:Label text="selectedIndex = {cb.selectedIndex}" />
        <mx:Label enterFrame="event.currentTarget.text = 'prompt = ' + cb.prompt;" />
        <mx:Button label="Set selectedIndex=-1" click="cb.selectedIndex = -1;" />
        <mx:HRule width="100%" />
        <mx:Label fontWeight="bold" initialize="event.currentTarget.text = mx_internal::VERSION;" />
    </mx:VBox>
 
</mx:Application>

Peter

Reply

Liviu September 15, 2009 at 10:57 am

Hi

I’m not sure about Flex, I am not familiar with MXML, but in AS3 written in Flash CS3, an editable ComboBox that has been edited by the user does not respond to selectedIndex = -1 anymore;

I just opened a new Document, and threw on stage a ComboBox named cb, and a button named b, and wrote this code:

import fl.data.*;
cb.editable = true;
cb.dataProvider = new DataProvider(["one", "two", "3"]);
cb.prompt = "Choose a number";
b.addEventListener(MouseEvent.CLICK, onClickButton);
function onClickButton(e){
	cb.selectedIndex = -1;
}

Whenever you write something into the ComboBox, the button has no effect.

Reply

Peter deHaan September 15, 2009 at 1:56 pm

@Liviu,

That may be a bug in the Flash CS3+ ComboBox control.
Can you please submit a bug report via http://www.adobe.com/go/wish/ and include your test code.

Thanks,
Peter

Reply

Nesh March 8, 2010 at 6:59 am

How would you set up a StringValidator (MXML not actionscript) with required set to true for the combobox that is editable AND has a prompt set?
My problem is that if I set a validator with required =true, since the combobox is editable and has a prompt the validator always validates TRUE since the prompt is there, however that is wrong as the prompt is not an actual value (just like in the example above ‘Please select a State’ is not the value you want… )… I tried using NumberValidator but that again will not work as the editable combobox always has SelectedIndex = -1 if you are typing the value in there… any thoughts?

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: