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

Highlight GridView Row on CheckBox Check or Selection in jQuery

59
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 export gridview data to word excel text and pdf, get gridview selected row hiddenfield value using jquery, bind gridview using executereader and other more cracking tutorials on GridView, Asp.net here.

Now here in this tutorial, I’ll explain how you can highlight gridview row when you check or select from checkbox or check all rows with select all checkbox functionality from client-side using jQuery in asp.net with example code and step by step guide.

Function To Highlight GridView Row In jQuery

First add the following selected css class to highlight gridview row in head section in your .aspx page.

<style type="text/css">
    .selected {
        background-color: #f5f5f5;
    }
</style>

Now add the following code snippet that will call on Checkbox click/checked jquery client-side event and get the selected or checked row and add or remove selected class respectively.

<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 () {
        //Checkbox header select all settings
        $('#chkSelectAll').click(function () {
            if ($(this).is(":checked")) {
                $('.chkSelect').prop('checked', true);
                //add the selected class from each row
                $('.chkSelect').closest("tr").addClass("selected");
            } else {
                $('.chkSelect').prop('checked', false);
                //remove selected class from each row
                $('.chkSelect').closest("tr").removeClass("selected");
            }
        });

        //Checkbox gridview row select settings
        $('.chkSelect').click(function () {
            //remove chkSelectAll checked when any of the child checkbox clicked
            $('#chkSelectAll').removeAttr("checked"); if ($(this).is(":checked")) {
                //add the selected class to selected row
                $($(this).closest("tr")).addClass("selected");
            } else {
                //remove the selected class from selected row
                $($(this).closest("tr")).removeClass("selected");
            }
        });
    });
</script>

HTML Markup To Highlight GridView Row – [.aspx]

Here is the complete HTML markup code for .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Highlight gridview rows on row check or selection in asp.net
                using c# or vb.net</title>
    <style type="text/css">
        .selected {
            background-color: #f5f5f5;
        }
    </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 () {
            //Checkbox header select all settings
            $('#chkSelectAll').click(function () {
                if ($(this).is(":checked")) {
                    $('.chkSelect').prop('checked', true);

                    //add the selected class from each row
                    $('.chkSelect').closest("tr").addClass("selected");
                } else {
                    $('.chkSelect').prop('checked', false);

                    //remove selected class from each row
                    $('.chkSelect').closest("tr").removeClass("selected");
                }
            });//Checkbox gridview row select settings
            $('.chkSelect').click(function () {
                //remove chkSelectAll checked when any of the child checkbox clicked
                $('#chkSelectAll').removeAttr("checked"); if ($(this).is(":checked")) {
                    //add the selected class to selected row
                    $($(this).closest("tr")).addClass("selected");
                } else {
                    //remove the selected class from selected row
                    $($(this).closest("tr")).removeClass("selected");
                }
            });
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h4>Highlight gridview rows on row check or selection in asp.net using c# or vb.net</h4>
        <asp:GridView ID="grdResult" runat="server" AutoGenerateColumns="false">
            <HeaderStyle Font-Bold="true" BackColor="#9a9a9a" BorderColor="#222"
                ForeColor="White" Height="30" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <input type="checkbox" id="chkSelectAll" style="width: 50px;">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input type="checkbox" class="chkSelect" style="width: 50px;">
                    </ItemTemplate>
                </asp:TemplateField>
                <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 the grid view. So choose your language (that is C# or Vb.net) and paste it to your code-behind file.

Binding Asp.net Gridview In C# – [.cs]

Now add the following namespace:

using System.Data;
using System.Collections;

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

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 In Vb.net – [.vb]

Now add the following namespace:

Imports System.Data
Imports System.Collections

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 articleGet GridView Selected Row HiddenField Values in jQuery From Client-side
Next articleHighlight Asp.net GridView Row on Mouse Hover in jQuery
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

5 × 5 =