Description:
Most of the websites require functionality for letting their
users to select and deselect all the items in gridview using a single checkbox.
For example, Yahoo mail or Gmail using such functionality to
select or deselect all mails by clicking the single checkbox.
To implement select/deselect all, we have to add checkbox with gridview
header template.
When the header checkbox is checked, checkbox click() event fires and it will select
all the items in the gridview.
When the header checkbox is unchecked, checkbox clcik() event
fires and it will deselect all the items in the gridview.
Example
program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
function
checkRecAll() {
var
len = document.forms['form1'].elements.length;
var
fields = document.forms['form1'].elements;
var
chkStatus = document.all("GridView1_chkselall").checked
for
(i = 0; i < len; i++) {
if
((fields[i].name.indexOf('chkrecords') != -1)
|| (fields[i].name.indexOf('chkrecords') !=
-1)) {
if
(chkStatus == true) {
if (document.all(fields[i].name).disabled == false) {
document.all(fields[i].name).checked = true;
}
}
else
{
document.all(fields[i].name).checked = false;
}
}
}
}
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Age" HeaderText="Age" />
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox name="chkselall" ID="chkselall" runat="server" onclick="javascript:checkRecAll()">
</asp:CheckBox>Select
All
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkrecords" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Code behind:
protected
void Page_Load(object
sender, EventArgs e)
{
DataTable
dtable = new DataTable("TableName");
dtable.Columns.Add("Name");
dtable.Columns.Add("Age");
DataRow
drow1;
drow1 = dtable.NewRow();
drow1["Name"]
= "john";
drow1["Age"]
= 25;
dtable.Rows.Add(drow1);
DataRow
drow2;
drow2 = dtable.NewRow();
drow2["Name"]
= "joseph";
drow2["Age"]
= 26;
dtable.Rows.Add(drow2);
GridView1.DataSource = dtable;
GridView1.DataBind();
}
Select/Deselect all checkboxes in
gridview using Jquery, Select All checkboxes using Jquery, Jquery Check/Uncheck
all checkboxes, How to check and uncheck a checkbox with Jquery, Select/Deselect all items in gridview
using Jquery.
Adding namespaces for Codebehind will be very nice work
ReplyDeletethanks for ur suggestion venki... i ll try to add for the upcoming posts.
Delete