Category >
ASP.NET
|| Published on :
Thursday, January 28, 2016 || Views:
10258
||
Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery Check UnCheck All CheckBoxes
Introduction
Here Pawan Kumar will explain how to Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery
Description
In previous post I have explained
How to avoid a form from double submission using asp.net,
Set max length of MultiLine TextBox in ASP.Net,
Allow only alphabets in a textbox using javascript in asp.net,
jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event,
Create a QR Code with a Logo in ASP.Net C#,
jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#, and many more articles.
Now I will explain How to Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery
So follow the steps to learn Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery
In this article I have explained How to check uncheck or select deselect all checkboxes on click of Select All checkbox in header in Asp.Net GridView using jQuery.
Step 1:Create a aspx web page using the below codes:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var chkAll = $('.header').click(function () {
//Check header and item's checboxes on click of header checkbox
chkItem.prop('checked', $(this).is(':checked'));
});
var chkItem = $(".item").click(function () {
//If any of the item's checkbox is unchecked then also uncheck header's checkbox
chkAll.prop('checked', chkItem.filter(':not(:checked)').length == 0);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdEmp" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" id="chkHeader" class="header" />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkItems" class="item" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" />
<asp:BoundField HeaderText="Code" DataField="EmployeeCode" />
<asp:BoundField HeaderText="Age" DataField="Age" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>
</form>
</body>
</html>
Step 2: Write the following codes in aspx code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
protected void BindGridview()
{
DataTable dt = new DataTable();
//Add Columns to datatable
dt.Columns.Add("EmployeeId", typeof(Int32));
dt.Columns.Add("EmployeeName", typeof(string));
dt.Columns.Add("EmployeeCode", typeof(string));
dt.Columns.Add("Age", typeof(Int32));
//Adding rows and data
dt.Rows.Add(1, "Rahul", "EMP0001", 22);
dt.Rows.Add(2, "Sanjay", " EMP0002", 21);
dt.Rows.Add(3, "Raja", " EMP0003", 24);
dt.Rows.Add(4, "Barkha", " EMP0004", 26);
dt.Rows.Add(5, "Suman", " EMP0005", 25);
//Bind datatable to gridview
grdEmp.DataSource = dt;
grdEmp.DataBind();
}
}
Conclusion:
So, In this tutorial we have learned, Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery
Download Source Codes