Highlight ASP.NET GridView Rows On Mouse Over Using VB.NET

Here, we will see how to highlight rows of GridView on mouse hover in ASP.NET with the help of VB.NET
  • 5537
 
To apply the hover effect to the GridView rows we can use CSS. The below code define the CSS in head section.

<style type="text/css">

 #GridView2 tr.rowHover:hover

    {

        background-color: red;

        color: black;

        font-family: Arial;

    }

</style>

 

CSSClass property
 
 

CssClass property of the GridView has been set as rowHover when GridView renders on the page, each row of the GridView is rendered with rowHover CSS class that only takes effect when we mouse hover on the GridView row.

 

CssClass="rowHover"

 

GridView With cssClass

 

.aspx code

 

<asp:GridView ID="GridView2" runat="server" 

            CssClass="rowHover" ClientIDMode="Static" Height="175px"

            Width="345px"   >

            <RowStyle CssClass="rowHover" />

        </asp:GridView>

 

.CS code

 

Imports System.Data.SqlClient

Public Class WebForm1

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim tab As New Table

        Dim con As New SqlConnection("Data Source=(local); uid=sa; pwd=Password$2; database=master")

        con.Open()

        Dim dt As New SqlDataAdapter("select * from Article", con)

        Dim ds As New DataSet()

        dt.Fill(ds, "article")

        GridView2.DataSource = ds

        GridView2.DataBind()

    End Sub

End Class
 

Now run the application.

figure1.gif
Now move the mouse over GridView.

figure2.gif


Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.