Have you ever wanted to have the ability for the colour of a row to change when your user moves the mouse over top of a particular row, and then change the colour back whenever the cursor is moved back off?

Well, this process isn’t very difficult in fact using some knowledge of JavaScript & the Document Object Model (DOM) we can dynamically change the background colour.

We need to override the Render class and then add some attributes to each GridViewRow before the page is finally output to the browser.

In this example, I have called the gridview we are adding the mouseovers and mouseouts “gvClients” because it displays a list of my fictional company’s clients. Wherever you see gvClients you need to make sure that you change this to your respective gridview’s name.

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
   /*Using a simple foreach we iterate through the Rows and use the row.Attributes.Add() and pass in the javascript property we want to output as    html, along with the function we will use and then because asp.net usually dynmically creates the names for each item we need to use    the row.ClientID as this will exist only on the client side.
*/
foreach (GridViewRow row in gvClients.Rows)
{
  row.Attributes.Add(“onmouseout”, “ColorGridForMouseOut(‘” + row.ClientID + “‘);”);
  row.Attributes.Add(“onmouseover”, “ColorGridForMouseOver(‘” + row.ClientID + “‘);”);
}

//We finally just pass in the html that’s now been created.
base.Render(writer);
}

— Sample javascript

//Change Color of Gridview on MouseOut
function ColorGridForMouseOver(id) {
var el = document.getElementById(id);

if(el.currentStyle) // for msie
{
if (el.style.backgroundColor !=’orange’)
{
el.style.backgroundColor=’lightblue’;
el.style.cursor=’hand’;
}
}
else // for real browsers 😉
{
if (el.style.backgroundColor != ‘Orange’)
{
el.style.backgroundColor = ‘lightblue’;
el.style.cursor = ‘pointer’;
}
}
}

function ColorGridForMouseOut(id)
{
var el = document.getElementById(id);

if(el.currentStyle) // for msie
{
if (el.style.backgroundColor !=’orange’)
{
el.style.backgroundColor=’White’;
el.style.textDecoration=’none’;
}
}
else // for real browsers 😉
{
if (el.style.backgroundColor != ‘Orange’)
{
el.style.backgroundColor = ‘White’;
el.style.textDecoration=’none’;
}
}
}

Thank you for taking the time to visit.