How To set selected Item for DropDownList On DataGrid in Adobe Flex?

Question

I have DropDownList rendered on DataGrid. My Datagrid consist of two columns, first column consist Name of Item while second column consists DropDownList(with labels to assign to that item).

I'm able to load to fetch label values from database and load them to DropDownList.

so each row consists Item name and DropDownList with label data loaded into it.

Now what I want is, I want each drop down to show Label associated to that particular Item.

My Flex Code:

<mx:DataGrid id="IdDgItemLabelDisp" left="10" right="10" top="39" bottom="10" dataProvider="{arrAllItem}">
<mx:columns>
    <mx:DataGridColumn dataField="itemName" headerText="Item Name"/>
    <mx:DataGridColumn headerStyleName="dataGridHeadingStyle" headerText="Label">
        <mx:itemRenderer>
            <fx:Component>
                <mx:HBox horizontalAlign="center">
                    <fx:Script>
                        <![CDATA[
                        ]]>
                    </fx:Script>
                    <s:DropDownList id="IdCmbItemLabel" dataProvider="{outerDocument.arrLabelCombo}" selectedItem="{outerDocument.arrLabelCombo.getItemAt(0)}">                                                             
                    </s:DropDownList>
                </mx:HBox>
            </fx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>
</mx:columns>

So you want the selectedItem in the dropdown as per the row data which is defined in arrAllItem, right? — gbdcool

gbdcool gbdcool · Accepted Answer · 2017-04-06T20:08:55

If you want the selectedItem in the dropdown as per the row data which is defined in arrAllItem, then here is the solution:

<?xml version="1.0"?>
<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">
<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    private var arrAllItem:ArrayCollection = new ArrayCollection([
        {itemName: "Laptop", quantity:1},
        {itemName: "Windows", quantity:2},
        {itemName: "Mac", quantity:3},
        {itemName: "Tablet", quantity:4}
    ]);
    [Bindable]
    public var arrLabelCombo:ArrayCollection = new ArrayCollection([
        {label: "One", data: 1},
        {label: "Two", data: 2},
        {label: "Three", data: 3},
        {label: "Four", data: 4}
    ]);
    ]]></fx:Script>
<mx:DataGrid id="IdDgItemLabelDisp" left="10" right="10" top="39" bottom="10" dataProvider="{arrAllItem}">
    <mx:columns>
        <mx:DataGridColumn dataField="itemName" headerText="Item Name"/>
        <mx:DataGridColumn headerStyleName="dataGridHeadingStyle" headerText="Label">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:HBox horizontalAlign="center">
                        <fx:Script>
                        <![CDATA[
                            override public function set data(value:Object):void
                            {
                                if(data != value)
                                {
                                    super.data = value;
                                }
                            }
                            private function getSelectedItem(data:Object):Object
                            {
                                if (data)
                                {
                                    for each(var item:Object in IdCmbItemLabel.dataProvider)
                                    {
                                        if(data.quantity == item.data)
                                            return item;
                                    }
                                }
                                return null;
                            }
                            ]]>
                        </fx:Script>
                        <s:DropDownList id="IdCmbItemLabel" dataProvider="{outerDocument.arrLabelCombo}" selectedItem="{getSelectedItem(data)}">
                        </s:DropDownList>
                    </mx:HBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>
</s:Application>

How To set selected Item for DropDownList On DataGrid in Adobe Flex?

1 Answers