Disable selection on some items in a spark List

The spark List component in Flex 4 treats every item equally with regards to selection. Sometimes I find it useful to customize this behavior so certain items cannot be selected. You can simulate this behavior by customizing the item renderer to make the selected state visually identical to the normal state, but to get more accurate functionality you will need to subclass List.

The following example demonstrates a subclass of List called SelectableItemList where the mx_internal setSelectedIndex() and setSelectedIndices() methods are overridden to ignore selecting items that have a property called selectionEnabled set to false.

In this example the headings are not selectable, but the other items are and can be reordered by dragging and dropping items around the List:

View Source

This example might not handle keyboard input the way you expect it. If you press the up and down keys you won’t be able to go past unselectable items. This can be seen as either a bug or a feature. If you don’t want this behavior then you’ll probably want to look at overriding the adjustSelectionAndCaretUponNavigation method. I’ll leave that as an exercise to the reader (or maybe a future blog post if there is sufficient interest).

Update: I just updated this post to work with recent Flex 4 builds, see SDK-25246 for the reason why.

Note: This sample requires Flex SDK 4.0.0.13827 or higher. You can get the latest SDK builds from opensource.adobe.com.

8 thoughts on “Disable selection on some items in a spark List”

  1. I started this based on your class above

    The class enables you to specify data types to excluded from the ability to select, meaning you don’t need to have your data items implement an interface or extend a particular class (i.e. have a selectable property).

    I also did a bit of extra work inside adjustSelectionAndCaretUponNavigation to make sure that the keyboard worked as expected.

    http://code.google.com/p/tink/source/browse/trunk/ws/tink/spark/controls/SelectableExclusionList.as

  2. If people try using this code in Flex Hero (4.5) you will need to add an additional changeCaret parameter to the setSelectedIndex/setSelectedIndices method signature:

    override mx_internal function setSelectedIndex(value:int, dispatchChangeEvent:Boolean = false, changeCaret:Boolean = true):void

    override mx_internal function setSelectedIndices(value:Vector., dispatchChangeEvent:Boolean = false, changeCaret:Boolean = true):void

Comments are closed.