Modified version of Zoids custom combo box to allow preselected value

This post is more than 2 years old.

Wow that title sounds complex. If you don't remember, a few hours ago I blogged about an article that Boyzoid wrote about how easy it was to do a custom component in Flex 2. His example added a new method to ComboBox, selectedItemByValue.

What if you wanted to set the selected item when the component is created? I made these modifications to Zoid's code:

<?xml version="1.0" encoding="utf-8"?> <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="checkSelected()">

<mx:Script> <![CDATA[ [Bindable] public var defaultSelectedValue:int;

public function selectedItemByValue(val:int):void{ for (var i:int=0;i<this.dataProvider.length;i++){ var item:int = this.dataProvider[i].data;

	if(item == val){
		this.selectedIndex = i;
		break;
	} else{ this.selectedIndex = 0;}
}

}

private function checkSelected():void { selectedItemByValue(defaultSelectedValue); } ]]> </mx:Script>

</mx:ComboBox>

Note first the use of creationComplete in the top tag. That just means - run checkSelected() when done. I then created a new public variable named defaultSelectedValue. My checkSelected function simply then calls the function Boyzoid had written. This then lets me do the following in the calling code:

<comp:customComboBox dataProvider="{comboData}" id="myCombo2" defaultSelectedValue="2" /> <comp:customComboBox dataProvider="{comboData}" id="myCombo3" defaultSelectedValue="3" /> <comp:customComboBox dataProvider="{comboData}" id="myCombo4" />

Not sure if this is best practice or not - and I did guess at a few things, but I thought I'd share.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Scott Stroz posted on 11/23/2006 at 5:29 AM

Ray - That is exactly why I created that custom component to begin with.

Comment 2 by Raymond Camden posted on 11/23/2006 at 6:52 AM

Scott - how did you do it? Did I do it right? I mean it works obviously - but do you have any suggestions?

Comment 3 by Ben Forta posted on 11/23/2006 at 9:05 AM

Here's another solution: http://www.forta.com/blog/i...

Comment 4 by Mike Nimer posted on 11/23/2006 at 11:27 AM

You should check out the com.adobe.ColdFusion.BindableCombobox and ..BindableList components that are generated when you run the ColdFusion/Flex application wizard too.

It does the same thing, except it does it by adding 1 new property "valueField" to know which property of the dataprovider 'objects' to compare against. And it sets the data value by overriding the selectedItem property.

Comment 5 by Mike Nimer posted on 11/23/2006 at 11:27 AM

You should check out the com.adobe.ColdFusion.BindableCombobox and ..BindableList components that are generated when you run the ColdFusion/Flex application wizard too.

It does the same thing, except it does it by adding 1 new property "valueField" to know which property of the dataprovider 'objects' to compare against. And it sets the data value by overriding the selectedItem property.

Comment 6 by Raymond Camden posted on 11/24/2006 at 7:04 AM

Thanks for the pointer Mike. Is there a "CFLib for Flex" yet?

Comment 7 by Mike Nimer posted on 11/25/2006 at 7:57 PM

not sure, however, there is a developers exchange for flex on adobe.com. (last I checked there was only 1 entry).

Comment 8 by Raymond Camden posted on 11/25/2006 at 8:02 PM

I'll write a blog entry and see what it fleshes out. There -must- be one somewhere. I can't believe there wouldn't be.

Comment 9 by prashant shelke posted on 2/16/2007 at 2:11 PM

hi.

i have problem regarding showing checkboxes in custom combobox in order to do multiselect functionality.

can u please help me ?

thanks in advance.

Comment 10 by Don Kerr posted on 8/17/2007 at 2:10 AM

Has anyone modified this for dataGrids with allowMultipleSelections?

I have several cases where I need to pre-select default items in a dataGrid.

default items come from my CFC. For example, mydefaults.dataProvider is a query containing CategoryID, Category.

mydataGrid.dataProvider also contains CategoryID and Category.

Seems like I'd need to do a nested loop comparing the mydataGrid.dataProvider[i].categoryID to defaults.dataProvider[j].categoryID? or is there an easier way?

I love Flex! But...ColdFusion sure did make life easier with CFSELECT!

Don

Comment 11 by Daniel Villalobos posted on 7/23/2010 at 1:18 AM

Hi everybody, Thanxz for your Example is Great!

I modified to This:

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="checkSelected()">

<mx:Script>
<![CDATA[
[Bindable]
public var defaultSelectedValue:int;

public function selectedItemByValue(val:int):void{
var item:Object;
for (var i:int=0;i<this.dataProvider.length;i++)
{
item = this.dataProvider[i];
if(item!=null)
{//id= attribute of object.
if (item.id == val)
{
this.selectedIndex = i;
break;
}
else
{
this.selectedIndex = 0;
}
}

}
}

private function checkSelected():void {
selectedItemByValue(defaultSelectedValue);
}
]]>
</mx:Script>

</mx:ComboBox>