CHECK UNCHECK ALL CHECKBOXES IN ASP.NET GRIDVIEW USING JQUERY
Introduction: 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.
Description:
Basically I have implemented the following features in gridview using jQuery.
When the parent Select All checkbox in Header is checked, all child checkboxes in the column will get checked automatically.
When the Select All checkbox is unchecked, all checkboxes in the column will get unchecked automatically.
When all the checkboxes in the column is checked, the Select All checkbox in header will get checked automatically.
When any of the checkbox in the column is unchecked, the Select All checkbox will get unchecked automatically.
Implementation: Let’s create a sample page for demonstration purpose.
HTML Source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/…/l…/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" />
<%-- OR <asp:CheckBox ID="chkHeader" runat="server" Text="All" CssClass="header" />--%>
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkItems" class="item" />
<%--OR <asp:CheckBox ID="chkItems" runat="server" CssClass="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>
Asp.Net C# Code:
using System.Data;
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, "Ajay", "EMP0001",22);
dt.Rows.Add(2, "Irfan", " EMP0002",21);
dt.Rows.Add(3, "Hrithik", " EMP0003",24);
dt.Rows.Add(4, "Ranbir", " EMP0004",26);
dt.Rows.Add(5, "Salman", " EMP0005",25);
//Bind datatable to gridview
grdEmp.DataSource = dt;
grdEmp.DataBind();
}
Description:
Basically I have implemented the following features in gridview using jQuery.
When the parent Select All checkbox in Header is checked, all child checkboxes in the column will get checked automatically.
When the Select All checkbox is unchecked, all checkboxes in the column will get unchecked automatically.
When all the checkboxes in the column is checked, the Select All checkbox in header will get checked automatically.
When any of the checkbox in the column is unchecked, the Select All checkbox will get unchecked automatically.
Implementation: Let’s create a sample page for demonstration purpose.
HTML Source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/…/l…/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" />
<%-- OR <asp:CheckBox ID="chkHeader" runat="server" Text="All" CssClass="header" />--%>
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkItems" class="item" />
<%--OR <asp:CheckBox ID="chkItems" runat="server" CssClass="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>
Asp.Net C# Code:
using System.Data;
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, "Ajay", "EMP0001",22);
dt.Rows.Add(2, "Irfan", " EMP0002",21);
dt.Rows.Add(3, "Hrithik", " EMP0003",24);
dt.Rows.Add(4, "Ranbir", " EMP0004",26);
dt.Rows.Add(5, "Salman", " EMP0005",25);
//Bind datatable to gridview
grdEmp.DataSource = dt;
grdEmp.DataBind();
}
No comments