Saturday, December 6, 2008

Highlight Datagrid or GridView row on mouse over in asp.net

To highlight the row and when mouse moves out, the style sheet is switched back to normal.

Use the following two steps to solve this case. This will applicable for both Gridview and Datagrid controls.

Step 1 : Create styles for normal and highlight view of the row.

<style type="text/css">
.normalrow
{
background-color:white;
}
.hightlighrow
{
background-color:#cccccc;
}
</style>
Step 2 : Now add handler for RowCreated event for the grid and add the attributes for onmouseover and onmouseout javascript events.

Following code snippet shows how this has been done.

protected void OnRowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='hightlighrow'");
e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
}
}
Use the technology!!!