Disabling item roll over highlighting in the Flex DataGrid control

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>

17 thoughts on “Disabling item roll over highlighting in the Flex DataGrid control

  1. 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?

  2. 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.

  3. 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!

  4. 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

  5. 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);
    		}
    	}
  6. 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.

  7. 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
    :)

  8. 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??????

    1. @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

  9. 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

  10. 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

    1. @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

  11. 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!

Comments are closed.