Gridview headertemplate with checkbox and client side ( javascript) handling of select all / unselect all
Gridview headertemplate with checkbox and client side handling of select all / unselect all using javascript.
courtesy from
http://dotnetslackers.com/Community/blogs/kaushalparik/archive/2008/07/16/checkbox-in-headertemplate-to-select-all-checkboxes-inside-a-gridview-using-javascript.aspx
Idea and code from this site, I enhached and made small corrections this for my application, according to my requirement
Thanks to http://dotnetslackers.com/ for all the code.
<div>
<input type="hidden" id="hdnCheckBoxValue" />
<table>
<tr>
<td style="width: 100px;">
<asp:GridView ID="gvVendorBulletin">
<Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle"
HeaderText="" ItemStyle-BorderWidth="0">
<ItemTemplate>
<asp:CheckBox ID="chkItem" runat="server" onclick="VendorItemSelected(this)" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkHdrItem" runat="server" onclick="VendorSelectAll(this)" />
</HeaderTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
function callFileDownload(a,b)
{
function callCheckAllVendor(CheckBox) {
TotalChkBx = parseInt('<%= this.gvVendorBulletin.Rows.Count %>');
var TargetBaseControl = document.getElementById('<%= this.gvVendorBulletin.ClientID %>');
var TargetChildControl = "chkItem";
var Inputs = TargetBaseControl.getElementsByTagName("input");
var flag = true;
document.getElementById("hdnCheckBoxValue").value = true;
for (var iCount = 0; iCount < Inputs.length; ++iCount) {
if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0) {
if (!Inputs[iCount].checked) {
flag = false;
document.getElementById("hdnCheckBoxValue").value = false;
return;
}
}
}
}
function VendorSelectAll(CheckBox) {
TotalChkBx = parseInt('<%= this.gvVendorBulletin.Rows.Count %>');
var TargetBaseControl = document.getElementById('<%= this.gvVendorBulletin.ClientID %>');
var TargetChildControl = "chkItem";
var Inputs = TargetBaseControl.getElementsByTagName("input");
for (var iCount = 0; iCount < Inputs.length; ++iCount) {
if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0)
Inputs[iCount].checked = CheckBox.checked;
}
}
function VendorItemSelected(CheckBox) {
TotalChkBx = parseInt('<%= this.gvVendorBulletin.Rows.Count %>');
var TargetBaseControl = document.getElementById('<%= this.gvVendorBulletin.ClientID %>');
var TargetChildControl = "chkHdrItem";
var Inputs = TargetBaseControl.getElementsByTagName("input");
if (!CheckBox.checked) {
for (var iCount = 0; iCount < Inputs.length; ++iCount) {
if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0)
Inputs[iCount].checked = CheckBox.checked;
}
}
else {
callCheckAllVendor(CheckBox);
var flags;
if (document.getElementById("hdnCheckBoxValue").value == "true") {
flags = true;
}
else {
flags = false;
}
for (var iCount = 0; iCount < Inputs.length; ++iCount) {
if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0)
Inputs[iCount].checked = flags;
}
}
}
}
</script>
Comments