Preventing item selection in the Spark List control in Flex 4

By Peter deHaan On February 25, 2010 · 7 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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>

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.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

7 Responses to Preventing item selection in the Spark List control in Flex 4

franto says:

February 26, 2010 at 3:23 am

Thanks Peter for this. It has helped me a lot

Reply
franto says:

March 24, 2010 at 4:04 am

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

Reply
- Eirik says:
  
  January 11, 2011 at 11:09 pm
  
  I have the exact same issue, please let me know if you find the solution ;)
  
  Reply
  - Hugo Larcher says:
    
    March 15, 2011 at 7:53 am
    
    On the nested component mouseDown event handler functions just add:
    
    event.stopImmediatePropagation();
    
    That should prevent the List’s item from being selected.
chris ellem says:

December 17, 2010 at 5:08 pm

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…

Reply
Rauf says:

January 15, 2011 at 4:24 am

Thank you very much!

Reply
Raboutamanana says:

May 30, 2011 at 12:15 am

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 ?

Reply