Flex Examples

Similar to the previous example, “Preventing a user from selecting an item in a Flex DataGrid control”, the following example shows how you can disable the item roll over highlight in the DataGrid control in Flex by setting the useRollOver style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/01/disabling-item-roll-over-highlighting-in-the-flex-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.controls.Alert;

            private function dataGrid_change(evt:ListEvent):void {
                Alert.show(evt.itemRenderer.data.label, evt.type);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="useRollOver:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            useRollOver="{checkBox.selected}"
            rowCount="4"
            width="200"
            change="dataGrid_change(event);">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

As you can see, when the useRollOver style is set to false, the item row highlight is not drawn when moving your mouse over an item in the DataGrid, but the background color is drawn if you select an item. If the useRollOver style is set to true, the item row highlight is drawn when hovering over a list item.

Since useRollOver is a style, you can also set it in an external .CSS file, or in an <mx:Style /> block, as shown in the following snippet:

<mx:Style>
    DataGrid {
        useRollOver: false;
    }
</mx:Style>

Or, you can set the useRollOver style in ActionScript, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        private function init():void {
            dataGrid.setStyle("useRollOver", false);
        }
    ]]>
</mx:Script>