4 Replies Latest reply on Jul 19, 2011 3:37 PM by Amy Blankenship

    Drop Down List - Setting the Default Selected Item

    William Spence

      I have a drop down list in my application that gets populated by a remote database.  When you select an item from the list, a screen full of thumbnails is populated based on the selection.  We have decided that when the user gets to this component in our air application, that it looks too empty and barren.  All that displays is a drop down list with an empty screen.  So we would like to set a default setting for the drop down list so that when the user gets to this component, a screen full of thumbnails is awaiting them and they can change it if they want.  My first instinct was just to set the selectedIndex property of the drop down list to the value that we want as the default, and that works, but it only changes the label in the dropdownlist, it doesn't actually populate the screen with the thumbnails.  That is because when an item is selected, it has to be commited to the drop down list by a CLOSE event that then sets off the close handler that populates the screen with thumbnails.  So after looking at the documentation, I found that there is a method called closeDropDown that states the following:



      public function closeDropDown(commit:Boolean):void

      Close the drop-down list and dispatch a DropDownEvent.CLOSE event.


      commit:Boolean — If true, commit the selected data item.


      When I use this method, nothing happens.  In fact if I add a listener for the CLOSE event, the close event isn't getting fired.  So I am a little befuddled.  The only thing that I can figure is that I am setting the selectedIndex and not the selectedItem before I call the closeDropDown method, and if you look above, the documentation vaguely states that that "If true, commit the selected data item".  Do I need to set the selectedItem and not the selectedIndex?  If so, I am not exactly sure how to do this since I am using a service to populate my drop down list which kind of makes the dataprovider a little unclear to me in the code because it gets replaced by an AsyncListView.  Here is what I have.


              protected function dropDownList_creationCompleteHandler(event:FlexEvent):void{
                getAllAudio_descriptionsResult.token = audiodescriptionsService.getAllAudio_descriptions();
                getAllAudioResult.token = audioService.getAllAudio();
           private function audioDescriptionsCallResponderHandler(event:ResultEvent):void {
                audioDesc = event.result as ArrayCollection;
           private function audioCallResponderHandler(event:ResultEvent):void {
                audio = event.result as ArrayCollection;
                audioDescDropDown.selectedIndex = 2;
           <s:CallResponder id="getAllAudio_descriptionsResult" result="audioDescriptionsCallResponderHandler(event)"/>
           <audiodescriptionsservice:AudiodescriptionsService id="audiodescriptionsService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
           <s:CallResponder id="getAllAudioResult" result="audioCallResponderHandler(event)"/>
           <audioservice:AudioService id="audioService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
      <s:DropDownList id="audioDescDropDown" x="43" y="65" width="185" height="34" fontFamily="MyriadProSemiBold"
                          fontSize="15" skinClass="skins.VideoSkins.Video.DropDownSkin"
                          color="0xE6E6E6" selectionColor="0x054F7C" rollOverColor="0x007CBA"
                          creationComplete="dropDownList_creationCompleteHandler(event)" labelField="audioCatName"
                          itemRenderer="renderers.DropDownList3" close="DDLAudioCloseHandler(event)">
           <s:AsyncListView list="{getAllAudio_descriptionsResult.lastResult}"/>



      I would really appreciated hearing from anyone who has experience or insight into setting a default for a drop down list and actually forcing it to execute that default selection.  Any thoughts at all would be helpful.  Thanks!

        • 1. Re: Drop Down List - Setting the Default Selected Item
          Amy Blankenship Level 4

          Have you just thought about doing this:


          var selectedThing:AudioDescription = audioDescDropdown.dataProvider.getItemAt(0);

          audioDescDropdown.selectedItem = selectedThing;


          whatEverNeedsToBePopulatedBasedOnSelection.audioDescription = selectedThing;






          • 2. Re: Drop Down List - Setting the Default Selected Item
            kokorito Level 4

            use the change event instead of close

            but if you set the selectedIndex programmatically then you'll have to call the change handler manually

            • 3. Re: Drop Down List - Setting the Default Selected Item
              William Spence Level 1

              Amy, thank you so much for your input.  It turned out that part of your answer was the key.  After playing with dispatching custom events and many many other things, I finally stumbled onto a post about programatically "opening" a drop down list.  Then it occured to me that perhaps I could not force a a list to close until the drop down list was opened first.  So I added the method openDropDown() followed by closeDropDown(true) and now the CLOSE event was firing.  So, first step in the right direction.  Next I tried setting the selectedIndex to what I wanted, and nothing was happening, so I tried a modified version of your advice for setting the selectedItem and BINGO, it worked!!!  So here is what the final coded looked like for anyone who is interested:


              private function audioCallResponderHandler(event:ResultEvent):void {
                   audio = event.result as ArrayCollection;
                   audioDescDropDown.selectedItem = audioDescDropDown.dataProvider.getItemAt(2);



              Now, it is just as if the drop down list is opened, the desired ITEM (not the index) is selected, and then the the drop down is closed.  This causes the CLOSE event to fire and my close handlers which display everything work just as expected.  The key to getting to the desired selectedItem was your suggestion to use the getItemAt() method of the dataProvider.  Made my day, Thanks!!!

              • 4. Re: Drop Down List - Setting the Default Selected Item
                Amy Blankenship Level 4

                I don't see your close handler in the code you posted, so if you provided it and I missed seeing it, please forgive me.  I'm a bit unclear on why the open and close of your dropdown list is so critical to your functionality.  It seems to me that the page of data would be tied to the item selected in the drop down (which to my mind is the only purpose for the drop down to be there).  So why do you first need to open and close the drop down, rather than just taking the selected value and doing whatever you'd normally do with it to populate that page?


                What I'm getting at is that I'd expect that page to be a separate component that would just have a property for the selected "thing", and that you could populate it either manually, as I suggested, or through the close handler on your drop down--I wouldn't think that there should be a need to go through the close handler every time.  Even if you don't have it implemented the way I'm thinking, you may want to think about whether you need to go through the close handler every time, or whether you could break it out so that the close handler simply determines which item to select, then jumps to another function that actually does something with the selected value.  That way, you don't have to go through the overhead of opening and closing the drop down if you need to change its value programmatically.