Preventing item selection in the Spark List control in Flex 4

The following example shows how you can prevent item selection in the Spark List control in Flex 4 by listening for the changing event and calling the preventDefault() method on the IndexChangeEvent event object instance.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/25/preventing-item-selection-in-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_changing_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
 
            protected function lst_changingHandler(evt:IndexChangeEvent):void {
                evt.preventDefault();
            }
        ]]>
    </fx:Script>
 
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="selectedIndex:">
                <s:Label text="{lst.selectedIndex}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:List id="lst"
            changing="lst_changingHandler(event);"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout horizontalAlign="justify"
                              gap="0"
                              requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

7 thoughts on “Preventing item selection in the Spark List control in Flex 4

  1. Hi Peter, now I have similar problem, but I need to use preventDefault only sometimes. Imaging you have itemRenderer and inside are few components (let’s say buttons) and I want change selection only when I click on some button, for all other clicks I want to use preventDefault. Problem is that in IndexChangeEvent target and currentTarget is always List and not clicked component. Is that ok? I dont have any possibility to find out what was clicked. Thank you for help

      1. On the nested component mouseDown event handler functions just add:

        event.stopImmediatePropagation();

        That should prevent the List’s item from being selected.

  2. Thanks Peter

    Nearly works for me..

    Flex Builder buritto…adobe air debug

    i get a annoying little flicker showing the selection when i click an image inside an item renderer inside the <s:List control..

    Any ideas…

  3. Works fine for me thank you. But i’m still having an issue.

    Is there a way to prevent item selection without disabling a drag n drop behaviour on the list elements ?

Comments are closed.