Disabling item roll over highlighting in the Flex DataGrid control

By Peter deHaan On February 1, 2008 · 17 Comments

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>

Tagged with: useRollOver

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

17 Responses to Disabling item roll over highlighting in the Flex DataGrid control

EvanK says:

February 11, 2008 at 11:39 am

I know Flash AS3 controls are not exactly the same as Flex AS3 controls, but could this same effect be achieved on a Flash DataGrid, even though they do not have a ‘useRollOver’ property?

Reply
Atom says:

February 21, 2008 at 11:02 am

Yep, you are correct Evan. At least, it seems to work for me…

Reply
Anthony Ettinger says:

March 13, 2008 at 3:50 pm

I found that I’m unable to disable RollOver colors for the datagrid header.

I tried “useRollOver: false;” in the headerStyleName definition, but it seems to ignore it (as in your example here as well).

I find I’d rather disable rollover for the header, rather than the rows…those I do want rollovers.

Reply
Mai Ta says:

September 23, 2008 at 8:13 pm

hi all!
I have problem in the same “Anthony Ettinger” but i want to change rollover color for header. I don’t want the header has rollover color like on rows.
But i don’t find any properties support this problem.
If you have any solving for it, please help me! Thanks for reading my problem!

Reply
Lollo says:

December 4, 2008 at 1:48 am

Hi,

i’ve a question for you..

i have a datagrid with various rows…some rows are emty…so for them i would disable user interaction..but only in as3 and not under mxml shortcut…

thanks in advance

regards Lollo

Reply
Theo says:

January 19, 2009 at 8:26 am

I am also looking for a way to have some rows disabled and not all.

It would be great if I could disable one or more rows.

Reply

Tom says:

May 17, 2009 at 9:29 am

A piece of code I use all the time to set programmatically the highlighted item in a component extending ListBase class: (Exemple for a Tree:)

	public class MyTree extends Tree
	{
		public function setHighlightItem(data:IListItemRenderer):void
		{
			this.highlightItemRenderer = data;
 
			super.selectItem(data,false,false,true);
		}
	}

Jamie says:

October 30, 2009 at 1:50 am

I have made an example where I have a different roll-over color for the header of a datagrid component. Maybe this is of use to some of you. The example can be found here.

Reply
abhishek says:

January 19, 2010 at 9:47 pm

can we prevent datagrid to use default selection color of cell.
When datagrid is in edit mode, after click on cell default blue color comes to border of cell.
I want to not give any color thr , can we do this ?
thx in advanced,
abhishekchess1@gmail.com
:)

Reply

Ajaz says:

February 1, 2010 at 11:02 am

Can any body plz help me out …. I want to change the cursor style of datagrid while mouse moving over datagrid conditionally.. like for one row iant to shos hand cursor for other row i don want want .. so, can anybody me in this respect??????

Peter deHaan says:

February 1, 2010 at 5:35 pm

@Ajaz,

This works for mx:List, but it should be the same for mx:DataGrid (I assume)…

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<mx:Application name="MX_List_itemRollOver_cursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
 
            [Embed("assets/accept.png")]
            public static const accept:Class;
 
            [Embed("assets/anchor.png")]
            public static const anchor:Class;
 
            protected function list_itemRollOverHandler(evt:ListEvent):void {
                var dat:Object = evt.itemRenderer.data;
                if (dat.hasOwnProperty("curses")) {
                    cursorManager.setCursor(dat.curses);
                }
            }
 
            protected function list_itemRollOutHandler(evt:ListEvent):void {
                cursorManager.removeAllCursors();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list"
            width="200"
            itemRollOver="list_itemRollOverHandler(event);"
            itemRollOut="list_itemRollOutHandler(event);">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Anchor cursor" curses="{anchor}" />
                <mx:Object label="default cursor" />
                <mx:Object label="Anchor cursor" curses="{anchor}" />
                <mx:Object label="Accept cursor" curses="{accept}" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:List>
 
</mx:Application>

Peter

Peter deHaan says:

February 1, 2010 at 6:01 pm

Promoted to a full example; http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/

Peter

Alpana says:

May 4, 2010 at 8:20 am

I set “color” of each cell in datagrid based on condition. ie based on a condition the text in the cell is either red or blue.
But for a highlighted row (either on selection or rollover) , the color of text is lost.
I have noticed that this is the case when selectionMode=”singleRow”. When selectionMode=”singleCell”, and the cell is highlighted, the color of text is not lost. Please let me know if someone has solution to this problem.

Thanks in advance

Reply
Brad Manderscheid says:

June 18, 2010 at 9:37 am

What if i need the text color to change on rollover but not the row? I still want to use the text-roll-over-color style, but kill the roll-over-color.
Thanks for any help

Reply
- Peter deHaan says:
  
  June 18, 2010 at 10:28 am
  
  @Brad Manderscheid,
  
  As long as you don’t need alternating item colors, this may work for you:
  <mx:Style> DataGrid { alternatingItemColors: white,white; rollOverColor: white; textRollOverColor: red; useRollOver: true; } </mx:Style>
  Peter
  
  Reply
  - Peter deHaan says:
    
    June 18, 2010 at 11:00 am
    
    Actually, some possibly better solutions w/ mx:List at “Disabling item highlight indicator in the MX List control in Flex 3″.
    
    Peter
Dan says:

July 19, 2011 at 10:38 pm

Hi there,

I would like to be able to just disable the highlighting for a particular item. Let’s say the third one in the list.

Any ideas on how to achieve that?

Thanks in advance!

Reply