Kusunam's Blog

Problem
Flex combobox by default do not support “selectedItem” where “dataProvider” is not one of the primitive data types (String). This gets more hairy if you have list of VO’s as it’s Data Provider.

Solutions
In my case my Data Provider is list of ValueVO’s which consists of two properties i.e. code (type: String) and description (type: String). We need to select one of the VO’s based on matching Code.

I have implemented a custom Combobox which extends Flex default Combobox and provides a method for “selectedItem”. This method loops through the list of ValueVO’s and checks for matching “code” property.

public class CustomSelectedComboBox extends ComboBox
{
     public function CustomSelectedComboBox()
     {
          super();
          this.rowCount = 10;
     }
     // value is the value you input that you want to search for.
     override public function set selectedItem(value:Object):void
     {
          if (value != null && selectedIndex == -1)
          {
               /** do a painful search */
               for each(var item:Object in this.collection)
               {
                    /**Vdata is the Arraycollection item you whant to search in.
                    So VData is the name of the item within the ArrayCollection */
                    if (item.code == value )
                    {
                        super.selectedItem=item;
                        break;
                    }
               }
          }
     }
}

This is how you use this custom combobox in MXML.

<custom:CustomSelectedComboBox     id="vehicleTypeCB"
                           dataProvider="{__model.initializerVO.vehicleTypeList}"
                           labelFunction="displayCodeAndDescription"
                           selectedItem="{__model.updateVO.vehicleType}"
                           prompt="Select one..."/>

 
Everything looks fine as you have added “dataProvider” and “selectedItem” and expects it to work. Guess what this will not work as expected and weird thing is it works sometime and doesn’t work some other time (just random). I was struggling on it for last 8 hrs and identified the problem, but did not find correct answer/ solution. But I have a work around to deal with it. Next question you would ask why is the above code is not working? From the above code in “selectedItem” we are expecting “dataProvider” to be set first as we are looping through it to find the VO which matches our “code” to select. But in this the order in which “dataProvider” and “selectedItem” called is not predictable.

Work around
I took “selectedItem” out of the above MXML and added following call in “creationComplete” method inside a container where I have this “customSelectedComboBox“.

vehicleTypeCB.selectedItem = __model.updateVO.vehicleType;

2 Responses so far | Have Your Say!

1. 

   GarykPatton
   June 16th, 2009 at 6:08 am #

   Hi! I like your srticle and I would like very much to read some more information on this issue. Will you post some more?

2. 

   CrisBetewsky
   July 6th, 2009 at 3:24 pm #

   You know, I don’t read blogs. But yours is really worth beeing read.