(CheckBox in HeaderTemplate to) Select All CheckBoxes inside a GridView using JavaScript
In one of my previous blog post, I Described about Mutually Exclusive CheckBox inside GridView.
In this example, there is a "Select All" checkbox in header to select/deselect all the checkboxes inside GridView. MoreOver, if user select all the checkboxes manually one by one, then header checkbox should automatically be selected and vice versa.
Here is the Scenario; There is one TemplateColumn in GridView which is used to Select Row within GridView. So, There will be CheckBox inside ItemTemplate of that TemplateColumn. User would be able to select more than one CheckBox in that Column. And to Select All the CheckBoxes of that colum, There will be a "Select All" CheckBox in HeaderTemplate of that GridView. When user check "Select All" CheckBox in Header, all the checkboxes should be selected and vice versa.
Below is the GridView in my ASPX Page:
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" Text="Select All" onclick="SelectAll(this);" />
</HeaderTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</div>
As I said, if user select all the checkboxes manually one by one, then header checkbox should automatically be selected and vice versa; for that we have to handle GridView_RowDataBound event handler to attach the JavaScript on "OnClick" event of all CheckBoxes inside GridView.
Below is the Code Behind; where we are attaching the JavaScript on "OnClick" of CheckBox:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
try
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string strScript = "SelectDeSelectHeader(" + ((CheckBox)e.Row.Cells[0].FindControl("chkSelect")).ClientID + ");";
((CheckBox)e.Row.Cells[0].FindControl("chkSelect")).Attributes.Add("onclick", strScript);
}
}
catch (Exception Ex)
{
//report error
}
}
Finally, Below is the JavaScript (to Select/DeSelect all the CheckBoxes inside GridView) which is attached to CheckBox in HeaderTemplate:
function SelectAll(CheckBox)
{
TotalChkBx = parseInt('<%= this.GridView1.Rows.Count %>');
var TargetBaseControl = document.getElementById('<%= this.GridView1.ClientID %>');
var TargetChildControl = "chkSelect";
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;
}
}
and another JavaScript function that will select the Header "Select All" CheckBox if user select all the checkboxes manually and vice versa:
function SelectDeSelectHeader(CheckBox)
{
TotalChkBx = parseInt('<%= this.GridView1.Rows.Count %>');
var TargetBaseControl = document.getElementById('<%= this.GridView1.ClientID %>');
var TargetChildControl = "chkSelect";
var TargetHeaderControl = "chkSelectAll";
var Inputs = TargetBaseControl.getElementsByTagName("input");
var flag = false;
var HeaderCheckBox;
for(var iCount = 0; iCount < Inputs.length ; ++iCount)
{
if(Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetHeaderControl,0) >= 0)
HeaderCheckBox = Inputs[iCount];
if(Inputs[iCount] != CheckBox && Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl,0) >= 0 && Inputs[iCount].id.indexOf(TargetHeaderControl,0) == -1)
{
if(CheckBox.checked)
{
if(!Inputs[iCount].checked)
{
flag = false;
HeaderCheckBox.checked = false;
return;
}
else
flag = true;
}
else if(!CheckBox.checked)
HeaderCheckBox.checked = false;
}
}
if(flag)
HeaderCheckBox.checked = CheckBox.checked
}
Hope it will help them who want to develop some what similar or exact this functionality.