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:

View Source

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.

16 thoughts on “Multiple selection in a spark List without the control key”

  1. override protected function item_mouseDownHandler(event:MouseEvent):void
    {
    event.ctrlKey=true;
    super.item_mouseDownHandler(event);
    }

  2. 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!

  3. 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);
    }
    }

  4. @Mike Haggerty – Good question, thanks for posting your solution. Another slightly more generic solution might be like this:

    override protected function item_mouseDownHandler(event:MouseEvent):void {
        if (event.target is ItemRenderer){
            event.ctrlKey = true;
            super.item_mouseDownHandler(event);
        }
    }

    (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.

  5. 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!!

  6. Steve! I can’t believe I am reading your tutorials on the adobe site now. You rock man 🙂 -M

  7. why not add keyboard as well?

    override protected function keyDownHandler(event:KeyboardEvent):void{
    event.ctrlKey=true;
    super.keyDownHandler(event);
    }

Comments are closed.