VB.Net Code to Highlight the ASP.net GridView Row onmouseover

Highlight Row functionality of ASP.Net GridView control can be developed by using the combination of CSS and Javascript code with the help of VB.Net server side code to attach the script with each dynamically generated gridview row item. You can use onmouseover event for row item of GridView Control. In ASP.Net, the 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 over the GridView rows and add new attribute to each row item. Here we will use VB.Net code to bind the GridView control with category table SQL Northwind Database. 

CSS Class Used to Highlight GridView Row

.rowStyle {
    background-color:#AAFFEE;
    cursor:pointer;
}

VB.Net Code for ASP.Net GridView Highlight Row onmouseover

GridView1.DataSource = myDataSet
GridView1.DataBind()

For Each rowItem As GridViewRow In GridView1.Rows
    rowItem.Attributes.Add("onmouseover", "javascript:this.className = 'rowStyle'")
    rowItem.Attributes.Add("onmouseout", "javascript:this.className = ''")
Next

Javascript has been 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 the old background color by removing the CSS class name of row item. 

When row.Attributes.Add function is used inside the for each loop over each item of GridView it enables you to add 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:

onmouseover="javascript:this.className = 'rowStyle'" onmouseout="javascript:this.className = ''"

You can use the HTML template code for GridView control and VB.net code for its databinding from the previous tutorial: ASP.Net Select GridView Row using VB.Net.

Continue to next tutorial: ASP.Net GridView DropDownList DataBinding using VB.Net to learn how to place and bind the dropdownlist inside the gridview control.