Showing posts with label Select All. Show all posts
Showing posts with label Select All. Show all posts

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.