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
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)
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
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