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

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 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-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>

[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.

10 thoughts on “Preventing the selected item highlighting in the Spark List control in Flex 4

      1. Sorry, I should clarify… This was a JIRA ticket within our company for removing rollover and selected colors from a particular spark List.

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

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

  3. 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

  4. 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

Comments are closed.