5 Replies Latest reply on Dec 21, 2010 4:38 AM by flex2008

    Two related dropdownlists

    Zolotoj Level 3

      What is a correct way of creating two dropdownlists  where second control would have a dataprovider filtered on a selected value from the first control.

       

      Thanks

        • 1. Re: Two related dropdownlists
          UbuntuPenguin Level 4

          yeah you would use databinding.

           

           

          public var dataProvider1:ArrayCollection

          public var dataProvider2:ArrayCollection;

           

          <DropList1  selectedItem="@{dropOneSelectedItem}" dataProvider="{dataProvider1}" >

          <DropList2  dataProvider="{dataProvider2}" >

           

          public function set dropOneSelectedItem( value:Object ):void

          {

             if( value[ "age" ] > 17 )

              {

                 dataProvider.filterfunction = createCanSeeRRatedMoviesFilter;

              }

              else

              {

                                                          //Filter functions that filter the movie selection based on the age selected in the first dropdown

                 dataProvider.filterfunction = createCannotSeeRRatedMoviesFilter;

              }

              dispatchEvent( new Event("dropOneSelectedItemChange"));

          }

          [Bindable(Event="dropOneSelectedItemChange")]

          public function get dropOneSelectedItem( ):Object

          {

            return _dropOneSelectedItem;

          }

          • 2. Re: Two related dropdownlists
            Zolotoj Level 3

            Can you elaborate?

            • 3. Re: Two related dropdownlists
              Harbhai

              Create ur xml like:

               

              <countries>

                   <country name="USA" code="US">

                        <state name="New Jersey" code="NJ">

                             <city name="Teanack" code="TK" ./>

                        </state>
                   </country>

              </countries>

               

              Create an ArrayCollection from this XML.

               

              Create three combobox

               

              <mx:ComboBox id="cmbCountry" dataProvider ={ ArrayCollection }

                   labelField="@name" />

               

              <mx:ComboBox id="cmbState" dataProvider ={ cmbCountry.selectedItem.code }

                   labelField="@name" />

               

              <mx:ComboBox dataProvider ={cmbState.selectedItem.code }

                   labelField="@name" />

               

              If you are using Flex 3.5.0 you can have one more challenge. Lower version will be working nice. Please let me know if you have Flex 3.5.0 or greater.

               

              Thanks

              • 4. Re: Two related dropdownlists
                Zolotoj Level 3

                I am using Burrito. Also I dont have an hierarchical xml. Both dronpdowns have same structure:

                1st dropdown

                 <divisions>
                  <id>1</id>
                  <name>100RD STREET</name>
                 </divisions>
                 <divisions>
                  <id>2</id>
                  <name>104RD STREET</name>
                 </divisions>
                 <divisions>
                  <id>3</id>
                  <name>106TH STREET</name>
                 </divisions>
                


                and second:

                <subdivisions>
                  <id>1</id>
                  <name>22ND STREET YARD</name>
                  <division_id>37</division_id>
                 </subdivisions>
                 <subdivisions>
                  <id>2</id>
                  <name>59TH - 65TH ST. I/L</name>
                  <division_id>43</division_id>
                 </subdivisions>
                 <subdivisions>
                  <id>3</id>
                  <name>59TH - NARRAGANSETT I/L</name>
                  <division_id>43</division_id>
                 </subdivisions>
                
                • 5. Re: Two related dropdownlists
                  flex2008 Level 3

                  Hope this helps:

                   

                  <?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">
                      <s:layout>
                          <s:HorizontalLayout/>
                      </s:layout>
                      <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                          <fx:XMLList id="xml1" xmlns="">
                              <divisions>
                                  <id>1</id>
                                  <name>100RD STREET</name>
                              </divisions>
                              <divisions>
                                  <id>2</id>
                                  <name>104RD STREET</name>
                              </divisions>
                              <divisions>
                                  <id>3</id>
                                  <name>106TH STREET</name>
                              </divisions>
                          </fx:XMLList>
                          <fx:XMLList id="xml2" xmlns="">
                              <subdivisions>
                                  <id>1</id>
                                  <name>22ND STREET YARD</name>
                                  <division_id>1</division_id>
                              </subdivisions>
                              <subdivisions>
                                  <id>3</id>
                                  <name>59TH - NARRAGANSETT I/L22</name>
                                  <division_id>2</division_id>
                              </subdivisions>
                              <subdivisions>
                                  <id>3</id>
                                  <name>59TH - NARRAGANSETT I/L2222</name>
                                  <division_id>3</division_id>
                              </subdivisions>
                              <subdivisions>
                                  <id>2</id>
                                  <name>59TH - 65TH ST. I/L23424</name>
                                  <division_id>3</division_id>
                              </subdivisions>
                              <subdivisions>
                                  <id>2</id>
                                  <name>59TH - 65TH ST. I/L</name>
                                  <division_id>1</division_id>
                              </subdivisions>
                              <subdivisions>
                                  <id>3</id>
                                  <name>59TH - NARRAGANSETT I/L</name>
                                  <division_id>2</division_id>
                              </subdivisions>
                  
                          </fx:XMLList>
                      </fx:Declarations>
                      <fx:Script>
                          <![CDATA[
                              import spark.events.IndexChangeEvent;
                              private function collectionFilterFunction(item:Object):Boolean
                              {
                                  return (item.division_id.toString()==list1.selectedItem.id.toString())
                              }
                  
                              protected function list1_changeHandler(event:IndexChangeEvent):void
                              {
                                  XMLListCollection(list2.dataProvider).refresh();    
                              }
                  
                          ]]>
                      </fx:Script>
                      <s:DropDownList id="list1" labelField="name" selectedIndex="0" width="200"
                                      change="list1_changeHandler(event)">
                          <s:dataProvider>
                              <s:XMLListCollection source="{xml1}"/>
                          </s:dataProvider>
                      </s:DropDownList>
                      <s:DropDownList id="list2" labelField="name" selectedIndex="0" width="200">
                          <s:dataProvider>
                              <s:XMLListCollection  source="{xml2}" filterFunction="collectionFilterFunction"/>
                          </s:dataProvider>
                      </s:DropDownList>
                  </s:Application>