How to get the value of a ComboBox within a DataGrid

Question

While this may be a simple problem, I'm having a heck of a time coming up with a solution.

I have a DataGrid with a ComboBox as an ItemRenderer for one of my columns. When the user selects a row, I want to get the ComboBox's selected value for the selected row.

EDIT: I should have mentioned that the dataField2_Array property in myData is actually an Array is the dataProvider for the ComboBox. Each object in myData could have completely different values in that Array so the ComboBox in each row of the DataGrid could have completely different options to pick from.

Any suggestions?

Some sample code:

<mx:DataGrid id="myGrid"
  dataProvider="{myData}">
    <mx:columns>
      <mx:DataGridColumn headerText="Column 1" dataField="dataField1" />
      <mx:DataGridColumn headerText="Column 2" dataField="dataField2_Array">
        <mx:itemRenderer>
          <mx:Component>
            <mx:HBox paddingLeft="5">
              <mx:ComboBox id="myComboBox" dataProvider="{data.dataField2_Array}" />
            </mx:HBox>
          </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

Answer 1

<mx:DataGrid ="MyDataGrid">
<mx:columns>
<mx:DataGridColumn headerText="Resource" width="200" itemRenderer="com.myClasses.myGridDropdownRenderer"/>
</mx:columns>
</mx:DataGrid>

Here is your itemRenderer for your datagrid.

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox prompt="Please select a Rating" change="stuffChanged()" dataProvider="{data.dataField2_Array}"
     xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
<mx:Script>
        <![CDATA[
            import flash.events.Event;
            import mx.controls.Alert;
            import mx.core.Application;
            import mx.collections.ArrayCollection;



            override public function set data( value:Object ) : void {
                super.data = value;

            }



           public function stuffChanged():void{
               var myListData:DataGridListData = DataGridListData(listData);
               var r:int=myListData.rowIndex;
               var c:int=myListData.columnIndex;
              //Application.application.whateverStuff[r+1][c]=this.value;
               Application.application.whateverStuff[r+1][c]=
              this.selectedItem.data;
              }



        ]]>
    </mx:Script>

</mx:ComboBox>

This will be in your main Application which will be holding this value.

[Bindable] public var whateverStuff:ArrayCollection;

Now when your data is changed, it holds the data. You click on the button store this value in a rows object.

[Bindable] public var rows:Object = new Object();
rows=Application.application.whateverStuff; 

When your sending the value back to database, send all along with this rows object.

Update:

After i read your comment on the previous riposte, i came to know that each of your combo box has a different options. You should have mentioned it earlier.

When you click on the selected rows, you should able to collect the ID of the row, and this would ensure that only the ID of that row is getting updated in the database regardless even if you update your combo box of other rows.

Once your select a row, click and verify on which row ID you have selected using Alert or trace, then send that rows value alone through an event dispatcher.

Answer 2

Add a function called myGrid_click to the click event of your DataGrid:

<mx:DataGrid id="myGrid" dataProvider="{myData}" click="myGrid_click(event)" >

In this function, store the grid's selectedIndex and use that to get the object out of its dataProvider (let's say it's an array of MyObjects, and we're interested in the dataField2 property of these MyObjects):

public function myGrid_click(event:MouseEvent):void {
    var index:int = myGrid.selectedIndex;
    var obj:MyObject = myData[index];
    var value:String = obj.dataField2;
}

If, as is often the case, the object isn't storing the real value, and is just storing an index to a lookup table (dataField2_Array?), write a for loop to iterate over dataField2_Array looking for that value (actualValue) and assign it to a previously declared variable of greater scope (selectedRowComboBoxValue):

public function myGrid_click(event:MouseEvent):void {
    var index:int = myGrid.selectedIndex;
    var obj:MyObject = myData[index];
    var value:int = obj.dataField2;

    for (var i:int = 0; i < dataField2_Array.length; i++) {
        if (value == dataField2_Array[index].id) {
            selectedRowComboBoxValue = dataField2_Array.actualValue;
            break;
        }
    }
}