Bindable combobox - selected item/index

0
votes

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.

2
apache-flexflex3coldfusion
Code formatted. Boy, do you have an ugly way of indenting/laying out code. If you are forced to do it that way, you have my sympathy. If you do it like that voluntarily, then I don't know what to say. It made my eyes bleed. – Tomalak
Yeah, some people don't seem to care about code layout. Which is pretty sad really. – bug-a-lot

2 Answers

0
votes

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.

0
votes

try setting a prompt for the combobox like this:

<components:BindableComboBoxa id="gender"
              dataProvider="{genderData}"
              valueField="Code"
              labelField="Description"
              prompt="Please Select"
              />