Multiple selection in a spark List without the control key
The spark List component in Flex 4 allows you to select multiple items when you set allowMultipleSelection to true. With this flag set you can select multiple items by using the control/command key.
If you want to have a List that allows multiple selection, but does not require the user to hold down the control key when selecting items you can subclass List and override the item_mouseDownHandler() method.
The following example demonstrates a subclass of List called CheckList that does just that:
This sample uses an item renderer function to use a different renderer based on if the item is a heading or not. You can still select these heading items, but the heading renderer doesn’t look any different when it’s selected. Examining the selectedItems property of the List will show that the heading items are actually selected. If you don’t want to allow these items to be selected check out this post.
Note: This sample requires Flex SDK 4.0.0.12800 or higher. You can get the latest SDK builds from opensource.adobe.com.
Thanks, this is extremely helpful!
Great – Glad it helped
override protected function item_mouseDownHandler(event:MouseEvent):void
{
event.ctrlKey=true;
super.item_mouseDownHandler(event);
}
@anton – Nice and simple, thanks for pointing that out
Thanks for this! I was searching for a while — very simple.
Here’s a tough one for you — I have an item renderer for my s:List which has a button inside of it. Thing is, I don’t want the selection to change if the button is clicked — only if anything other than the button is clicked. How would I go about cancelling the event propagation?
Thanks!
Answered my own question:
override protected function item_mouseDownHandler(event:MouseEvent):void
{
if(event.target.id != “tableBtn”) {
var newIndex:Number = dataGroup.getElementIndex(event.currentTarget as IVisualElement);
// always assume the Ctrl key is pressed by setting the third parameter of
// calculateSelectedIndices() to true
selectedIndices = calculateSelectedIndices(newIndex, event.shiftKey, true);
}
}
@Mike Haggerty – Good question, thanks for posting your solution. Another slightly more generic solution might be like this:
(This is also simplified from my original post by following anton’s suggestion)
Then in your ItemRenderer you would set mouseEnabled=”false” on elements you want to cause the renderer to be selected, for example the Label.
thank alot this what i need 10x
@anton
PRO. You sire, have been give all of my Internets.
I should have done it this way!!!! Thank you for the idea. I had to simulate this behavior using the List component. But I don’t know why I didnt think of doing a custom Sub List class.
Thanks again!!