Highlight Row functionality of ASP.Net GridView Data Control can be developed by using the combination of CSS and Javascript. You can use onmouseover event for row item of GridView Control. In ASP.Net GridView control renders HTML table to display the data items retrieved from the SQL Database. It displays the header column text in HTML th tag of HTML table. th tag of HTML is generally used to display the table header inside the <tr> </tr> table row tag. Row items of GridView Data control are rendered with <td> tag of HTML table. td is used to generate the table data cells. HTML <td> tag is also rendered inside the tr tag of HTML table. To provide the functionality of ASP.Net GridView Highlight Row onmouseover you have to loop through GridView rows and add new attribute to each row item. Here we will use C# code to bind the GridView control with category table SQL Northwind Database.

CSS Class Used to Highlight GridView Row

C# Code for Asp.Net GridView Highlight Row onmouseover

Javascript is used to change the CSS class name (using javascript this.className method) of the GridView row item dynamically. In this sample code onmouseover attribute has been added to GridView row item to change the background color by specifying the CSS class name and onmmouseout event has been added to set back old color by removing the CSS class name of row item.

When row.Attributes.Add function is used inside the foreach loop over each item of GridView it adds the onmouseover and onmouseout attributes to the tr tag of HTML table with specified javascript methods. It generates the following HTML code to add the attributes:

You can download the free C# source code for this tutorial to highlight the GridView Row:

gridview-highlight.zip (3.03 kb)