Home Asp.net Highlight Asp.net GridView Row on Mouse Hover in jQuery

Highlight Asp.net GridView Row on Mouse Hover in jQuery

32
0
Highlight Asp.net GridView Row on CheckBox Check or Selection using jQuery
Highlight Asp.net GridView Row on CheckBox Check or Selection using jQuery

In my previous tutorials, I’d explained how to get gridview selected row hiddenfield value using jquery, how to bind asp.net gridview, print gridview data on print button click and other more cracking tutorials on GridView, Asp.net here.

Now here in this tutorial, I’ll explain how you can highlight asp.net gridview row on mouse hover or give style to using css3 pseudo selector from client-side using jQuery in asp.net with example code and step by step guide.

You can highlight grid view row in many ways but here in this tutorial I’ll explain two common ways to do the job.

Method 1: Highlight Asp.net GridView Row By Using CSS3 Pseudo Code

By using this method, you don’t need to use jQuery (that is Method – 2). Using a css :hover pseudo selector would do the job for you.

#grdResult tr:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

Method 2: Highlight Asp.net GridView Row By Using jQuery .hover Event

To use this method, you need to first add the highlight class in style section of your .aspx page:

.highlight {
    background-color: #f5f5f5;
    cursor: pointer;
}

After that add the following jQuery script in script section of your .aspx page:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#grdResult tr').hover(function () {
            $(this).addClass('highlight');
        }, function () {
            $(this).removeClass('highlight');
        });
    });
</script>

HTML Markup Code To Highlight Asp.net GridView Rows – [.aspx]

Here is the complete HTML markup code to highlight asp.net gridview row that I used for this demonstration in my .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Highlight gridview rows on mouse hover in asp.net using c# or vb.net</title>
    <style type="text/css">
        /*Method:1 - you don't need to use jQuery, using a css ':hover' pseudo selector would do the job.
        #grdResult tr:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }*/
        .highlight {
            background-color: #f5f5f5;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#grdResult tr').hover(function () {
                $(this).addClass('highlight');
            }, function () {
                $(this).removeClass('highlight');
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h4>Highlight gridview rows on mouse hover in asp.net</h4>
            <asp:GridView ID="grdResult" runat="server" AutoGenerateColumns="false">
                <HeaderStyle Font-Bold="true" BackColor="#9a9a9a" BorderColor="#222"
                    ForeColor="White" Height="30" />
                <Columns>
                    <asp:BoundField DataField="SubjectName" ItemStyle-HorizontalAlign="Center"
                        HeaderText="Subject Name" ItemStyle-Width="200" />
                    <asp:BoundField DataField="Marks" HeaderText="Marks" ItemStyle-Width="200"
                        ItemStyle-HorizontalAlign="Center" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

After adding HTML markup to .aspx page, we need to bind asp.net grid view. So choose your language (that is C# or Vb.net) and paste it to your code-behind file.

Binding Asp.net GridView Using C# – [.cs]

Now add the following namespace:

using System.Data;

After that add the following code to .aspx.cs page:

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        LoadResultData();
    }
}

private void LoadResultData() {
    DataTable dt = new DataTable();

    //Creating Column
    dt.Columns.Add("SubjectId");
    dt.Columns.Add("SubjectName");
    dt.Columns.Add("Marks");

    //Adding Results in rows
    dt.Rows.Add(1, "Asp.net", 95);
    dt.Rows.Add(2, "C#", 88);
    dt.Rows.Add(3, "Vb.net", 78);
    dt.Rows.Add(4, "HTML", 89);
    dt.Rows.Add(5, "CSS", 90);
    dt.Rows.Add(6, "JavaScript", 85);
    dt.Rows.Add(7, "jQuery", 96);

    //Binding Results to gridview
    grdResult.DataSource = dt;
    grdResult.DataBind();
}

Binding Asp.net GridView Using Vb.net – [.vb]

Now add the following namespace:

Imports System.Data

After that add the following code to .aspx.vb page:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadResultData()
    End If
End Sub

Private Sub LoadResultData()
    Dim dt As New DataTable()

    'Creating Column'
    dt.Columns.Add("SubjectId")
    dt.Columns.Add("SubjectName")
    dt.Columns.Add("Marks")

    'Adding Results in rows'
    dt.Rows.Add(1, "Asp.net", 95)
    dt.Rows.Add(2, "C#", 88)
    dt.Rows.Add(3, "Vb.net", 78)
    dt.Rows.Add(4, "HTML", 89)
    dt.Rows.Add(5, "CSS", 90)
    dt.Rows.Add(6, "JavaScript", 85)
    dt.Rows.Add(7, "jQuery", 96)

    'Binding Results to gridview'
    grdResult.DataSource = dt
    grdResult.DataBind()
End Sub

Example Result

Highlight Asp.net GridView Row on CheckBox Check or Selection using jQuery
Highlight Asp.net GridView Row on CheckBox Check or Selection using jQuery

Download Example

Previous articleHighlight GridView Row on CheckBox Check or Selection in jQuery
Next articleGet GridView Selected Row Data In C# Vb From Code-behind
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4 × five =