xml - Flex Datagrid Itemeditor: Show Label of choice, but retrieve value at commit -

(edit: see answer provided below possible solution)

i have datagrid each datagridcolumn using different itemrenderers. 1 of these renderers in 1 of columns list component full of values. text shown in list component labels of it's dataprovider.

what make list component column itemrenderer itemeditor. means user clicks on cell in column , list of values shows (not drop down). can choose multiple values list component. when click out of list component, column shows values chosen.

when save choices (via save button outside of datagrid in question), reference data determine choice have made - - instead of label, number associated label. xml:

<colors> <color label="green" value="1"/> <color label="yellow" value="2"/> <color label="red" value="3"/> </colors> 

now, itemeditor part great works fine visually seeing choices after have clicked outside of cell. however, identify value of chosen color ("3") , each value chosen in list.

this should identified naturally following datagridcolumn (checklist list allows multiple selection without holding ctrl key down) using given dataprovider column:

<colordata chosencolors=''/> 

here 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 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, replaces xml following if, say, green , red chosen:

<colordata chosencolors=' green, red'/> 

instead, resulting xml be:

<colordata chosencolors=' 1, 3'/> 

please let me know how can accomplish - inline renderer or not, other implementation, etc. help!

try you.

instead of getting label text selecteditems value attribute value @value. become <colordata chosencolors='1, 3'/>.

public function 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 display in grid well. 'm not sure expect @ ui level. still if want display color green, red in ui level @ same time need store value respective node. in case create 1 more attribute in xml

<colordata chosencolors='green, red' chosenvaluecolors='1,3' />.  

here chosencolors display purpose , chosenvaluecolors might database or other things. can expected value attribute chosenvaluecolors xml.

based on comments

to acheive requirement need override data getter/setter method in itemrenderer or can use datachange event.

override public function 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>();      (var i:int = 0, len:int = colorlist.dataprovider.length; < len; i++)      {         var color:xml = colorlist.dataprovider[i] xml;          if(selectedvalues.indexof(color.@value.tostring()) > -1)             selectedindices.push(i); //store index of selected items     }      trace(selectedindices.tostring());      colorlist.selectedindices = selectedindices; }  public function 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 selected value dataprovider. } 

note here listen change event commit value dataprovider change="colorlist_changehandler(event)"

 <r:checklist id="colorlist" change="colorlist_changehandler(event)"             dataprovider="{parentapplication.colors}"             labelfield="@label" width="100%" height="150"/>