Soliant Consulting | Custom Software Consulting, Development, and Programming

How To Make A DataGrid Row Change On Hover

Here is a wee example that shows how to get an entire row to change color when a cell of a DataGrid is hovered over.

an example (with source code enabled) is here

With an item renderer, you can get a single cell to change color, but it’s harder to get the entire row text color to change. The trick is to change the data in the dataprovider on hover and then get the item renderers to handle the data change by changing color.

Item Renderer Code:

package com.caspar
{
	import mx.controls.Label;
	import mx.controls.listClasses.*;

	public class HighlightFieldLabel extends Label {

		private const HOVER_COLOR:uint = 0xFF0000; // RED
		private const NORMAL_COLOR:uint = 0x474747; // LIGHT GREY 

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			try {
				if(data.hover == "true"){
					setStyle("color", HOVER_COLOR);
				}
				else {
					setStyle("color", NORMAL_COLOR);
				}
			}
			catch (e:Error){
				setStyle("color", NORMAL_COLOR);
			}
		}
	}
}

You then assign this renderer as the renderer for the datagrid in the main file.

<mx:DataGrid id="myDataGrid" dataProvider="{books}" mouseOver="datagrid1_mouseOverHandler(event)" mouseOut="datagrid1_mouseOutHandler(event)">
	<mx:columns>
		<mx:DataGridColumn headerText="Title" dataField="title" itemRenderer="com.caspar.HighlightFieldLabel" paddingLeft="4" />
		<mx:DataGridColumn headerText="Author" dataField="author" itemRenderer="com.caspar.HighlightFieldLabel" paddingLeft="4" />
		<mx:DataGridColumn headerText="URL" dataField="url" itemRenderer="com.caspar.HighlightFieldLabel" paddingLeft="4" />
		<mx:DataGridColumn headerText="Read" dataField="read" itemRenderer="com.caspar.HighlightFieldLabel" paddingLeft="4" />
	</mx:columns>
</mx:DataGrid>

As you can see, I also assign two event handlers to the DataGrid – on MouseOver and MouseOff. When the over event happens, I set the “hover” variable to true for that row, causing the item renderer to redraw the row. On MouseOff, I unset the variable.

Handler Code

protected function datagrid1_mouseOverHandler(event:MouseEvent):void
{
	try {
		var indexData:int = event.target.owner.listData.rowIndex;
		books[indexData].hover = "true";
	}catch (error:Error){
	}
}
protected function datagrid1_mouseOutHandler(event:MouseEvent):void
{
	try {
		var indexData:int = event.target.owner.listData.rowIndex;
		books[indexData].hover = "false";
	}catch (error:Error){
	}
}

I’ve been a bit lazy on the handler code – several components trigger the MouseOver and MouseOff events – you should really check for the appropriate type of component and only reference the indexData then – I just captured the errors in this example.

Right click on the application for the full source code. Enjoy!!