Adobe Flex: Set Selected Item In ComboBox

Posted by blogmeister on

October 22, 2008

Oddly, Flex does not let you set an item to be selected in its ComboBox component. While the selectedIndex property can be used, you would have to make your own method to loop through the ComboBox’s dataProvider contents to get the index. Luckily, someone saved us the trouble of creating our own component extending ComboBox. Use the code below to be used as a substitute component for mx:ComboBox.

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox>
   <mx:Script>
      <![CDATA[
         private var _selectedValue:String;
         private var bSelectedValueSet:Boolean = false;
         private var bDataProviderSet:Boolean = false;
         // Override committ, this may be called repeatedly 
         override protected function commitProperties():void {
            // invoke ComboBox version 
            super.commitProperties();
            // If value set and have dataProvider 
            if (bSelectedValueSet && bDataProviderSet) {
               // Set flag to false so code won't be called until selectedValue is set again 
               bSelectedValueSet=false;
               // Loop through dataProvider 
               for (var i:int=0; i<this.dataProvider.length; i++) {
                  // Get this item's data 
                  var item:String = this.dataProvider[i].data;
                  // Check if is selectedValue 
                  if(item == _selectedValue) {
                     // Yes, set selectedIndex 
                     this.selectedIndex = i;
                     break;
                  }
               }
            }
         }
         // Trap dataProvider being set 
         override public function set dataProvider(o:Object):void {
            // invoke ComboBox version 
            super.dataProvider = o;
            // This may get called before dataProvider is set, so make sure not null and has entries 
            if (o!=null && o.length) {
               // Got it, set flag 
               bDataProviderSet = true;
            }
         }
         // set for selectedValue 
         public function set selectedValue(s:String):void {
            // Set flag 
            bSelectedValueSet = true;
            // Save value 
            _selectedValue = s;
            // Invalidate to force commit 
            invalidateProperties();
         }
      ]]>
   </mx:Script>
</mx:ComboBox>

<?xml version="1.0" encoding="utf-8"?>

<mx:ComboBox>

<mx:Script>

<![CDATA[

private var _selectedValue:String;

private var bSelectedValueSet:Boolean = false;

private var bDataProviderSet:Boolean = false;

// Override committ, this may be called repeatedly

override protected function commitProperties():void {

// invoke ComboBox version

super.commitProperties();

// If value set and have dataProvider

if (bSelectedValueSet && bDataProviderSet) {

// Set flag to false so code won't be called until selectedValue is set again

bSelectedValueSet=false;

// Loop through dataProvider

for (var i:int=0; i<this.dataProvider.length; i++) {

// Get this item's data

var item:String = this.dataProvider[i].data;

// Check if is selectedValue

if(item == _selectedValue) {

// Yes, set selectedIndex

this.selectedIndex = i;

break;

}

// Trap dataProvider being set

override public function set dataProvider(o:Object):void {

// invoke ComboBox version

super.dataProvider = o;

// This may get called before dataProvider is set, so make sure not null and has entries

if (o!=null && o.length) {

// Got it, set flag

bDataProviderSet = true;

}

// set for selectedValue

public function set selectedValue(s:String):void {

// Set flag

bSelectedValueSet = true;

// Save value

_selectedValue = s;

// Invalidate to force commit

invalidateProperties();

}

]]>

</mx:Script>

</mx:ComboBox>

To use this custom made ComboBox, if your component file is under the folder com/ui/ then you have to specify it in the xml namespace. Setting the item in the ComboBox to be selected can be done by calling the selectedValue property (see code below).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fx="com.ui.*">
   <fx:ComboBox id="cbx_1″ selectedValue="STRING_VALUE" width="150″ dataProvider="{DATA_PROVIDER_ID_HERE}"/>
<mx:Application>

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fx="com.ui.*">

<fx:ComboBox id="cbx_1″ selectedValue="STRING_VALUE" width="150″ dataProvider="{DATA_PROVIDER_ID_HERE}"/>

<mx:Application>

tags: combobox, flex

16 Responses to “Adobe Flex: Set Selected Item In ComboBox”
…doesn’t work for me. Error when compiling.

By andrew on Dec 24, 2008
er, what does the error say? the code above does not compile correctly. you need to supply the correct data provider info (that will be used to retrieve data from the database) and the string_value should be replaced as well.

By tech on Dec 26, 2008
doesn’t work for me either.

i’m confused with the “STRING_VALUE”

if fill the dataProvider is card.
with the definition:

public var cards:ArrayCollection = new ArrayCollection(
[ {label:”Visa”, data:1},
{label:”MasterCard”, data:2},
{label:”American Express”, data:3} ]);

how can i choose “MasterCard”?
i fill selectedValue=”MasterCard”, but nothing happen

By Abs on Apr 14, 2009
hi, sorry i have not tried using ArrayCollection

By tech on Apr 14, 2009
Hi, this code work? Can you send a example to my mail?
Thanks a lot !!

By Willinos on Sep 19, 2009
yes, this code works

By tech on Sep 19, 2009
Hey! ……… i’m getting a
‘Error: Classes must not be nested.’ when trying to implement this……any ideas?

By Kyle Ward on Oct 14, 2009
hey, sorry man. i have not touched flex ever since i posted the code. can’t help you. maybe someone else can give you a hint

By tech on Oct 14, 2009
Hope you are doing great… I have project in (web development) Flex ColdFusion and SQL. I need someone to work on that project from beginning to end. I want a person who I can email if there is a problem and the problem is fixed in 24 hour period. The project hasn’t started yet.
But if you are interested then please let me know your hourly rate. I like the idea of invoice and will pay based on the same…
This is for the person who can give attention to my project if not daily at least every other day…. So please think and let me know if interested…

By seema on May 4, 2010
sorry. dont know coldfusion so i cant help

By tech on May 4, 2010
Hi,

I did it this way :

combobox.prompt=”Value”;
combobox.selectedIndex = -1;

By TA on May 7, 2010
refer
http://www.forta.com/blog/index.cfm/2006/11/22/Flex-ComboBox-With-selectedValue-Support

for updated combo component..

By RavikumarGM on Jun 4, 2010
hey thanks for this man

By tech on Jun 4, 2010
thank you so much.It helped me a lot.

By sreeja on Dec 5, 2010
you are welcome

By tech on Dec 5, 2010