Using a ComboBox as ItemEditor in Flex 4

Question

I have a simple DataGrid with data. Of one of the columns, I want to use a ComboBox to edit the field, instead of the standard edit box.

How do I do that? I have tried all kind of things I found on the internet, but they all fail in simply updating the value. I'd say it shouldn't be too hard to do this.

Answer 1

I figured it out. I just wanted a simple drop down box, instead of a text-editing field.

The following code does want I want:

        <mx:DataGridColumn dataField="type" headerText="Type" editorDataField="value">
            <mx:itemEditor>
                <fx:Component>
                    <mx:ComboBox>
                        <mx:dataProvider>
                            <fx:String>Gauge</fx:String>
                            <fx:String>Graph</fx:String>
                            <fx:String>Indicator</fx:String>
                        </mx:dataProvider>
                    </mx:ComboBox>
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>

Answer 2

I'm actually in the process of doing this myself, and with the spark:DataGrid it actually gets a bit easier than halo - but both follow the same setup / architecture.

Start with:

spark.components.gridClasses.ComboBoxGridItemEditor;

Depending on the nature of your data setup and/or how prolific this kind of editing will be for your application, you can write it inline as most documentation will suggest within a <fx:component>, or simply subclass this (although behind the scenes these are the same thing - the later being much easier to reuse). The data for the combo in my scenario is a sub selection of a bigger parent object, so I chose to make it easier on myself and add an additional property dataField to mimic other renderer / editors - in what actually shows in just the cell itself (when not in editing mode).

A basic setup looks something more or less like this (at least mine does):

public class AccountComboEditor extends ComboBoxGridItemEditor
{
     private _dataField:String;

     public function AccountComboEditor()
     {
         super();
         //note - typically you wouldn't do "logic" in the view but it's simplified as an example
         addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
     }

     public function get dataField():String { return _dataField; }

     public function set dataField(value:String):void
     {
         if (_dataField !=value) //dosomeadditionalvalidation();
         _dataField = value;
     }


     override public function prepare():void
     {
        super.prepare();

        if (data && dataField && comboBox) comboBox.labelField = data[dataField];
     }

     protected function onCreationComplete(event:FlexEvent):void
     {
         //now setup the dataProvider to your combo box - 
         //as a simple example mine comse out of a model

         dataProvider = model.getCollection();
         //this isn't done yet though - now you need a listener on the combo to know
         //what item was selected, and then get that data_item (label) back onto this 
         //editor so it has something to show when the combo itself isn't in
         //editor mode
     }
}

So the real take away is to setup the labelField of the combobox, either internally in the subclass or externally if you need to expose it as an additional property.

The next part is to use this as part of the mx.core.ClassFactory for the actual data grid. A simple view would look like something similar:

<s:DataGrid>
   <fx:Script>
        private function getMyEditor(dataField:String):ClassFactory
        {
           var cf:ClassFactory = new ClassFactory(AccountComboEditor);
               cf.properties = {dataField : dataField };
           return cf;
        }
   </fx:Script>

   <s:columns>
      <mx:ArrayList>
         <s:GridColumn itemEditor="{getMyEditor('some_data_property')}" />
      </mx:ArrayList>
   </s:columns>
</s:DataGrid>

This Creating item renderers... doc will give you more info.