8 Replies Latest reply on Jul 8, 2010 3:27 AM by Mikepote

    ComboBox dataProvider woes

    mgk_3

      Hi, I am new with Flex.  I am trying to make a simple component where I have two ComboBox objects that work with each other.  I want comboBox2 to update its dataProvider depending on which option was selected in the comboBox1.  So for example if comboBox11 has "colors" selected, comboBox2 shows "red, blue, green".  Then if I change comboBox1 to "numbers", comboBox2 would show "1, 2, 3".

       

      Here is the code I am using:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="350">
          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;

                  [Bindable] private var myType:String = 'colors';
                  [Bindable] private var types:Array = ['colors','numbers','shapes'];
                  [Bindable] private var dataProviders:Object = {
                      colors:['red','blue','green'],
                      numbers:['1','2','3'],
                      shapes:['circle', 'square','triangle']
                  };

                  protected function changeObjectType(event:Event):void {
                      this.myType = event.target.value;                       
                      itemSelector.dataProvider = dataProviders[this.myType];
                      itemSelector.dataProvider.refresh();
                  }
              ]]>
          </mx:Script>
              <mx:ComboBox id="typeSelector" change="{changeObjectType(event)}" dataProvider="{types}"/>
              <mx:ComboBox id="itemSelector" dataProvider="{dataProviders[myType]}"/>
      </mx:Application>

       

      So when I compile and load, comboBox1 shows (colors, numbers, shapes) with "colors" selected.  comboBox2 shows (red, blue, green) with "red" selected.  But then if I select "numbers" in comboBox1, comboBox2 still lists (red, blue, green), this time with "1" selected.

       

      From debugging, I see that the dataProvider for the dropdown:ListBase property for comboBox2 is not being correctly updated.  However I do not know how to address this, since from the Flex 3.5 API, the dropdown property is read-only, so I can't force an update of its dataProvider.

       

      I would appreciate any insight into the matter!

        • 1. Re: ComboBox dataProvider woes
          MatHadder

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="350">
              <mx:Script>
                  <![CDATA[
                      import mx.collections.ArrayCollection;
                     
                      [Bindable]
                      private var types:Array = ['colors','numbers','shapes'];
                     
                      private var dataProviders:Object =
                      {
                          colors:['red','blue','green'],
                          numbers:['1','2','3'],
                          shapes:['circle', 'square','triangle']
                      };

           

                      private function getItemDataProvider(type:Object):Array
                      {
                          return dataProviders[type] as Array;
                      }
                  ]]>
              </mx:Script>
                  <mx:ComboBox id="typeSelector" dataProvider="{types}"/>
                  <mx:ComboBox id="itemSelector" dataProvider="{getItemDataProvider(typeSelector.selectedItem)}"/>
          </mx:Application>

          • 2. Re: ComboBox dataProvider woes
            mgk_3 Level 1

            Thank you for your response, but unfortunately that doesn't fix the problem. Using your solution and loading the swf, if I click comboBox2, I see the options "red, blue, green".  Then if I change comboBox1 to "numbers", the selection for comboBox2 changes to "1" but the drop-down still contains "red, blue, green", when it should contain "1, 2, 3".

             

            Your solution does get rid of the "Data binding will not be able to detect changes when using square bracket operator." warning, but that doesn't seem to be the root problem.  Again I really appreciate your response, as this has been very frustrating to figure out.

            • 3. Re: ComboBox dataProvider woes
              cheftimo Level 2
              1 person found this helpful
              • 4. Re: ComboBox dataProvider woes
                MatHadder Level 1

                The solution I posted works.

                 

                Here is a working example, and you can also view the source:

                http://internet.geek.nz/relatedcombos/relatedcombos.html

                • 5. Re: ComboBox dataProvider woes
                  cheftimo Level 2

                  Not really:

                   

                  The ComboBox header labels show correctly, but the dropdown values are the wrong - at least half the time - until you select one of them. Try it a couple of times.

                  • 6. Re: ComboBox dataProvider woes
                    MatHadder Level 1

                    Ah I see, it worked the first couple of times and then the dropdown does indeed go wrong.

                    Doh!

                    • 7. Re: ComboBox dataProvider woes
                      mgk_3 Level 1

                      Thank you for this link.  I tried running that example, but I ran into the same bug.  Toward the end of the comments on the blog, it was suggested that this was an old bug.  So I tried upgrading from build 3.5.0.12683 to build 3.6.0.15427, and much to my relief, everything works now.

                       

                      Thanks for everyone's help!

                      • 8. Re: ComboBox dataProvider woes
                        Mikepote

                        If you are stuck using an older version of Flex because of a legacy project (like me),

                         

                        I found a workaround that seems to work...

                         

                        I set my combobox's dataprovider dynamically: (and these are mx:ComboBox controls)

                         

                        if (currentAd.adtype == AdVO.AD_BANNER)
                             cmbFilename.dataProvider = bannerdir
                        else
                             cmbFilename.dataProvider = fullpagedir;
                        

                         

                        And experience the bug that mqk describes: The combobox itself updates to the new list, but the dropdown list inside the combobox does not.


                        This seemed to fix it:

                         

                        cmbFilename.dropdown.dataProvider = cmbFilename.dataProvider;
                        

                         

                        Updating the internal dropdown component's dataProvider seems to work.