Gridview Checkbox Check And Uncheck Using jQuery In ASP.NET

Introduction

This article gives an introduction of how to select or deselect single and multiple GridView rows using jQuery.

Background

You may have seen this type of check/uncheck checkbox control in email (like Gmail, Hotmail, Yahoo etc.) GridView. If you are using a checkbox control in GridView, then necessarily add the header checkbox in a GridView header.

Requirement

ASP.NET GridView and jQuery library.

We will create a GridView with checkbox step by step.

Step 1 Start Visual Studio.

Step 2 Add Web Application.

Step 3 Select Solution Explorer.

Right click on project and got to Add - Add New Item.

Add new Web form with the name Gridview.aspx

Step 4

Go to Gridview.aspx page >> Toolbox >> Add GridView.

Drag and drop the default GridView, as shown below.

In default GridView, we bind two data fields from our database table and create checkbox control using GridView TemplateField.

Modified GridView is shown below.

The design code of GridView bound column TemplateField is shown below.

Now, we will bind the data from data table.

Connect Web application with the database, as given below. Go to Menu - Tools - Connect to Database
Define database connection string in project web.config file.
Access the database connection string from web.config file on Gridview.aspx.cs, as shown below.
The GridView is bound with the database using SqlDataAdapter of Gridview.aspx.cs.

Now, we need to write a few lines of jQuery code to the checked or unchecked function for GridView header checkbox and GridView row checkbox.

Add the jQuery reference file on gridview.aspx page, as shown below.

Now, write the jQuery function code for GridView checkbox on gridview.aspx page.

The full code of Gridview.aspx is given below.

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Master.master" AutoEventWireup="true" CodeFile="Gridview.aspx.cs" Inherits="Jquery_Example_Gridview" %>
<aspContent ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript" src="http//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Checked or unchecked All Checkboxes inside grid with header checkbox
$("#<%= GridEmpRecord.ClientID %> input[id*='chkHeader']").click(function() {
if ($(this).is('checked'))
//Checkd All Child checkbox
$("#<%= GridEmpRecord.ClientID %> input[id*='chkChild']").attr('checked', this.checked);
else
//UnCheckd All Child checkbox
$("#<%= GridEmpRecord.ClientID %> input[id*='chkChild']").removeAttr('checked', this.checked);
});
// Header checkbox checked or unchecked inside grid row checkboxes
$("#<%=GridEmpRecord.ClientID%> input[id*='chkChild']checkbox").click(function() {
//Get All Checkbox inside grid
var GetAllCheckboxes = $("#<%=GridEmpRecord.ClientID%> input[id*='chkChild']checkbox").size();
//Get number of checked checkboxes inside grid
var MarkcheckedCheckboxes = $("#<%=GridEmpRecord.ClientID%> input[id*='chkChild']checkboxchecked").size();
//Check / Uncheck top checkbox if all the checked boxes in list are checked
$("#<%=GridEmpRecord.ClientID%> input[id*='chkHeader']checkbox").attr('checked', GetAllCheckboxes == MarkcheckedCheckboxes);
});
});
</script>
</aspContent>
<aspContent ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<aspGridView runat="server" ID="GridEmpRecord" AutoGenerateColumns="False" Height="262px" Width="301px">
<Columns>
<aspTemplateField>
<HeaderTemplate>
<aspCheckBox ID="chkHeader" runat="server" /> </HeaderTemplate>
<ItemTemplate>
<aspCheckBox ID="chkChild" runat="server" /> </ItemTemplate>
</aspTemplateField>
<aspTemplateField HeaderText="Name">
<ItemTemplate>
<%#Eval("EmpName")%>
</ItemTemplate>
</aspTemplateField>
<aspTemplateField HeaderText="Department">
<ItemTemplate>
<%#Eval("EmpDepartment")%>
</ItemTemplate>
</aspTemplateField>
</Columns>
</aspGridView>
</aspContent>

The full code of gridview.aspx.cs given as below,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class Jquery_Example_Gridview System.Web.UI.Page {
string conString = ConfigurationManager.ConnectionStrings["connstring"].ConnectionString;
protected void Page_Load(object sender, EventArgs e) {
EmployeeDataGrid();
}
private void EmployeeDataGrid() {
using(SqlConnection con = new SqlConnection(conString)) {
using(SqlCommand cmd = new SqlCommand("select EmpName,EmpDepartment from EmployeeDB")) {
SqlDataAdapter dt = new SqlDataAdapter();
try {
cmd.Connection = con;
con.Open();
dt.SelectCommand = cmd;
DataTable dTable = new DataTable();
dt.Fill(dTable);
GridEmpRecord.DataSource = dTable;
GridEmpRecord.DataBind();
} catch (Exception) {
// error code
}
}
}
}
}

Now, build the web application page and execute the code.

The output is shown below.