Question

I have a mx:Datagrid in witch I’d like to add a combobox as item renderer.

 <mx:DataGrid  id="dgEnsActes"
                             horizontalScrollPolicy="on"
                             dataProvider="{arListeDevis}"
                             width="100%" height="100%" >
                    <mx:columns>
                        <mx:DataGridColumn dataField="dvIndex"  headerText="" headerStyleName="dgHeader" fontWeight="normal" width="40"/>
                        <mx:DataGridColumn dataField="dvLibelle" headerText="Libellé" headerStyleName="dgHeader" wordWrap="true" fontWeight="normal" width="180"/>
                        <mx:DataGridColumn dataField="dvTotal" headerText="Total" headerStyleName="dgHeader" width="60" fontWeight="normal"/>
                        <mx:DataGridColumn dataField="dvStatut" headerText="Statut" 
                                           rendererIsEditor="true" editorDataField="result" itemRenderer="fr.inters.ui.itemRenderer.irComboEtatDevis"
                                           wordWrap="true" headerStyleName="dgHeader" fontWeight="normal" width="70"/>
                        <mx:DataGridColumn dataField="dvAcceptDirect" headerText="Création" headerStyleName="dgHeader" width="60" fontWeight="normal"/>

                    </mx:columns>

                </mx:DataGrid>

My custom item renderer is like that:

    <?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true">


    <fx:Script>
        <![CDATA[
            public var result:String="";
            [Bindable] var dpValue:Array=[
                {label:"Accepté", data:"Accepté"},
                {label:"Refusé", data: "Refusé"},
                {label:"En attente", data: "En attente"}];


            override public function set data(value:Object):void 
            {
                super.data = value;
                if (value != null) 
                {
                    var currentValue:String = value.size;
                    var len:int = dpValue.length;
                    for (var i:int = 0; i < len; i++) 
                    {
                        if (dpValue[i].data == currentValue) 
                        {
                            editor.selectedIndex = i;
                            break;
                        }
                    }
                }
            } 

            public function onChange():void 
            {
                var index:int = editor.selectedIndex;
                result = dpValue[index].data;
            }


        ]]>
    </fx:Script>
    <mx:ComboBox id="editor" dataProvider="{dpValue}" width="130" change="onChange()"/>

</s:MXDataGridItemRenderer>

But when I try to debug an error appear, the message is selectedIndex is undefined

Is someone to help me?

Thanks

Answer 1

Why don’t you use the combobox without a grid item renderer?

have a look at this sample at http://blog.flexmp.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:XML id="xml" source="weather.xml"/>
        <mx:DataGrid id="myDatagrid" dataProvider="{xml.city}"
                variableRowHeight="true" editable="true" rowHeight="50"
                width="300" height="300">
                <mx:columns>
                <mx:DataGridColumn dataField="Location"/>
                <mx:DataGridColumn dataField="Climate" editable="true" editorDataField="value">
                        <mx:itemEditor>
                                <mx:Component>
                                        <mx:ComboBox editable="true">
                                                <mx:dataProvider>
                                                        <mx:String>Mild</mx:String>
                                                        <mx:String>Hot</mx:String>
                                                        <mx:String>Foggy</mx:String>
                                                        <mx:String>Rainy</mx:String>
                                                        <mx:String>Snow</mx:String>
                                                </mx:dataProvider>
                                        </mx:ComboBox>
                                </mx:Component>
                        </mx:itemEditor>
                </mx:DataGridColumn>
                <mx:DataGridColumn dataField="CloudCoverPercent" editable="true" editorDataField="value"
                        itemEditor="CloudCover"/>
        </mx:columns>
        </mx:DataGrid>
</mx:Application>