Flex ComboBox With selectedValue Support

Ben - quick question. You mentioned that the dataProvider was being populated by a call to a CFC. If you set selectedValue before the dataprovider is populated with data from the CFC, I assume the correct value will still be selected. How is this happening? Is commitProperties called when the dataProvider is populated with data?

Ben - Thanx! This opens up a lot of possibilities for other custom components.

Lifesaver! I had written some really convoluted, long-winded function to set my selectedIndex property. This is great. Thanks again..

I extended the ComboBox a little bit. You can now define the dataField (Default: data), so you can easily point to the right field.

Here's the code:
http://www.tristanhauser.com/flex/ExtendedComboBox...

Ben,

I noticed in your example you used an Array with static data to set the combo box values. Would it be possible to show an example using mx:WebService?

this is my solution:
public function initCombobox(obj:Object):void{
            for(var i:int=0;i<obj.dataProvider.length;i++){
               var selected:String = obj.dataProvider[i].selected;
               
               if(selected != null){
                  if(selected == "true"){
                     obj.selectedIndex = i;
                     break;
                  }
               }
            }
         }

<area>
<item label="??" data="-1" />
<item label="??" data="0570" />
<item selected="true" label="??" data="0571" />
<item label="??" data="0572" />
<item label="??" data="0573" />
<item label="??" data="0574" />
<item label="??" data="0575" />
<item label="??" data="0576" />
<item label="??" data="0577" />
<item label="??" data="0578" />
<item label="??" data="0579" />
<item label="??" data="0580" />
</area>

Ben Forta you rock! I'm new to Flex and been having some adjustments coming from a pure Cold Fusion background. I was surprised to find the orginal Flex Combobox without a direct selectvalue property. I spent too much time trying to figure this out. I'm so glad you write this custom component....life saver.

Thanks to wujian's post I was finally able to overcome this frustrating obstacle. However being a coldfusion /.net developer, it seems to me that this is something that should be built into the component. I'm just learning flex/as3 and finding I'm writing volumes of code to do the simplest mundane things. This is what makes ASP.NET so popular, the controls do all the heavy lifting and much of this grunt coding is built into the controls themselves. Flex is supposed to be an RIA langueage remember. Ben please pass my frustions and opinions on to the flex team. I DONT WANT TO WRITE CODE THAT SHOULD BE BUILT INTO A COMPONENT!
Just my 2 cents. I feel better now. :-)

(flex newbie here)

thanks for this... but how do i 'bind' the selected index to a datagrid selection?
ie, something like, ideally:
<comp:ComboBox2 x="112" y="39" dataProvider="{rstClients}" selectedValue="<b>{surveyGrid.selectedItem.SCLIENTNAME}</b>" labelField="SCLIENTNAME" width="205" />

compared to textinput controls' bindings, triggering combobox updates through datagrid's itemfocusin seems 'dirty'.

This is a very delayed reply to Joe's query above.
You could try this.scrollToIndex(i);

I tried the this.scrollToIndex(i); It doesn't scroll to the right position and my datagrid shows empty rows when I scroll up and down with the mouse. And then they will appear after a while. Any suggestions?

Jaqueline

Thank you. I had the same problem of the dataprovider not being populated at the time of the control creation. This is a very clean implementation.

Hi Ben,

Thanks for this great extension to the ComboBox! Thanks mostly for commenting the code because I was having so much trouble getting this thing to work. It turned out I was setting the dataProvider with databinding, BEFORE I populated the dataProvider.

Making the call to set dataProvider right after populating my label data object did the trick. I'm planning on always using this ComboBox.

Question, why doesn't the Flex framework already define a selectedValue method for mx:ComboBox in the first place, does it have anything to do with data binding?

thanks,

Derek

Tristan, great work! :-) This is what I really wanted!

Let's hope that Adobe will add this into Flex 3 .... it's really not to have this very basic functionality in a combobox!

thnx

Great post! My previous - less elegant solution was to use a helper function to convert the item to an index...

public function findItemIndex( dp:IList, data:String ):int
{
for( var i:int = 0; i < dp.length; ++i )
{
if( dp.getItemAt(i).data == data )
return i;
}
return -1;
}

&lt;mx:ComboBox dataProvider="{myDP}" selectedIndex="{findItemIndex(myDP, selectedItem) }" /&gt;

Thanks Ben! This is amazing.

In case anyone wants to make their comboBox default to the size of the DataProvider (it defaults to a drop down of only a few items and you have to scroll to the rest) then you can add code like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml";
    rowCount="{myDataProvider.length}">

Thanks Ben! This helps!

You Rule! This saved me a lot of time.

Thanks Ben.

If your dataprovider is ever updated the selectedValue will be lost and the comboBox will reset itself to the first value in the list. You can fix this by changing the set dataProvider function and adding bSelectedValueSet = true as follows:

if (o!=null && o.length)
{
// Got it, set flag
bDataProviderSet = true;
bSelectedValueSet = true;
}

Ben, thx for posting this. It works great. I was creating a new property on my object called "propIndex" and dynamically setting it when my "prop" property was being set by a setter. However, even though the propIndex was bindable, and the data was changing, the combobox didn't change. I switched to your combobox and set selectedValue = {prop} and it works great. THX!!

I dont get it. Im using this component NEXT to a datagrid. I select a row in the datagrid and the ComboBox changes how I want it to. But now I want to be able to change the combobox and sent that to a server but I can only seem to get the index. I want the label and data. when I use code hinting, It shows me that I can now use the slectedValue but it causes an error. How do I see all the values assosiated with the combo box, Label, Data?

In my flex app, I have 2 datagrids and when the app opens both datagrids get populated with data, dg2 visibilty is set to false; dg1 visibility is set to true. When the user clicks on a row in dg1, it populates combo boxes with that row data. That all works according your suggestion above (Thx!). I have a button, when clicked, it makes visible dg2. When I click on the button, dg2 becomes visible but then I want to be able to populate the same combo boxes with the row data in dg2. However, I've tried it and nothing gets selected in the combo boxes. any suggestions or examples? I'm using flex 3. Any help is appreciated.

Thanks a lot....

For Xml list
=============================================
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns:ns2="myComponents.*">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;
private var helpWindow:IFlexDisplayObject;
private var books:XML = <books>
<book publisher="Addison-Wesley" name="Design Patterns" ids="0"/>
<book publisher="Addison-Wesley" name="The Pragmatic Programmer" ids="1"/>
<book publisher="Addison-Wesley" name="Test Driven Development" ids="2"/>
<book publisher="Addison-Wesley" name="Refactoring to Patterns" ids="3"/>
<book publisher="O'Reilly Media" name="The Cathedral & the Bazaar" ids="4"/>
<book publisher="O'Reilly Media" name="Unit Test Frameworks" ids="5"/>
</books>;
private function his():void {
xselect.selectedValue = "5";
}
]]>
</mx:Script>
<ns2:xmlcmbbox id="xselect" dataProvider="{books.book}" labelField="@name" />
<mx:Button click="his();" label="hiss"/>
</mx:Application>
=============================================================
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml";>
<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].@ids;
// 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>
============================================================

Why would I get always get [object Object] when I switch from the regular combobox to this one? I am using a webservice connected to a CFC.

Very close to what I want to do.

This solution works until you set the combobox to be editable.

What I am trying to has three indexes in the combobox (-1, 0, and one that the user can type in a value). Using your solution I can make the combobox value aware, but as soon as I flag the combobox as editable it will no longer lets me submit a value.

Does anyone have a work around for that?

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">;

<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>