(EDIT: See my answer provided below as a possible solution)

I have a datagrid where each datagridcolumn is using different itemrenderers. One of these renderers in one of the columns is a List component full of values. The text shown in the list component are labels of it's dataprovider.

What I would like to do is make the List component column itemrenderer an itemeditor. This means that the user clicks on the cell in the column and a list of values shows up (NOT a drop down). They can then choose multiple values from the list component. When they click out of the List component, the column shows the values chosen.

When they SAVE their choices (via a save button outside of the datagrid in question), I would like to reference that data to determine what choice they have made - HOWEVER - instead of the label, I would like to get the number associated to that label. I do this with XML:

<colors>
<color label="Green" value="1"/>
<color label="Yellow" value="2"/>
<color label="Red" value="3"/>
</colors>

Now, the itemeditor part is great as it works fine for visually seeing your choices after you have clicked outside of the cell. However, I would like to identify the value of the chosen color ("3") and do this for each value chosen in this list.

This should be identified naturally by the following datagridcolumn (CheckList is simply a List that allows multiple selection without holding the CTRL key down) using the given dataprovider for this column:

<colorData chosenColors=''/>

Here is the sample code:

<mx:DataGridColumn dataField="@chosenColors" editorDataField="colors" headerText="Colors" width="200" wordWrap="true">
                    <mx:itemEditor>
                        <fx:Component>
                            <s:MXDataGridItemRenderer focusEnabled="true" height="22" >
                                <fx:Script>
                                    <![CDATA[
                                        public function get colors():String {
                                            var str:String = new String;
                                            for(var i:int=0;i < colorList.selectedItems.length; i++){
                                                if(i > 0){
                                                    str += ",\n";
                                                }
                                                str += colorList.selectedItems[i].@label;

                                            }
                                            return str;
                                        }
                                    ]]>
                                </fx:Script>
                                <r:CheckList id="colorList"
                                                    dataProvider="{parentApplication.colors}"
                                                    labelField="@label" width="100%" height="150"/>
                            </s:MXDataGridItemRenderer>
                        </fx:Component>
                    </mx:itemEditor>
                </mx:DataGridColumn>

However, this simply replaces the XML with the following if, say, Green and Red were chosen:

<colorData chosenColors=' Green, Red'/>

Instead, I would like the resulting XML to be:

<colorData chosenColors=' 1, 3'/>

Please let me know how I can accomplish this - inline renderer or not, other implementation, etc. Thanks for your help!

Try this will help you.

Instead of getting label text from selectedItems get value attribute value like @value. So now become <colorData chosenColors='1, 3'/>.

public function get colors():String {

    var values:Array = [];
    
    for(var i:int=0;i < colorList.selectedItems.length; i++){       
        values.push(colorList.selectedItems[i].@value.toString()); //Note here
    }
    
    return values.toString();
}

1, 3 also display in grid as well. I 'm not sure what you expect at UI level. Still if you want display Color like Green, Red in UI level but at the same time you need to store value their respective node. In case create one more attribute in XML like

<colorData chosenColors='Green, Red' chosenValueColors='1,3' />. 

Here chosenColors for display purpose and chosenValueColors for might database or do for other things. Now you can expected value from attribute chosenValueColors from XML.

Based on comments

To acheive you requirement you need to override data getter/setter method in itemRenderer or you can use dataChange Event.

override public function get data():Object
{
    return super.data;
}

override public function set data(value:Object):void
{
    super.data = value;
    
    if(!value)
        return;
    
    var selectedValues:Array = value.@chosenColors.toString().split(","); //get selected value in array
    var selectedIndices:Vector.<int> = new Vector.<int>();
    
    for (var i:int = 0, len:int = colorList.dataProvider.length; i < len; i++) 
    {
        var color:XML = colorList.dataProvider[i] as XML;
        
        if(selectedValues.indexOf(color.@value.toString()) > -1)
            selectedIndices.push(i); //Store index of selected items
    }
    
    trace(selectedIndices.toString());
    
    colorList.selectedIndices = selectedIndices;
}

public function get colors():String {
    
    var values:Array = [];
    
    for(var i:int=0;i < colorList.selectedItems.length; i++){
        
        values.push(colorList.selectedItems[i].@value.toString());
    }
    
    return values.toString();
}

public function colorList_changeHandler(event:IndexChangeEvent):void
{
    data.@value = colors; //IMPORT Commit the selected value to dataProvider.
}

Note here we listen change event for commit value into dataprovider like change="colorList_changeHandler(event)"

 <r:CheckList id="colorList" change="colorList_changeHandler(event)"
            dataProvider="{parentApplication.colors}"
            labelField="@label" width="100%" height="150"/>