The Flex list allows you to select multiple items by setting allowMultipleSelection="true". This will allow the user to select none, some or all the elements in the list. If you need to limit the number of selected items, you basically have two options:
1. Ignore the last selected element
2. Remove the first selected element and add mark the last one as selected.
In Flex 3 (Halo components) you can use the change handler to catch changes in the selected items array and if this array is over your limit remove the first (pop) or the last (shift) selected element.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
protected function list1_changeHandler(event:ListEvent):void {
if (list.selectedItems.length > 4)
{
var arr:Array = list.selectedItems;
//Remove the first added item
//arr.pop();
//Remove the last added item (disable adding new ones)
arr.shift();
list.selectedItems = arr;
}
}
]]>
</mx:Script>
<mx:List id="list" allowMultipleSelection="true" change="list1_changeHandler(event)" width="100" x="100">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Object label="Abc 1" data="abc 1" />
<mx:Object label="Abc 2" data="abc 2" />
<mx:Object label="Abc 3" data="abc 3" />
<mx:Object label="Abc 4" data="abc 4" />
<mx:Object label="Abc 5" data="abc 5" />
<mx:Object label="Abc 6" data="abc 6" />
<mx:Object label="Abc 7" data="abc 7" />
<mx:Object label="Abc 8" data="abc 8" />
</mx:ArrayCollection>
</mx:dataProvider>
</mx:List>
</mx:Application>
1. | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"> |
2. | <mx:Script> |
3. | <![CDATA[ |
4. | import mx.events.ListEvent; |
5. | |
6. | protected function list1_changeHandler(event:ListEvent):void { |
7. | if (list.selectedItems.length > 4) |
8. | { |
9. | var arr:Array = list.selectedItems; |
10. | //Remove the first added item |
11. | //arr.pop(); |
12. | //Remove the last added item (disable adding new ones) |
13. | arr.shift(); |
14. | list.selectedItems = arr; |
15. | } |
16. | } |
17. | |
18. | ]]> |
19. | </mx:Script> |
20. | <mx:List id="list" allowMultipleSelection="true" change="list1_changeHandler(event)" width="100" x="100"> |
21. | <mx:dataProvider> |
22. | <mx:ArrayCollection> |
23. | <mx:Object label="Abc 1" data="abc 1" /> |
24. | <mx:Object label="Abc 2" data="abc 2" /> |
25. | <mx:Object label="Abc 3" data="abc 3" /> |
26. | <mx:Object label="Abc 4" data="abc 4" /> |
27. | <mx:Object label="Abc 5" data="abc 5" /> |
28. | <mx:Object label="Abc 6" data="abc 6" /> |
29. | <mx:Object label="Abc 7" data="abc 7" /> |
30. | <mx:Object label="Abc 8" data="abc 8" /> |
31. | </mx:ArrayCollection> |
32. | </mx:dataProvider> |
33. | </mx:List> |
34. | </mx:Application> |
35. |
In Flex 4 you get to do it a bit more cleaner because you also have access to the changing event which is dispatched before the selectedItems Vector is changed. If you cancel this event the last selected element will not be selected. If you want to remove the first selected item you can simply do a pop on the selectedItems Vector. Note that you should check if the current length of the Vector is greater or equal with the limit because the last selected element was not added yet.
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function list_changingHandler(event:IndexChangeEvent):void
{
if (list.selectedItems.length >= 4)
{
//event.preventDefault();
//event.stopImmediatePropagation();
var arr:Vector.<Object> = list.selectedItems;
arr.pop();
list.selectedItems = arr;
}
}
]]>
</fx:Script>
<s:List id="list" allowMultipleSelection="true" width="100" x="100" changing="list_changingHandler(event)">
<s:dataProvider>
<mx:ArrayCollection>
<fx:Object label="Abc 1" data="abc 1" />
<fx:Object label="Abc 2" data="abc 2" />
<fx:Object label="Abc 3" data="abc 3" />
<fx:Object label="Abc 4" data="abc 4" />
<fx:Object label="Abc 5" data="abc 5" />
<fx:Object label="Abc 6" data="abc 6" />
<fx:Object label="Abc 7" data="abc 7" />
<fx:Object label="Abc 8" data="abc 8" />
</mx:ArrayCollection>
</s:dataProvider>
</s:List>
</s:Application>
1. | <?xml version="1.0" encoding="utf-8"?> |
2. | <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
3. | xmlns:s="library://ns.adobe.com/flex/spark" |
4. | xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> |
5. | <fx:Declarations> |
6. | <!-- Place non-visual elements (e.g., services, value objects) here --> |
7. | </fx:Declarations> |
8. | <fx:Script> |
9. | <![CDATA[ |
10. | import spark.events.IndexChangeEvent; |
11. | |
12. | protected function list_changingHandler(event:IndexChangeEvent):void |
13. | { |
14. | if (list.selectedItems.length >= 4) |
15. | { |
16. | //event.preventDefault(); |
17. | //event.stopImmediatePropagation(); |
18. | var arr:Vector.<Object> = list.selectedItems; |
19. | arr.pop(); |
20. | list.selectedItems = arr; |
21. | } |
22. | } |
23. | |
24. | ]]> |
25. | </fx:Script> |
26. | <s:List id="list" allowMultipleSelection="true" width="100" x="100" changing="list_changingHandler(event)"> |
27. | <s:dataProvider> |
28. | <mx:ArrayCollection> |
29. | <fx:Object label="Abc 1" data="abc 1" /> |
30. | <fx:Object label="Abc 2" data="abc 2" /> |
31. | <fx:Object label="Abc 3" data="abc 3" /> |
32. | <fx:Object label="Abc 4" data="abc 4" /> |
33. | <fx:Object label="Abc 5" data="abc 5" /> |
34. | <fx:Object label="Abc 6" data="abc 6" /> |
35. | <fx:Object label="Abc 7" data="abc 7" /> |
36. | <fx:Object label="Abc 8" data="abc 8" /> |
37. | </mx:ArrayCollection> |
38. | </s:dataProvider> |
39. | </s:List> |
40. | </s:Application> |
41. |
Subscribe to:
Post Comments (Atom)
4 comments:
This was very helpful, but your example for Flex 4 does have one issue. It will prevent you from being able to de-select an item once the max number of items has been selected. Instead of:
if (list.selectedItems.length >= 4)
You should check the following:
if (list.selectedItems.length >= 4) && list.selectedIndices.indexOf(event.newIndex) == -1)
This will still prevent you from selecting more than 4, but will also let you de-select items once you have four selected. Thanks for getting me started on this though!
Thanks a lot for the comment Steve, the truth is I focused on selecting and forgot about deselecting.
I also noticed that your flex 3 example doesn't work if the user holds shift down to select more than the max. I used the length attribute to truncate the selection if the user uses shift to select more than the max.
I'm interested in understanding how SoundGuyEric used the length to truncate the shift selected items, can someone elaborate
Post a Comment