AdobeStock_455007340

Flex ComboBox With selectedValue Support

One of the things I like most about ColdFusion’s tag is the SELECTED attribute, give it a value and it figures out which one to pre-select. The Flex ComboBox allows you to set selectedIndex (the relative element position) but not selectedValue. Actually, ComboBox does have a selectedValue property, but that is used to read the value of the selected item, and can’t be used to set the value of the item to be selected.
Coincidentally, while I was working on this, both Scott Stroz and Ray Camden posted solutions to the exact same problem. Scott’s solution involved calling a method to set the value, and I really think that the selectedValue property should be used to be consistent with how ComboBox itself works. Ray’s solution allows for a property to be set (he defined a new property for this), but his solution would not work for me as my dataProvider was being populated after the control had been created (it is being populated by a call to a CFC).
So, here is my solution. It’s bit more complex than what Scott and Ray suggested, but it does support selectedValue, it’ll also allow that property to be changed as needed (even after control creation), and it also properly handles delayed dataProvider population.
Here is the code:




And here is a simple test case:




57 responses to “Flex ComboBox With selectedValue Support”

  1. Chris Avatar
    Chris

    Thanks! Just what I needed.

  2. jay Avatar
    jay

    You cannot assign the value in the commitProperties function. This causes the selectedItem value to not be available right away. Which will give you false results until the next validation routine runs.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
    <mx:Script>
    <![CDATA[
    import mx.events.ListEvent;
    public function set selectedValue(str:String):void{
    if( this.selectedValue == str ){ // if value already selected do nothing
    return;
    }
    for (var i:int=0;i<this.dataProvider.length;i++){// Loop through dataProvider
    if(this.dataProvider[i] == str){ // the match
    this.selectedIndex = i;// set selectedIndex
    //this.invalidateProperties();// Invalidate to force commit — not sure we need to do this
    this.dispatchEvent( new ListEvent( ListEvent.CHANGE ) ) // since we are changing it we need to dispatch it
    break;
    }
    }
    }
    public function get selectedValue( ):String{
    if( this.selectedIndex >= 0){
    return dataProvider[this.selectedIndex]
    }else{
    return ""; // could be an issue if there is an empty string label
    }
    }
    ]]>
    </mx:Script>
    </mx:ComboBox>

  3. Jay Avatar
    Jay

    You cannot assign the value in the commitProperties function. This causes the selectedItem value to not be available right away. Which will give you false results until the next validation routine runs.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
    <mx:Script>
    <![CDATA[
    import mx.events.ListEvent;
    public function set selectedValue(str:String):void{
    if( this.selectedValue == str ){ // if value already selected do nothing
    return;
    }
    for (var i:int=0;i<this.dataProvider.length;i++){// Loop through dataProvider
    if(this.dataProvider[i] == str){ // the match
    this.selectedIndex = i;// set selectedIndex
    //this.invalidateProperties();// Invalidate to force commit — not sure we need to do this
    this.dispatchEvent( new ListEvent( ListEvent.CHANGE ) ) // since we are changing it we need to dispatch it
    break;
    }
    }
    }
    public function get selectedValue( ):String{
    if( this.selectedIndex >= 0){
    return dataProvider[this.selectedIndex]
    }else{
    return ""; // could be an issue if there is an empty string label
    }
    }
    ]]>
    </mx:Script>
    </mx:ComboBox>

  4. Luis Avatar
    Luis

    How would this example to Flash Builder 4?

  5. Daniel Avatar
    Daniel

    This doesn’t seem to work in Flex 4, any ideas?

  6. rahul Avatar
    rahul

    Thanks alot….

  7. ahmar Avatar
    ahmar

    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009&quot;
    xmlns:s="library://ns.adobe.com/flex/spark"
    title="Rate Search">
    [Binndable]
    public var arr:ArrayCollection=new ArrayCollection([{ origincity: "new delhi" },{ origincity: "new york" }{ origincity: "London" }]);
    <fx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    import mx.events.FlexEvent;
    import mx.utils.ArrayUtil;
    protected function Button1_clickHandler(event:MouseEvent):void
    {
    Combobox1.dataProvider=arr;
    Combobox1.labelField="origincity"
    Lbl1.text=Combobox1.selectedItem.origincity
    }
    ]]>
    </fx:Script>
    <s:ComboBox id="ComboBox1/>
    <s:Button id="Button1"/>
    <s:Label id="Lbl1" text=""/>
    </s:view>

Leave a Reply