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.
In previous articles i explained How to Delete multiple records from gridview with checkbox selection and Get checkboxlist selected items in comma separated format and Jquery to enable disable all controls placed inside div based on checkbox check uncheck and Jquery to highlight repeater selected row based on checkbox selection and SqlBulkCopy to bulk insert multiple records from gridview to sql database
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.
HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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" />
<%-- 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();
}
Asp.Net VB Code
Imports System.Data
Protected Sub Page_Load(sender As Object,
e As EventArgs)
Handles
Me.Load
If Not IsPostBack Then
BindGridview()
End If
End Sub
Protected Sub BindGridview()
Dim dt As New DataTable()
'Add Columns to
datatable
dt.Columns.Add("EmployeeId", GetType(Int32))
dt.Columns.Add("EmployeeName", GetType(String))
dt.Columns.Add("EmployeeCode", GetType(String))
dt.Columns.Add("Age", GetType(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()
End Sub
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
1 comments:
Click here for commentsnot work
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..