Disable roll-over color for List or DataGrid components

Question

I want to get rid of the typical Flex roll-over color in list-based components, and to display my own style of roll-over rendering.

Setting useRollOver to 'false' is not an option, since disabling that will also make the List.isItemHighlighted() function to always return false. My custom renderer relies on that function.

Can it be so hard? Is there no way of setting that roll-over color to transparent? Is there some other way for my renderer to figure out if an item is highlighted?

Thanks!

EDIT: Of course I could set the rollOver color to 'white' and set the alternatingRowColors to something similar to white. Kind of cheating :)

Answer 1

By setting 'autoDrawBackground' property to 'false' in the custom ItemRenderer you can disable the default hovered and selected background colors and then set them in your renderer if needed.

This is spark List option only. MX controls don't have it.

Answer 2

@invertedSpear, thanks for your hint.

It actually works! I mean, subclassing, not editing the SDK, haven't tried that. But what you can do is to create a subclass for a List, DataGrid etc (or even AdvancedDataGrid) and add the following function:

override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number,
    height:Number, color:uint, itemRenderer:IListItemRenderer):void
{
    // get style -- is this the right place?
    var alpha:Number = this.getStyle("rollOverAlpha");
    if (isNaN(alpha))
        alpha = 1.0;

    // no need to draw if alpha 0
    if (alpha <= 0)
        return;

    // draw -- this has been copied from superclass, and the alpha parameter added to beginFill()
    var g:Graphics = Sprite(indicator).graphics;
    g.clear();
    g.beginFill(color, alpha);
    g.drawRect(0, 0, width, height);
    g.endFill();

    indicator.x = x;
    indicator.y = y;
}

Now if you add a style declaration to the class, you are ready to roll:

[Style(name="rollOverAlpha", type="Number", inherit="no")]
public class DataGridExt extends DataGrid
{
    ...
}

Changing this in the SDK would of course be a better choice since you would only have to touch two classes: ListBase and AdvancedListBase. I'll check for an Adobe Jira Issue on that..

Answer 3

There is a way to do this, but it's not fun. You can edit the SDK itself (Yay for open source). You can go in there, find where it's setting the highlight color and start adding code to produce a public property for the highlight's alpha. I would back up your SDK first as there is a possibility of totally screwing things up.

It looks like the rollOver code is in the ListBase class, so I would make a copy or an extension of that class and add the code for roll over alpha to that. Then I would make a copy of the List class that inherits from this new ListBase.

Good luck my friend, and if you are successful please share your new classes with the world as I'm sure others may want to do the same thing.