Bindable combobox - selected item/index - apache-flex

Question

I am trying to bind a datagrid item to a combox, so that when the user selects the item in the datagrid the form displays the selected data for editing, however one of my items is a combobox using a dataprovider.
I would like the item selected in the datagrid to match the selected item in the combobox, this part is fine however if my datagrid item is null then I cannot get the combox to set the selected index to -1?
(the same happens if you use the CRUD wizard in Flex builder 3 for ColdFusion)
I am using the following code for my custom combobox:
<mx:ComboBox
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
creationComplete="componentInit()"
>
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
import mx.controls.Alert;
[Bindable]
public var valueField:String = "";
[Bindable]
public var labelFields:Array = [];
public function componentInit():void {
this.labelFunction = renderLabelFunction;
}
public function renderLabelFunction(item:Object):String {
var result:String = "";
if (labelFields.length == 0) {
if (labelField != null) {
return item[labelField];
} else {
return item.toString();
}
}
else {
for(var i:int=0; i < labelFields.length; i++) {
if (i > 0) {
result += " ";
}
result += item[labelFields[i]];
}
}
return result;
}
override public function set selectedItem(val:Object):void {
//Alert.show(valueField +":" +ObjectUtil.toString(val));
if( this.valueField != null) {
for(var i:int=0; i < this.dataProvider.source.length; i++) {
var item:Object = this.dataProvider.source[i];
if ( item[valueField]== val ) {
// if it matches, make it selected.
this.selectedIndex = i;
break;
}
}
} else {
this.selectedIndex = -1;
}
}
public function get selectedItemValue():Object {
if( this.valueField != null && selectedItem != null) {
return selectedItem[valueField];
} else {
return text;
}
}
]]>
</mx:Script>
</mx:ComboBox>
and the MXML part calling the combox is:-
<mx:DataGrid id="clientDatagrid" selectedIndex="1" visible="true"/>
<mx:Form height="305">
<mx:FormItem direction="horizontal" label="Surname" required="true" visible="true" width="100%" horizontalAlign="left">
<mx:TextInput enabled="true" id="Surname" text="{clientDatagrid.selectedItem.Surname}" width="100%" visible="true"/>
</mx:FormItem>
<mx:FormItem direction="horizontal" label="Forename" required="true" visible="true" width="100%" horizontalAlign="left">
<mx:TextInput enabled="true" id="Forename" text="{clientDatagrid.selectedItem.Forename}" width="100%" visible="true"/>
</mx:FormItem>
<components:BindableComboBoxa id="gender"
dataProvider="{genderData}"
valueField="Code"
labelField="Description"
/>
</mx:form>
Any help would be much appreciated.
Thank you.

Answer 1

In selectedItem setter, testing this.valueField for nullity is useless because you set it to "Code" in the mxml. Instead you should test if val is null.
So just replace
if( this.valueField != null)
with
if( val != null)
and then it should work.

Answer 2

try setting a prompt for the combobox like this:
<components:BindableComboBoxa id="gender"
dataProvider="{genderData}"
valueField="Code"
labelField="Description"
prompt="Please Select"
/>