DataGrid cell background color issue on Apache Royale

Question

Let't take this code

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" 
               xmlns:local="*" xmlns:binding="org.apache.royale.binding.*" applicationComplete="ev_applicationComplete()" >

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>

    <js:initialView>

        <js:View>
            <js:beads>
                <js:VerticalLayout/>
            </js:beads>

            <js:DataGrid id="mydg" x="20" width="400" height="200" rowHeight="40">
                <js:columns>
                    <js:DataGridColumn label="Name" dataField="label" columnWidth="100" />
                    <js:DataGridColumn label="Sales" dataField="value" columnWidth="300" />
                </js:columns>
            </js:DataGrid>

            <js:TextButton text="Set again" click="ev_setdp()"/>
        </js:View>
    </js:initialView>

    <fx:Style>
        @namespace js "library://ns.apache.org/royale/basic";

        .DataGridColumnList .StringItemRenderer {
            border-style: solid;
            border-color: #CCCCCC;
            border-width: 1px;
            background-color: #ff0000;
            line-height: 40px;
            padding: 2px;
        }

        .DataGridColumnList .DataItemRenderer {
            border-style: solid;
            border-color: #CCCCCC;
            border-width: 1px;
            background-color: #ff0000;
            line-height: 40px;
            padding: 2px;
        }


    </fx:Style>

    <fx:Script>
    <![CDATA[

        import org.apache.royale.collections.ArrayList;

        private function ev_applicationComplete():void {
            mydg.dataProvider = ar;
        }

        private function ev_setdp():void {
            mydg.dataProvider = null;
            mydg.dataProvider = ar;
        }

        private var ar:Array = ["Bob", "Joe", "Frank", "Sally"];

    ]]>
    </fx:Script>
</js:Application>

This is showing a Grid with red Cell background. If rollover one cell then Gray color is showing, but when rollout the color isn't red again.

1)Is it a bug ? Do I miss something ?

2) Can someone tell me how to trigger rollovercolor ? (the Gray one). I tried .DataGridColumnList .StringItemRenderer:hoverbut is doesn't work

For 1) I believe the issue is that element.style doesn't have right color after rollout

Answer 1

Try changing the style block to something like:

<fx:Style>
    @namespace js "library://ns.apache.org/royale/basic";

    .DataGridColumnList {
        background-color: #ff0000;
    }

    .StringItemRenderer {
        border-style: solid;
        border-color: #CCCCCC;
        border-width: 1px;
        line-height: 40px;
        padding: 2px;
    }

</fx:Style>