How to set hovered color in a MXAdvancedDataGridItemRenderer?

Question

I am trying to create an item renderer for an AdvancedDataGrid, using a MXAdvancedDataGridItemRenderer.

When I attach a sample custom item renderer (MXAdvancedDataGridItemRenderer) to hierarchical data in an AdvancedDataGrid the item renderer does not render the cell correctly. The custom renderer will only render as a hovered (highlighted) state if it also not selected. When the row is selected and hovered then the custom item renderer will only render the cell as selected.

How can I get the custom renderer to recognize that is should render highlighted when the row is highlighted?

The image below shows an example of this. The first row is selected and the mouse is over the second cell. As you can see the cell is rendered as 'selected' and not as 'hovered'.

This is an example application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var data:ArrayCollection = new ArrayCollection([
                {label:"Fruit", children:[
                    {label:"Apple", price:1.5},
                    {label:"Banana", price:2},
                    {label:"Orange", price:1.75}]},
                {label:"Drink", children:[
                    {label:"Water", price:0.5},
                    {label:"Milk", price:2.25},
                    {label:"Juice", price:1.25}]}
                ]);
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <mx:AdvancedDataGrid x="10" y="10" width="350" height="200" itemRenderer="TestItemRenderer">
        <mx:dataProvider>
            <mx:HierarchicalData source="{data}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Name" dataField="label"/>
            <mx:AdvancedDataGridColumn headerText="Price" dataField="price"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

</s:Application>

And this is the example MXAdvancedDataGridItemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true">

    <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />

</s:MXAdvancedDataGridItemRenderer>

Answer 1

You may want to try to put add autoDrawBackground="false" to your MXAdvancedDataGridItemRenderer. I had problems using the "single cell" selection mode for for an ADG and this fixed the problem.

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true"
                                  autoDrawBackground="false">

  <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />

</s:MXAdvancedDataGridItemRenderer>

Answer 2

Try this (note rollOverColor ):

<mx:AdvancedDataGrid x="10" y="10" width="350" height="200" rollOverColor="0xff0000" itemRenderer="TestItemRenderer">
        <mx:dataProvider>
            <mx:HierarchicalData source="{data}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Name" dataField="label"/>
            <mx:AdvancedDataGridColumn headerText="Price" dataField="price"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

Cheers, Rob

Answer 3

You can also achieve this by setting 'Style' for AdvancedDataGrid

AdvancedDataGrid {
textRollOverColor: #000000;
textSelectedColor: #FFFFFF;
disabledColor: #8E8E8E;
borderColor: #454545;
alternatingItemColors: #FFFFFF, #FCFCFC;
verticalGridLineColor: #F6F6F6;
color: #000000;
selectionColor: #A0B3BE;
rollOverColor: #DBE4E6;
borderStyle: none;
borderThickness: 0;
fontSize: 12;
headerColors: #DBE4E6, #DBE4E6;
selectionDisabledColor: #FFFFFF;

}