How to add a DropDown List in Flex DataGrid

Question

I am trying to add a DropDownList in a DataGrid table. After the user selects one of the items from the drop down list, the Item that I have selected is not reflected or did not get selected. I know I can use ComboBoxGridItemEditor to achieve the result I am asking for. But combo box is editable, I do not want the user to edit but just select from one of the choices in the list. That's my reason for trying to add a dropDownList in dataGrid.

Pls can u tell me how the selected item in my dropdownlist can be recognize and update the value of the cell in the dataGrid and save the value back to the data provider??

Problem : so when I try to select blue, the cell do not get updated, instead it remains red.

thanks Rekha.

 <fx:Script>
    <![CDATA[                
        import mx.collections.ArrayCollection;      
        [Bindable]
        private var myDP:ArrayCollection = new ArrayCollection([
            {label1:"Order #2314", quant:3, color:'red'},
            {label1:"Order #2315", quant:3, color:'red'}     
        ]); 


    ]]>
</fx:Script>

<s:DataGrid id="myDG" x="85" y="57" width="393" height="151" dataProvider="{myDP}"
            editable="true" variableRowHeight="true">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="label1" headerText="Order #" editable="false"/>                
            <s:GridColumn dataField="quant" headerText="Qty" editable="true"/>

            <s:GridColumn dataField="color" headerText="Color" editable="true">                     
                <s:itemEditor>
                    <fx:Component>                              
                        <s:GridItemEditor>                          
                            <s:DropDownList id="myDropList" requireSelection="true">
                                <s:dataProvider>
                                    <s:ArrayCollection>
                                        <fx:String>red</fx:String>
                                        <fx:String>blue</fx:String>
                                        <fx:String>green</fx:String>
                                    </s:ArrayCollection>                                        
                                </s:dataProvider>
                            </s:DropDownList>                               
                        </s:GridItemEditor>                         
                    </fx:Component>
                </s:itemEditor>                 
            </s:GridColumn> 

        </s:ArrayList> 
    </s:columns >
</s:DataGrid>

Raja Jaganathan Raja Jaganathan · Accepted Answer · 2013-01-28T10:14:23

Basically you need to update/save changed selectedItem to arraycollection via data getter/setter method in from custom itemrenderer.

Look at data[column.dataField] = value; this line saveback to arraycollection.

<s:GridColumn dataField="color" headerText="Color" editable="true">                     
    <s:itemEditor>
        <fx:Component>                              
            <s:GridItemEditor>              
            <fx:Script>
                <![CDATA[

                    import mx.core.FlexGlobals;
                    import mx.events.FlexEvent;

                    import spark.events.IndexChangeEvent;

                    override public function set value(newValue:Object):void {

                        cb.selectedItem = newValue;
                    }

                    override public function get value():Object {
                        return cb.selectedItem.toString();
                    }

                    override public function setFocus():void {
                        cb.setFocus();
                    }

                    override public function save():Boolean
                    {
                        data[column.dataField] = value;                                     
                        return true;
                    }
                ]]>
            </fx:Script>
            <s:DropDownList id="cb" requireSelection="true">
                <s:dataProvider>
                    <s:ArrayCollection>
                        <fx:String>red</fx:String>
                        <fx:String>blue</fx:String>
                        <fx:String>green</fx:String>
                    </s:ArrayCollection>                                        
                </s:dataProvider>
            </s:DropDownList>                               
        </s:GridItemEditor>                         
    </fx:Component>
</s:itemEditor>

How to add a DropDown List in Flex DataGrid

1 Answers