Changing Color of GridView OnMouseOver
By AzamSharp
Views: 8302

Introduction:

In this article I will show you that how you can change the color of the GridView row by attaching the onmouseover event to the rows. The code shown below will work for the GridView control if the alternate item color is the same as the row color.

Attaching the Style to the GridView control:

Since, I need to attach a color to every row of the GridView control the best place for this is the GridView_RowDataBound event which is fired when a row is bound to the GridView control. Let's see the GridView_RowDataBound event:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='blue'");

e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");

}

}

And this is it. Now when you move your mouse over the GridView row the row will highlight and when you move your mouse away from the row the row will change to its original color.

I hope you liked this article, happy coding!

If you are one of the thousands that visit GridViewGuy for your .NET articles and resources, you might be interested in making a donation. Extra cash helps pay for the hosting services and speed things up around here, and makes this website possible.

Make a Donation

Once, again thank you very much and remember its because of you FINE people that this website is up and running.

 

Export Button is a custom control that let's you export your DataGrid or TextBox data to several different formats. The control is extremely easy to use and also exposes design time features. In this article I will discuss some of the features of the Export Button and how it benefits the developer.

BUY IT NOW

 

 

By AzamSharp




Enter Comment/Feedback
  •  
  •  
  •  
  •  
  •  

Comments/Feedbacks
Subject: Style in VB
Name: Anastacio
Date: 4/22/2007 6:30:09 PM
Comment:
This is the code in VB with diferent rows colors:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Chocolate'; this.style.color='White'; this.style.cursor='pointer';")
Select Case DataBinder.Eval(e.Row.DataItem, "estatus")
Case "1"
e.Row.Cells(6).Text = "First Color"
e.Row.BackColor = Drawing.Color.FromName("#ffff99")
e.Row.ForeColor = Drawing.Color.Black
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffff99'; this.style.color='#333333';")
Case "2"
e.Row.Cells(6).Text = "Second Color"
e.Row.BackColor = Drawing.Color.FromName("#f4de41")
e.Row.ForeColor = Drawing.Color.Black
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#f4de41'; this.style.color='Black';")
Case "3"
e.Row.Cells(6).Text = "Third Color"
e.Row.BackColor = Drawing.Color.Gold
e.Row.ForeColor = Drawing.Color.Black
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='Gold'; this.style.color='Black';")
Case "4"
e.Row.Cells(6).Text = "Fourth Color"
e.Row.BackColor = Drawing.Color.FromName("#f8b84d")
e.Row.ForeColor = Drawing.Color.Black
End Select
End If
End Sub
Subject: Question regarding your answer
Name: Nimesh
Date: 8/13/2007 12:48:06 PM
Comment:
Hi,
I like ur answer but what happen if we have alternate row style.
How can we get orignal color of row when mouse left?
Give me reply
Bye
Subject: RE: Question Regarding Your Answer
Name: AzamSharp
Date: 8/14/2007 8:40:38 AM
Comment:
Hi Nimesh,

You can check out the following article:

http://thedotnetguy.com/ArticleDetails.aspx?articleID=244
Subject: set font-decoration to underline
Name: Kusno
Date: 11/8/2007 8:59:03 PM
Comment:
Hi how to change the font-decoration where onMouseOver ? I have search it, but could not find it.

Recommended Books



Join WebHost4Life.com






Copyright GridViewGuy 2007-2008