Home Asp.net Select GridView Rows by Check Uncheck CheckBox in jQuery

Select GridView Rows by Check Uncheck CheckBox in jQuery

112
0
Select GridView Rows by Check Uncheck CheckBox in jQuery
Select GridView Rows by Check Uncheck CheckBox in jQuery

Now here in this tutorial, I’ll explain how to select asp.net gridview rows by check uncheck checkbox in jquery. I’ll also cover how to highlight the selected rows background color (add or remove selected row class) when gridview row is check uncheck or select deselect checkboxes in asp.net.

In my previous tutorials, I’d explained how to export only gridview selected row data to word excel text pdf, send gridview selected row data in email body, get gridview selected row data from code-behind, highlight gridview selected rows and other more cracking tutorials on GridView, Asp.net here.

Check Uncheck CheckBox In jQuery

Following is the jquery script that is used to implement the check uncheck checkbox in asp.net gridview:

<script type="text/javascript">
$(document).ready(function () {
    $('#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");
        }
    });

    $('.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>

In above example we are handling two click events to maintain this functionality.

  • First we need click event of gridview header checkbox that is chkSelectAll to check/uncheck or select/deselect all the checkboxes in asp.net gridview.
  • In last, we need to also manage a specific checkbox’s click event that is chkSelect for gridview rows to select/deselect it. I have used CSS Class Selector for it because it is easy to access multiple elements with same class instead using separate ids.

Everyone likes bonus with the tutorials, so I decided to put bonus in it. In bonus, I added some code that will differentiate the selected rows with background color.

CSS for selected row:

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

To add selected row class you need to apply the following script:

<script type="text/javascript">
    //add the selected class from each row when select all checked
    $('.chkSelect').closest("tr").addClass("selected");

    //add the selected class to selected row when specific row checked
    $($(this).closest("tr")).addClass("selected");
</script>

To remove selected row class you need to apply the following script:

<script type="text/javascript">
    //remove the selected class from each row when select all unchecked
    $('.chkSelect').closest("tr").removeClass("selected");

    //remove the selected class from selected row when specific row unchecked
    $($(this).closest("tr")).removeClass("selected");
</script>

Select GridView Rows by Check Uncheck CheckBox In Asp.net

Following is the complete HTML Markup code that I used for my .aspx page to select asp.net gridview rows by check uncheck checkbox in jQuery:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Check/Uncheck checkboxes in asp.net gridview</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 () {
            $('#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");
                }
            });

            $('.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>
            <asp:GridView ID="grdSubjectList" 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="Subjects" HeaderText="Subjects"
                        ItemStyle-Width="200" ItemStyle-HorizontalAlign="Center" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Binding Asp.net GridView In C#

protected void Page_Load(object sender, EventArgs e) {
    System.Data.DataTable dtSubData = new System.Data.DataTable();

    //Creating Column
    dtSubData.Columns.Add("Subjects");

    //Adding Subjects in column
    dtSubData.Rows.Add("Asp.net");
    dtSubData.Rows.Add("C#");
    dtSubData.Rows.Add("Vb.net");
    dtSubData.Rows.Add("HTML");
    dtSubData.Rows.Add("CSS");
    dtSubData.Rows.Add("JavaScript");
    dtSubData.Rows.Add("jQuery");

    //Binding Subjects to gridview
    grdSubjectList.DataSource = dtSubData;
    grdSubjectList.DataBind();
}

Binding Asp.net GridView In Vb.net

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

    'Creating Column'
    dtSubData.Columns.Add("Subjects")

    'Adding Subjects in column'
    dtSubData.Rows.Add("Asp.net")
    dtSubData.Rows.Add("C#")
    dtSubData.Rows.Add("Vb.net")
    dtSubData.Rows.Add("HTML")
    dtSubData.Rows.Add("CSS")
    dtSubData.Rows.Add("JavaScript")
    dtSubData.Rows.Add("jQuery")

    'Binding Subjects to gridview'
    grdSubjectList.DataSource = dtSubData
    grdSubjectList.DataBind()
End Sub

Example Result

Select GridView Rows by Check Uncheck CheckBox in jQuery
Select GridView Rows by Check Uncheck CheckBox in jQuery

Download Example Code

Git Repo

That’s it, this is one of the best way to select asp.net gridview rows by check or uncheck checkbox using jquery in .net aspx page.

Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.

Happy Coding!

Previous articleTop 10+ Main Difference Between C And C++
Next articleUnable to Serialize the Session State Error in Asp.net
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

seventeen − one =