Preventing the selected item highlighting in the Spark List control in Flex 4

By Peter deHaan On February 25, 2010 · 10 Comments

In a previous example, “Preventing item selection in the Spark List control in Flex 4″, we saw 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 shows how you can keep List item selection but prevent the selected item highlighting (while maintaining the hover highlight) in the Spark List control in Flex 4 by creating a custom item renderer, setting the autoDrawBackground property to false, and drawing your own highlight in the hover state only.

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-the-selected-item-highlighting-in-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_nonSelectable_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">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="selectedIndex:">
                <s:Label text="{lst.selectedIndex}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:List id="lst"
            itemRenderer="skins.NonSelectableItemRenderer"
            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>

And the custom Spark List item renderer, skins/NonSelectableItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/25/preventing-the-selected-item-highlighting-in-the-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="NonSelectableItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        autoDrawBackground="false">
 
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
    </s:states>
 
    <s:Rect width="100%" height="100%" includeIn="hovered">
        <s:fill>
            <s:SolidColor color="haloBlue" />
        </s:fill>
    </s:Rect>
 
    <s:Label text="{data}" left="5" right="5" top="5" bottom="5" />
 
</s:ItemRenderer>

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.

10 Responses to Preventing the selected item highlighting in the Spark List control in Flex 4

Michael Novotny says:

February 25, 2010 at 2:13 pm

FANTASTIC!!! Thanks for solving a JIRA ticket for me today! =)

Reply
- Peter deHaan says:
  
  February 25, 2010 at 2:17 pm
  
  Did you have something in JIRA for this? Any chance you know the bug ID so I can paste links or workarounds?
  
  Peter
  
  Reply
  - Michael Novotny says:
    
    February 26, 2010 at 8:01 am
    
    Sorry, I should clarify… This was a JIRA ticket within our company for removing rollover and selected colors from a particular spark List.
Jing says:

March 3, 2010 at 2:48 pm

Hi Peter:
Good idea to give us on latest SDK on ItemRender’s state Array’s Sequence changing effect. Cheers.

Reply
- Jing says:
  
  March 3, 2010 at 2:53 pm
  
  Because when I applied latest SDK into my project. bomb!
  
  Reply
Amanda says:

March 8, 2010 at 12:38 pm

Thanks! I had been working around the selectedItem highlight by modifying updateDisplayList() in the item renderer. This is much better!

Reply
Franto says:

September 30, 2010 at 1:02 pm

Hi Peter,

this is solution for to have non selectable list, but I need list which is selectable, but I want to prevent default selection to be drawn (I have own skin for selection). I know how to do it in Flex 3 (override protected method which draw selection), but I didnt find way in Flex 4 how to do it. Do you know answer?

thank you

Reply
Franto says:

September 30, 2010 at 1:04 pm

ok, I’m sorry. I was to fast to ask and didnt check “autoDrawBackground” set to false :) It works like a charm :)

Reply
Pedro Arelo says:

October 15, 2010 at 5:34 am

Hello,

What if you have to had the autoDrawBackground property to true so you can still use the alternating item colors?
I have a list that i need to have alternating row colors, drag /drop enabled, and the selection color invisible.

Thanks,
PA

Reply
College loans says:

November 7, 2010 at 5:28 pm

Pelase visit my blgo about art deco diamonds for relaxation

Reply