Question

In a List Component, how can I allow multiple selections, but the max number of selections allowed is based off a predefined number?

What I got so far is… I first define a max number of selections:

private var numberOfYearsCanSelect:int = 3;

I set allowMultipleSelection = true in the List Component.

On change of the List Component I added logic to see if the user selected more than what they are allowed to select, and if so, I set the length of the selectedItems equal to the max number they can select:

            if (event.currentTarget.selectedIndices.length > numberOfYearsCanSelect)
            {
                var arr:Vector.<Object>=event.currentTarget.selectedItems;
                arr.length=numberOfYearsCanSelect;
                event.currentTarget.selectedItems=arr;
            }

The problem with this is that, for some reason the List is not updating when I set the selectedItems. It allows you to select how ever many you want.

What I want to happen is, when the user selects more than what is allowed, we only select that number and the remaining are not selected.

Maybe I need to do some kind of List refresh on the View to get it to work, or should I be creating a custom List by extending the List Class and overriding some methods?

Thanks

Answer 1

Seems to me that subclassing List would be the simplest solution. All you have to do then, is making sure that the user selection is never commited when the number of proposed selected items exceeds the maximum value.

Something like this should do the trick:

use namespace mx_internal;

public class LimitedList extends List {

    public var maxSelectedItems:int = 3;

    override public function initialize():void {
        super.initialize();
        allowMultipleSelection = true;
    }

    override mx_internal function setSelectedIndices(
            value:Vector.<int>,
            dispatchChangeEvent:Boolean = false,
            changeCaret:Boolean = true):void
    {
        if (!value || value.length <= maxSelectedItems)
            super.setSelectedIndices(value, dispatchChangeEvent, changeCaret);
    }

}

Of course, some more tweaking needs to be done to make this a fully reusable component, but you can use this as a starting point (or as a one-off).