Apache – Bindable combobox – selected item/index

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.