Highlight,change color of row on mouseover in grid view using CSS – C#.Net ASP.Net VB.Net

In this article i am going to explain about how to highlight/change color on mouse over in grid view using CSS. This is achieved by setting the different class on mouseover and mouseout event on the datarow of gridview. This can be acieved using the OnRowCreated event of the gridview.


For explanation purpose i have created a table called Users in my local database and inserted some sample records. And also i have created a procedure called GetUsersDetail which will return all the users detail from the users table. below is the sql script used.

Now open the visual studio and create a new website. In your default.aspx page drag and drop the GridView control from the toolbox and set the AutoGenerateColumns property to true to bind the columns returned from the procedure. And also i have added event handler for OnRowCreated event. Html markup is given below.

Highlight Gridview Row On MouseOver in
C#.Net,
ASP.Net VB.Net using CSS

If you look into the html markup i have created two classes called onmouseout and onmouseover. Which is used to set to the grid view row events.

Now i have added my connection string information in the web.config file like below.

Connection String:

Now please import the below mentioned namespaces in your code behind file to make use of it.

C#.Net:

VB.Net:

After that i have written the code to fetch data from users table on page load event. Below is the code used

C#.Net:

VB.NET

Now if you run the code you will get the output as given below…

Output of Highlight,change color of row on mouseover in grid view using CSS - C#.Net ASP.Net VB.Net

But i would like to highlight or change the colour of the current row on mouse over event. To achieve this i have written the following code in OnRowCreated event of the gridview. I have simply set two different classes on onmouseover and onmouseout events. The classes will change the backgroud color or highlight the specified row by specified colour.

C#.Net:

VB.Net:

Now while moving the cursor over the grid view row the row will get highlighted.

Output of Highlight,change color of row on mouseover in grid view using CSS - C#.Net ASP.Net VB.Net

Download C#.Net,ASP.Net & VB.Net Sourcecode to Highlight,change color of row on mouseover in grid view using CSS:

 Highlight,change color of row on mouseover in grid view using CSS C#.Net VB.Net ASP.Net
You may also like:
  1. Binding Gridview in Asp.net
  2. C#.Net – Programmatically Group Gridview Column Headers in ASP.Net,VB.Net
  3. Fill Datatable and Bind GridView Using Data Reader in ASP.Net C#.Net VB.Net
  4. Form hyperlink with querystring inside gridview in ASP.Net/C#.Net
  5. How to show confirm message while deleting grid view row.
  6. Select deselect all checkboxes in grid view using javascript
  7. Auto redirect page using javascript
  8. Auto refresh page using javascript


Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!