«

Spark Multiselect DropDownList

I needed a DropDownList with multiselect capability and wasn't entirely impressed with Googles offerings. Wondering why the DropDownList doesn't support this in the first place (after all, DropDownListBase does extend List which has this feature), I discovered this intriguing comment in the source code:

PLAIN TEXT
Actionscript:
  1. override public function set allowMultipleSelection(value:Boolean):void
  2. {
  3. // Don't allow this value to be set. If the multiple
  4. // selection related properties are set and
  5. // allowMultipleSelection is false, List will
  6. // select the first item passed in.
  7. return;
  8. }

After a brief attempt at manipulating the original component, I got annoyed and wrote a simple one which full fills my needs.  I know, "No blog post for years and all we get is a lousy flex component?". Such is life. I'm sure the same code has been written a 100 times by others, but I thought I'd share it anyway.

Click for a demo

Right click the demo to view source.

Download MultiSelectDropDownList.mxml

This entry was posted on Thursday, October 20th, 2011 at 11:28 am and is filed under flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Spark Multiselect DropDownList”

  1. Ron Jeremy Says:
    October 27th, 2011 at 8:29 pm

    I AM VERY HAPPY!

  2. GuanYuxin Says:
    October 28th, 2011 at 6:36 am

    After a brief attempt at manipulating the original component, I got annoyed and wrote a simple one which full fills my needs.
    –a wise plan
    original component is a mess

  3. Starlover Says:
    May 16th, 2012 at 10:19 am

    Hi,
    Little question;
    I want to put a checkbox behind each item in the list.
    And when you select (without ctrl key) the checkbox is checked.

    Where do i put this code? Please some help..

    Greets, Starlover

  4. sakri Says:
    May 16th, 2012 at 10:27 am

    Maybe this one will do for you?

    http://blastanova.com/labs/multiselectdropdown/CustomMultiSelectDropDown.html

  5. Starlover Says:
    May 16th, 2012 at 12:21 pm

    thanx for the quick reply.
    I found that one, but when modifying it i discovered it doesn’t work well with a scrollbar.
    also it doesn’t show the selected items comma separated (like your nice example)
    Yours is coming the closest to what i want in a understandable way.
    What i am looking for is a combination of the 2 so it becomes a perfect multiselect dropdown that is super user friendly and doesn’t require any help by using.
    (for the older folks that are not so computer minded as we are)

    I hope you consider making more add-ons to this component so people can choose output ways of the component by setting various configuration parameters.

    Meanwhile I’ll try to make mine work… and if i do I’ll let you know.

    Greets, Starlover.

  6. Ashvin Says:
    November 30th, 2012 at 12:13 pm

    Hello,

    I am using remote object to populate the DropDownList. But this dropdownlist does not have the ‘labelField’ attribute. Can you help with this please?

  7. sakri Says:
    November 30th, 2012 at 4:37 pm

    Hi Ashvin,

    I’m glad you find the dropdown of some use. Unfortunately I don’t personally need the labelField functionality so I will not be spending any time on it. The source code is available, there is no licence attached to it so feel free to implement it or pay for someone to do so.

    Sakri

Leave a Reply