How to Highlight a row in DataGrid

In this post I will discuss about how to highlight a row in datagrid when mouse moves over a row, by using onmouseover and onmouseout javascript events.

Datagrid has two events, ItemCreated and ItemDataBound, which allow us to access the data items and create an event handler for the events. ItemCreated event is raised when an item in the datagrid control is created, while ItemDataBound event is raised after an item in the datagrid control is created.

In this example, I will work with the ItemDataBound event, adding handlers for onmouseover and onmouseout javascript events for each of the row in the datagrid.

As you can see from the code snippet below, a row will be highlighted when mouse over and switched to normal when mouse out.

private void dgRows_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
     ListItemType itemType;
     itemType = (ListItemType)e.Item.ItemType;

     if(itemType == ListItemType.Item || itemType == ListItemType.AlternatingItem)
     {
         e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor = 'gray';");
         e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor = '#FFFFFF';");
     }
}

That’s it. Cheers!