Description
Select/Clear all Check-boxes in grid. Here using
GridView. Additionally it shows the count in display how much Check-boxes selected in Grid while selection.
Code
<html>
<head runat="server">
<title>Select/Clear Checkboxes in Grid</title>
<script type="text/javascript">
var TotalChkBx;
var Counter;
window.onload = function()
{
//Get total no. of CheckBoxes in side the GridView.
TotalChkBx = parseInt('<%= this.gvCheckboxes.Rows.Count %>');
//Get total no. of checked CheckBoxes in side the GridView.
Counter = 0;
RowCount(Counter);
}
function HeaderClick(CheckBox)
{
//Get target base & child control.
var TargetBaseControl = document.getElementById('<%= this.gvCheckboxes.ClientID %>');
var TargetChildControl = "chkBxSelect";
//Get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");
//Checked/Unchecked all the checkBoxes in side the GridView.
for (var n = 0; n < Inputs.length; ++n)
{
if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
{
Inputs[n].checked = CheckBox.checked;
}
//Reset Counter
Counter = CheckBox.checked ? TotalChkBx : 0;
}
RowCount(Counter);
}
function ChildClick(CheckBox, HCheckBox) {
//get target base & child control.
var HeaderCheckBox = document.getElementById(HCheckBox);
//Modifiy Counter;
if (CheckBox.checked && Counter < TotalChkBx) {
Counter++;
}
else if (Counter > 0) {
Counter--;
}
//Change state of the header CheckBox.
if (Counter < TotalChkBx) {
HeaderCheckBox.checked = false;
}
else if (Counter == TotalChkBx) {
HeaderCheckBox.checked = true;
}
RowCount(Counter);
}
function RowCount(Counter)
{
//To display the count how much Check-boxes selected in Grid while selection
document.getElementById('divSelectedRows').innerHTML = 'Selected Rows : ' + Counter;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divSelectedRows">Selected Rows : 0</div>
<asp:gridview id="gvCheckboxes" runat="server" autogeneratecolumns="False" onrowcreated="gvCheckboxes_RowCreated">
<columns>
<asp:boundfield headertext="S.No" datafield="SNo">
<asp:templatefield headertext="Select">
<itemtemplate>
<asp:checkbox id="chkBxSelect" runat="server" />
</itemtemplate>
<headertemplate>
<asp:checkbox id="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
</headertemplate>
<asp:templatefield>
</columns>
<asp:gridview>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridView();
}
}
protected void BindGridView()
{
gvCheckboxes.DataSource = GetDataSource(1000);
gvCheckboxes.DataBind();
}
protected DataTable GetDataSource(int Rows)
{
DataTable dTable = new DataTable();
DataRow dRow = null;
dTable.Columns.Add("SNo");
for (int n = 1; n <= Rows; ++n)
{
dRow = dTable.NewRow();
dRow["SNo"] = n + ".";
dTable.Rows.Add(dRow);
dTable.AcceptChanges();
}
return dTable;
}
protected void gvCheckboxes_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox chkBxSelect = (CheckBox)e.Row.Cells[1].FindControl("chkBxSelect");
CheckBox chkBxHeader = (CheckBox)this.gvCheckboxes.HeaderRow.FindControl("chkBxHeader");
chkBxSelect.Attributes["onclick"] = string.Format("javascript:ChildClick(this,'{0}');", chkBxHeader.ClientID);
}
}
Browser Compatibility
I have tested this script in the following Web browsers:
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Safari
- Opera
Reference
I want to acknowledge this
author[
^] for his
article[
^]. Thanks to him. Actually I have changed/reduced things(in his code) & posted here as a Tip/Trick.
