.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Melody Anderson
Eminent IT

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Highlight row in gridview on mouseover using css and Javascript

Posted By:Pankaj Mishra       Posted Date: July 17, 2009    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  

Highlight row in gridview on mouseover using css and Javascript in Asp.Net.

In this article we will see how to change background color of a row on mouse over and and back to normal when mouse out.

You might have seen in many site that if you mouse over to some content it will be highlighted and once you move out your mouse cursor from that content it will be normal.

In Asp.Net we use GridView to display data and if you want the same functionality to highlight the color of the row you can achieve that

using css and javascript in client side itself without postback.

As we all know that GridView is rendered as HTML table in the client side and we have onmouseover, onmouseout javascript event of TR tag

we will make use of onmouseover event to highlight row and onmouseout to make the backcolor of gridview row as normal using CSS.

Let's see step by approch how can do we do that.

Step 1 : Drag and Drop GridView from Visual Studio toolbox to your asp.net web page

Step 2: In your HTML view of webpage inside the head tag or if you have .css file in your project you can write these lines of css code

Step 3: On RowCreated event of Gridview which will fire when you can Bind() Method of Gridview for eg GridView1.DataBind(); write this code

  In C# Code Example

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
// Leave header and footer of Gridview and assign in the rest of the item row
if (e.Row.RowType != DataControlRowType.Header || e.Row.RowType != DataControlRowType.Header)
e.Row.Attributes.Add("onmouseout", "this.className='normalRow'");
e.Row.Attributes.Add("onmouseover", "this.className='highlightRow'");

In VB.NET code Sample

Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
' Leave header and footer of Gridview and assign in the rest of the item row
If e.Row.RowType <> DataControlRowType.Header OrElse e.Row.RowType <> DataControlRowType.Header Then
e.Row.Attributes.Add("onmouseout", "this.className='normalRow'")
e.Row.Attributes.Add("onmouseover", "this.className='highlightRow'")
End If
End Sub

And you are done.

Now run your application and move your mouse cursor to the GridView Row and you will see that row color is changed when mouse is over row. See sample picture below

Hope this will helpfull to all

You can also donwload sample application below

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend