Friday, January 2, 2009

This article implement's functionality to achieve Select all and deselect all checkboxes of a particular column inside a GridView Control. We would add a check box control in header and would use javascript to handle all the logic.
Logic as you all know:
1-Selection/delection of all checkbox when header checkbox is click
2-Check header Checkbox when all checkboxes are Checked
3-UnCheck Header CheckBox when all checkboxes are not checked

Here is the GridViewControl Script i have used


<asp:GridView ID="gvPrivileges" runat="server"
AutoGenerateColumns="False" DataKeyNames="PriviligeID"
DataSourceID="oPrviligesDS" PageSize="8" AllowPaging="True" AllowSorting="True"
OnRowCreated="gvPrivileges_RowCreated">
<columns>
<asp:templatefield>
<headertemplate>
<asp:CheckBox
ID="chkSelectAll" runat="server"
onclick="javascript:HeaderClick(this)"/>
</headertemplate>
<itemtemplate>
<asp:CheckBox
ID="chkSelect" runat="server" />
</itemtemplate>
<ItemStyle
Width="1%" />
</asp:TemplateField>
<asp:BoundField
DataField="PriviligeCode" HeaderText="Privilige Code"
SortExpression="PriviligeCode" />
<asp:BoundField
DataField="PriviligeName" HeaderText="Privilige Name"
SortExpression="PriviligeName" />
<asp:BoundField
DataField="PriviligeTypeName" HeaderText="Privilige Type"
SortExpression="PriviligeTypeName"
/>
</columns>
</asp:GridView>



Note:

<p><headertemplate>
<asp:CheckBox ID="chkSelectAll" runat="server"
onclick="javascript:HeaderClick(this)"/>
</headertemplate></p>


a javascipt method HeaderClick is assigned to onclick event that selects or unselects all checkboxes in a column.

Now adding onclick event handler to all checkboxes in gridview Column. Using OnRowCreated Event of DataGridView


<p>protected void gvPrivileges_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow
&&
(e.Row.RowState == DataControlRowState.Normal
e.Row.RowState
== DataControlRowState.Alternate)) {
CheckBox chkBxSelect =
(CheckBox)e.Row.Cells[1].FindControl("chkSelect");
CheckBox chkBxHeader =
(CheckBox)this.gvPrivileges.HeaderRow.FindControl("chkSelectAll");
chkBxSelect.Attributes["onclick"]
=
string.Format
(
"javascript:ChildClick(this,'{0}');",
chkBxHeader.ClientID
);
}
}</p>


Till here we have done all the desired event handler's defination now Here's the javascript that would be used to acheive desired behaviour



<script type="text/javascript">
var TotalChkBx;
var
Counter;
window.onload = function()
{
//Get total no. of CheckBoxes in
side the GridView.
TotalChkBx = parseInt('<%= this.gvPrivileges.Rows.Count
%>');
//Get total no. of checked CheckBoxes in side the
GridView.
Counter = 0;
}
function HeaderClick(CheckBox)
{
//Get
target base & child control.
var TargetBaseControl =
document.getElementById('<%= this.gvPrivileges.ClientID %>');
var
TargetChildControl = "chkSelect";
//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;
}
function ChildClick(CheckBox, HCheckBox)
{
//get target
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;
}
</script>


The above script contains two global variables 'TotalChkBx' and 'Counter'. These are initialised in the window.onload event. The method HeaderClick checks / unchecks all checkboxes of a particular column inside the GridView depending upon whether the header checkbox is checked or unchecked. The method ChildClick checks / unchecks the header checkbox depending upon whether all checkboxes of a particular column inside the GridView are checked or unchecked.