Mouse Overs For ASP.NET

Sharing is Caring

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.

Sharing is Caring

Brian is a programmer and technology leader living in Niagara Falls with more than ten years of development experience. He is passionate about automation, business process re-engineering, and building a better tomorrow.

Brian is a proud father of four: two boys, and two girls and has been happily married to Crystal for more than ten years. From time to time, Brian may post about his faith, his family, and definitely about technology.