7 Replies Latest reply on Feb 8, 2011 11:36 PM by simplesid

    Dynamic dataprovider in Datagrid combobox.

    simplesid

      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.

        • 1. Re: Dynamic dataprovider in Datagrid combobox.
          Pablo Souza Level 3

          What are you setting as the dataprovider of your datagrid?

           

          I mean, do you have two fixed lines in your datagrid and each one has 1 combobox?

          So, the 1st one in the 1st line has the country list and the 2nd one in the 2nd line has the dinamic city list?

           

           

          Greets,

          Pablo Souza

          • 2. Re: Dynamic dataprovider in Datagrid combobox.
            simplesid Level 1

            Thanks for the reply

            By lines , you mean columns right? if yes, then thats the way it is.

            Sid

            • 3. Re: Dynamic dataprovider in Datagrid combobox.
              Pablo Souza Level 3

              Hi Sid,

               

              No, I have understood you were trying to put two combobox, each one in different lines.

              So, do you have two columns, the first one has your country list and the second one has the dynamic cities list ?

               

               

              Is it what you need?

               

              // Defines your collections
              [Bindable]
              public var collection:ArrayCollection = new ArrayCollection([{name: 'Object 1'}]);
              [Bindable]
              public var countriesData:ArrayCollection = new ArrayCollection([{label: 'India'},{label: 'Brazil'}]);
              [Bindable]
              public var citiesData:ArrayCollection = new ArrayCollection();
              
              
              protected function application1_initializeHandler(event:FlexEvent):void
              {
                      dataGrid.addEventListener("countryChanged", country_changed_handler);
              }
              
              // 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')
                      {
                              citiesData = new ArrayCollection([{label: 'Mumbai'},{label: 'Delhi'}]);
                      }
                      else
                      {
                              citiesData = new ArrayCollection([{label: 'São Paulo'},{label: 'Rio de Janeiro'}]);
                      }
              }
              
              <mx:DataGrid id="dataGrid" dataProvider="{collection}">
                  <mx:columns>
                      <mx:DataGridColumn>
                          <mx:itemRenderer>
                              <fx:Component>
                                  <mx:ComboBox 
                                      dataProvider="{this.parentDocument.countriesData}" labelField="label" 
                                      change="combobox1_changeHandler(event)" 
                                      selectedIndex="-1">
                                      <fx: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));
                                              }
                                          ]]>
                                      </fx:Script>
                                  </mx:ComboBox>
                              </fx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                      <mx:DataGridColumn>
                          <mx:itemRenderer>
                              <fx:Component>
                                  <mx:ComboBox dataProvider="{this.parentDocument.citiesData}" labelField="label" />
                              </fx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                  </mx:columns>
              </mx:DataGrid>
              

               

               

               

              Greets,

              Pablo Souza

              1 person found this helpful
              • 4. Re: Dynamic dataprovider in Datagrid combobox.
                simplesid Level 1

                Hi Pablo,

                thanks for your efforts. yes this is exactly what i want. Please see the changes i have made in your code below. they will illustrate the problem better. If i am adding rows dynamically, i want the first row to have values (India -> Indian cities) and the second row to have diff values (France-> French cities).

                 

                <?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 collection:ArrayCollection=new ArrayCollection([{name: 'Object 1'}]);
                             [Bindable]
                             public var countriesData:ArrayCollection=new ArrayCollection([{label: 'India'}, {label: 'Brazil'}]);
                             [Bindable]
                             public var citiesData:ArrayCollection=new ArrayCollection();

                 


                             protected function application1_initializeHandler(event:FlexEvent):void
                             {
                                 dataGrid.addEventListener("countryChanged", country_changed_handler);
                             }

                 

                // 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')
                                 {
                                     citiesData=new ArrayCollection([{label: 'Mumbai'}, {label: 'Delhi'}]);
                                 }
                                 else
                                 {
                                     citiesData=new ArrayCollection([{label: 'São Paulo'}, {label: 'Rio de Janeiro'}]);
                                 }
                             }
                            
                             public function addRow(event:MouseEvent):void{
                                 collection.addItem(new Object());
                             }
                             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 dataProvider="{this.parentDocument.citiesData}"
                                                      labelField="label"/>
                                     </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>

                 

                Any suggestions are always welcome. Thanks!

                Sid

                • 5. Re: Dynamic dataprovider in Datagrid combobox.
                  Abhrodip Paul-cXMMf1

                  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>

                  • 6. Re: Dynamic dataprovider in Datagrid combobox.
                    Pablo Souza Level 3

                    Hi Sid,

                     

                    Now it's clear.

                     

                    Have you already solved your problem? Do you need something else ?

                     

                     

                    Greets,

                    Pablo Souza

                    • 7. Re: Dynamic dataprovider in Datagrid combobox.
                      simplesid Level 1

                      Thanks guys for your efforts.

                      I will incorporate the changes in my application and see if it'll work there.

                      Regards,

                      Sid