actionscript-3apache-flexdatagridflex4.5itemrenderer

Using itemRenderer in mx Datagrid


I have a mx DataGrid with 2 column. The first column has its data rendered in a TextInput and the second column renderer in a ComboBox. When I change the selected value in the ComboBox, I want the TextInput of the same index to have its text changed to the value selected in the ComboBox. Can anyone help me with this? My code is below.

<mx:DataGrid id="myGrid" rowHeight="25" dataProvider="{Testarray}" width="100%" height="205" chromeColor="#D0CCAF" headerHeight="0" showHeaders="false" >
                <mx:columns>
                    <mx:DataGridColumn headerText="My Header 1"                                                                        
                                       editable="true"                                                                        
                                       dataField="LBL"                                                                            
                                       >
                        <mx:itemRenderer>
                            <fx:Component>
                                <mx:HBox horizontalAlign="left" horizontalScrollPolicy="off" verticalScrollPolicy="off">



                                    <s:TextInput id="label_txt" text="{data.LBL}" width="98%"/>
                                </mx:HBox>
                            </fx:Component>
                        </mx:itemRenderer>
                    </mx:DataGridColumn>    

                    <mx:DataGridColumn headerText="My Header 2"                                                                       
                                       editable="true"                                                                                
                                       rendererIsEditor="true"                                                                        
                                       dataField="ALIAS"                                                                            
                                       >
                        <mx:itemRenderer>
                            <fx:Component>

                                    <renderers:comboItemRenderer height="80%" change="comboitemrenderer1_changeHandler(event)" lookupField="ALIAS" labelField="ALIAS" dataProvider="{outerDocument.searchCustomizationComponents_array}">
                                        <fx:Script>
                                            <![CDATA[
                                                import mx.events.DataGridEvent;
                                                import mx.events.ListEvent;

                                                protected function comboitemrenderer1_changeHandler(event:ListEvent):void
                                                {
                                //WHAT TO PUT HERE?
                                                }

                                            ]]>
                                        </fx:Script>

                                    </renderers:comboItemRenderer>
                            </fx:Component>
                        </mx:itemRenderer>
                    </mx:DataGridColumn>

                </mx:columns>
            </mx:DataGrid>

Solution

  • I got it myself. Thanks buddies.
    I needed to add these 2 lines of codes for the textInput to take the value of the selectedItem int he ComboBox.
    protected function comboitemrenderer1_changeHandler(event:ListEvent):void
                                                    {
                                                        outerDocument.myGrid.dataProvider[outerDocument.myGrid.selectedIndex]['LBL'] = this.selectedItemKey; 
                                                        outerDocument.myGrid.invalidateList();
    
                                        }
    Also note that the code for my comboitemrenderer below:
        <mx:ComboBox
            xmlns:mx="http://www.adobe.com/2006/mxml" 
            dataChange="setSelected()" 
            change="onSelectionChange(event)"
            focusEnabled="true">
            <mx:Script>
                <![CDATA[
                    import mx.events.DataGridEvent;
                    import mx.events.ListEvent;
                    import mx.controls.dataGridClasses.DataGridListData;
    
                    private var _ownerData:Object;
                    private var _lookupField:String = "value";
    
                    // When using this component as an itemEditor rather than an itemRenderer
                    // then set ' editorDataField="selectedItemKey"' on the column to 
                    // ensure that changes to the ComboBox are propogated.
                    [Bindable] public var selectedItemKey:Object;
    
                    public function set lookupField (value:String) : void {
                        if(value) {
                            _lookupField = value;
                            setSelected();
                        }
                    }           
                    override public function set data (value:Object) : void {
                        if(value) {                    
                            _ownerData = value;
                            setSelected();
                        }
                    }
                    override public function get data() : Object {
                        return _ownerData;
                    }            
                    private function setSelected() : void {
                        if (dataProvider && _ownerData) {
                            var col:DataGridListData = DataGridListData(listData);
                            for each (var dp:Object in dataProvider) {
                                if (dp[_lookupField] == _ownerData[col.dataField]) {
                                    selectedItem = dp;
                                    selectedItemKey = _ownerData[col.dataField];
                                    return;     
                                }
                            }                    
                        }
                        selectedItem = null;
                    }
                    private function onSelectionChange (e:ListEvent) : void {
                        if (selectedItem && _ownerData) {                    
                            var col:DataGridListData = DataGridListData(listData);
                            _ownerData[col.dataField] = selectedItem[_lookupField];
                            selectedItemKey = selectedItem[_lookupField];
    
        }
                    }                   
                ]]>
            </mx:Script>    
        </mx:ComboBox>