Dynamic dataprovider in Datagrid combobox.

Question

Hi,
i am using Flex 3. I have a data grid with first two rows having item renderers as ComboBoxes. What i want to implement is that, depending on my selection in the first combobox, the respective second combobox should get a dataprovider of my choice.
For e.g.
If I select the 1st combobox as India, then the adjacent combobox should have the cities in India.
If I select the 1st combobox as France, then the adjacent combobox should have the cities in France.
I dont have the values in any local variables. The values must be fetched at runtime because the list of Countries(in first combobox) is very exaustive so fetching the list of all cities for all countries would not be right. So for each selection of country i have to make an http service call to fetch the corresponding city list.
My question is how do i dynamically give the cities as dataprovider to each of the combo boxes in each row.
Hope my description is comprehensible enough.
Thanks
Sid.

Answer 1

HI,
Can you check the below code. If that is what you need.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                 layout="vertical"
                 creationComplete="application1_initializeHandler(event)">
     <mx:Script>
         <![CDATA[
             import mx.collections.ArrayCollection;
             import mx.events.FlexEvent;
             // Defines your collections
             [Bindable]
             public var countriesData:ArrayCollection=new ArrayCollection([{label: 'India'}, {label: 'Brazil'}]);
             [Bindable]
             public var citiesData:ArrayCollection;
             [Bindable]
             public var collection:ArrayCollection=new ArrayCollection();
             protected function application1_initializeHandler(event:FlexEvent):void
                 dataGrid.addEventListener("countryChanged", country_changed_handler);
                 collection.addItem({cityData:citiesData});
            // Change this method to the remote callings.
            // In the resultEvent you will change the citiesData collection.
             protected function country_changed_handler(event:DataEvent):void
                 if (event.data == 'India')
                     dataGrid.selectedItem.cityData = new ArrayCollection([{label: 'Mumbai'}, {label: 'Delhi'}]);
                 else
                     dataGrid.selectedItem.cityData = new ArrayCollection([{label: 'São Paulo'}, {label: 'Rio de Janeiro'}]);
                 dataGrid.invalidateList();
             public function addRow(event:MouseEvent):void{
                 //collection.addItem(new Object());
                 collection.addItem({cityData:citiesData});
             public function dropRow(event:MouseEvent):void{
         ]]>
     </mx:Script>
     <mx:DataGrid id="dataGrid"
                  dataProvider="{collection}">
         <mx:columns>
             <mx:DataGridColumn>
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:ComboBox dataProvider="{this.parentDocument.countriesData}"
                                      labelField="label"
                                      change="combobox1_changeHandler(event)"
                                      selectedIndex="-1">
                             <mx:Script>
                                 <![CDATA[
                                     import mx.collections.ArrayCollection;
                                     import mx.events.ListEvent;
                                    protected function combobox1_changeHandler(event:ListEvent):void
                                         dispatchEvent(new DataEvent("countryChanged", true, true, this.selectedLabel));
                                 ]]>
                             </mx:Script>
                         </mx:ComboBox>
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
             <mx:DataGridColumn>
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:ComboBox labelField="label">
                             <mx:Script>
                                 <![CDATA[
                                          override public function set data(value:Object):void
                                            super.data = value;
                                            var prevSelectedItem:Object = this.selectedItem;
                                            this.dataProvider = data.cityData ;
                                            this.selectedItem = prevSelectedItem;
                                 ]]>
                             </mx:Script>
                         </mx:ComboBox>
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
         </mx:columns>
     </mx:DataGrid>
     <mx:HBox width="299" horizontalAlign="center" horizontalGap="51">
         <mx:Button label="Add" click="addRow(event)"/>
         <mx:Button label="Drop" click="dropRow(event)"/>
     </mx:HBox>
</mx:Application>