This component was created in order to improve user experience when the user must select multiple options from a long list of items. As you already know, if you select more items from a list component you have to scroll in order to see what it’s you actual selection.
So, what you do if you have a list that has, let say, 100 items and you make a selection of 4 elements, as an user it’s hard to know what are the selected items, also if you come back to this and you want to add one more element to you selection?
Multiple selection list component give the user a visual status of the actual selection. On the left side are available items and on the right selected items.
Accesibility
1. Double click on in item to move it from a list to on other.
2. Select one or more elements from a list and click on the arrow between the list in order to move all selected items from one list to other one,
3. Move all elements from a list to other using double arrow icons.
4. Click on switch button (middle one) in order to switch items from a list to other.
How to use it
All you need to do it’s to tell the component what are all available items and what are the selected items.
private var myComp: MultiSelectList = new MultiSelectList(); private var _availableItems: ArrayCollection = new ArrayCollection(); private var _selectedItems: ArrayCollection = new ArrayCollection(); private var _resultItems: ArrayCollection = new ArrayCollection(); //set component data myComp.availableItems = _availableItems; myComp.selectedItems = _selectedItems; //get selected items _resultItems = myComp.selectedItems;
As you will see in this working example, I use this component to update a ComboBox according to selection from multiple selection list component.
Enjoy!
| ||
|
Tags: component, list, multiple selection, MXML
This post was written by Stelian Crisan
Views: 9222
Articles
Any chance for source code available to preview/download?
Sorry about this. I just re add the source codes. I think that I don’t use properly uploads plugin. Anyway, get the codes and make them better.
just what i am looking for. if you could include the source you would be my hero!
The source it’s already included, please see the archive icon and swf icon below the working example. Or just search this page for FxrMultiSelectList
.
thanks boss… this is what i was exactly looking for…
I looked a lot for a multiselect component, it is just great! In my case, I just modified it to work with XMLListCollection instead of ArrayCollection. Thanks again!
rodiq,
It has been a while but how did you modify the multiselect compenent to work with XMLListCollection instead of ArrayCollection?
Maybe I’m just dense but converting doesn’t seem trivial to me and I don’t know where to begin.
Would you post your code for this?
Thanks