title: Bindable combobox - selected item/index
body: <p>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.</p>
  
  <p>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?</p>
  
  <p>(the same happens if you use the CRUD wizard in Flex builder 3 for ColdFusion)</p>
  
  <p>I am using the following code for my custom combobox:</p>
  
  <pre><code>&lt;mx:ComboBox
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns="*" 
    creationComplete="componentInit()"
  &gt;
    &lt;mx:Script&gt;
  &lt;![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 &lt; labelFields.length; i++) {
         if (i &gt; 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 &lt; 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 &amp;&amp; selectedItem != null) {
      return selectedItem[valueField];
    } else {
      return text;
    }
  }
  ]]&gt;
      &lt;/mx:Script&gt;
  &lt;/mx:ComboBox&gt;
  </code></pre>
  
  <p>and the MXML part calling the combox is:-</p>
  
  <pre><code>&lt;mx:DataGrid id="clientDatagrid" selectedIndex="1" visible="true"/&gt;
  &lt;mx:Form height="305"&gt;
  
    &lt;mx:FormItem direction="horizontal" label="Surname" required="true" visible="true" width="100%" horizontalAlign="left"&gt;
       &lt;mx:TextInput enabled="true" id="Surname" text="{clientDatagrid.selectedItem.Surname}" width="100%" visible="true"/&gt;
    &lt;/mx:FormItem&gt;
  
    &lt;mx:FormItem direction="horizontal" label="Forename" required="true" visible="true" width="100%" horizontalAlign="left"&gt;
       &lt;mx:TextInput enabled="true" id="Forename" text="{clientDatagrid.selectedItem.Forename}" width="100%" visible="true"/&gt;
    &lt;/mx:FormItem&gt;
  
    &lt;components:BindableComboBoxa id="gender"
                dataProvider="{genderData}"
                valueField="Code"
                labelField="Description"
                /&gt;
  
  &lt;/mx:form&gt;
  </code></pre>
  
  <p>Any help would be much appreciated.</p>
  
  <p>Thank you.</p>