Question

I have a datagrid with 2 columns. I need to access the item renderer of the second column whenever column-1 value changes. i.e if value of column 1 is A- need to display text field in column2 and if value is B, i need to show dropdown.

Col1———-Col2

A ———- DropDown

B ———- TextBox

A ———- DropDown

Any Solutions???

public class ItemRendererfroDropTest extends GridItemRenderer
{
    private var dropdown:DropDownList;
    public function ItemRendererfroDropTest()
    {
        super();
        dropdown=new DropDownList();
        dropdown.dataProvider=new ArrayCollection(new Array("ABC","PQR"));
        this.addElement(dropdown);
        dropdown.addEventListener(FlexEvent.VALUE_COMMIT,dataChanged);
    }

    private function dataChanged(event:FlexEvent):void
    {
        owner.dispatchEvent(new CustomEvent(CustomEvent.DATA_CHANGED,true));
    }

}


public class ItemRenderlabel extends GridItemRenderer
{
    public var wlabel:Label=new Label();
    public var checkbox:CheckBox=new CheckBox();

    public function ItemRenderlabel()
    {
        super();
        this.addEventListener(CustomEvent.DATA_CHANGED,mappingChanged,true);
        this.addElement(wlabel);
    }
    private function mappingChanged(e:CustomEvent):void
    {
        Alert.show("asfAS");
    }
}

Answer 1

You can get some idea from below code: – Event you can do it only for particular item by using dpHierarchy.itemUpdated() by updating individual row.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            private var dpHierarchy:ArrayCollection= new ArrayCollection([
                {name:"A", region: "Arizona"},
                {name:"B", region: "Arizona"},
                {name:"C", region: "California"},
                {name:"D", region: "California"}
            ]); 

            private function init():void
            {
                this.addEventListener(FlexEvent.DATA_CHANGE, changeDataHandler);
            }

            private function changeDataHandler(event:FlexEvent):void
            {
                dpHierarchy.refresh();
            } 
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG" 
                         width="100%" height="100%" 
                         variableRowHeight="true" dataProvider="{dpHierarchy}">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="name" headerText="Name" itemRenderer="AddComboboxADG"/>
            <mx:AdvancedDataGridColumn dataField="region" headerText="Region" itemRenderer="SelectedCustomComponent"/>
        </mx:columns>   

    </mx:AdvancedDataGrid>

</s:Application>

//AddComboboxADG custom item renderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer 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[
            import mx.controls.AdvancedDataGrid;
            import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
            import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
            import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
            import mx.events.AdvancedDataGridEvent;
            import mx.events.DataGridEvent;
            import mx.events.FlexEvent;
            import mx.events.ItemClickEvent;

            import spark.components.supportClasses.ItemRenderer;
            import spark.events.IndexChangeEvent;


            protected function comboBoxID_changeHandler(event:IndexChangeEvent):void
            {
                data.name = comboBoxID.selectedItem;
                dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE, true));
            }

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

                if(data.name == "A")
                {
                    comboBoxID.selectedIndex = 0;
                }else if(data.name == "B")
                {
                    comboBoxID.selectedIndex = 1;
                }else if(data.name == "C")
                {
                    comboBoxID.selectedIndex = 2;   
                }else
                {
                    comboBoxID.selectedIndex = 3;
                }
            }

        ]]>
    </fx:Script>

    <s:DropDownList id="comboBoxID" change="comboBoxID_changeHandler(event)">
        <s:ArrayCollection>
            <fx:String>A</fx:String>
            <fx:String>B</fx:String>
            <fx:String>C</fx:String>
            <fx:String>D</fx:String>
        </s:ArrayCollection>
    </s:DropDownList>
</s:MXAdvancedDataGridItemRenderer>

//SelectedCustomComponent custom item renderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer 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[
            override public function set data(value:Object):void
            {
                super.data = value;
                customFirstDropDown.visible = customTextInput.visible = customSecondDropDown.visible = lblData.visible = false;

                if(data.name == "A")
                {
                    customFirstDropDown.visible = true;
                }else if(data.name == "B")
                {
                    customTextInput.visible = true;
                }else if(data.name == "C")
                {
                    customSecondDropDown.visible = true;    
                }else
                {
                    lblData.visible = true;
                }
            }
        ]]>
    </fx:Script>

    <s:DropDownList id="customFirstDropDown" visible="false" selectedIndex="0">
        <s:ArrayCollection>
            <fx:String>First</fx:String>
            <fx:String>Second</fx:String>
            <fx:String>Third</fx:String>
        </s:ArrayCollection>
    </s:DropDownList>
    <s:TextInput id="customTextInput" visible="false" text="Selected"/>
    <s:DropDownList id="customSecondDropDown" visible="false" selectedIndex="0">
        <s:ArrayCollection>
            <fx:String>1</fx:String>
            <fx:String>2</fx:String>
            <fx:String>3</fx:String>
        </s:ArrayCollection>
    </s:DropDownList>   

    <s:Label id="lblData" visible="false" text="Selected"/>
</s:MXAdvancedDataGridItemRenderer>