Monday, April 4, 2016

ASP.NET Gridview : Check and uncheck checkboxes using Jquery

In this article I am going to explain how to check uncheck OR select/deselect checkboxes in gridview control using Jquery.

Check and uncheck the entire checkboxes showing inside Gridview. A checkbox is placed inside headertemplate in Gridview to select and deselect checkboxes.

Add the below given Jquery code before closing the head section of webform.
<script type="text/javascript" src=""></script>
    $(document).ready(function () {
        var CheckAll = $("#chkAll").click(function () {
            if (this.checked) {
                $('.chk').attr('checked', this.checked);
            else {
                $('.chk').attr('checked', this.checked = false);
        $(".chk").click(function () {
            if ($(".chk").length == $(".chk:checked").length) {
                $("#chkAll").attr("checked", "checked");
            } else {


HTML Markup:
<fieldset style="width:30%">
    <legend>Select deselect all checkboxes Example</legend>
     <asp:GridView ID="grdmovie" runat="server" AllowPaging="true" AutoGenerateColumns="false">
        <asp:TemplateField HeaderText="CheckAll">
<input type="checkbox" id="chkAll"/>
<input type="checkbox" class="chk"/>
<asp:BoundField DataField = "Name" HeaderText = "Movie Name" />

<asp:BoundField DataField = "Genre" HeaderText = "Genre" />
<asp:BoundField DataField = "Budget" HeaderText = "Budget (In Cr.)"/>

Import the namespace:
C# code:
using System.Data;
using System.Data.SqlClient;
using System.Configuration; Code:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Bind the Gridview
Create a method to bind Gridview and call it on page load.
C# code:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    public void BindGrid()
            SqlCommand cmd = new SqlCommand("select * from Tb_Movie", con);
            SqlDataAdapter adp = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            if (dt.Rows.Count > 0)
                grdmovie.DataSource = dt;
        catch (Exception ex)
    } Code:
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
        End If
    End Sub
    Public Sub BindGrid()
            Dim cmd As New SqlCommand("select * from Tb_Movie", con)
            Dim adp As New SqlDataAdapter(cmd)
            Dim dt As New DataTable()
            If dt.Rows.Count > 0 Then
                grdmovie.DataSource = dt
            End If
        Catch ex As Exception
        End Try
    End Sub

No comments:

Post a Comment