Search content within the blog

Wednesday, June 3, 2009

Check and uncheck All checkboxes in gridview including header checkbox

This is a common requirement in every project that is if a header checkbox is selected in the gridview its child checkboxes also should get selected and if any child checkbox is unchecked the header checkbox should get unchecked automatically.

Note:

* Just Copy Paste the code as it is in respective pages.
* The code is self Explainable.
* Run the page and work on the check boxes.

ASPX PAGE

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DataboundControls._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function SelectAll(id)
{
//get reference of GridView control
var grid = document.getElementById("<%= FileList.ClientID %>");
//variable to contain the cell of the grid
var cell;

if (grid.rows.length > 0)
{
//loop starts from 1. rows[0] points to the header.
for (i=1; i<grid.rows.length; i++)
{
//get the reference of first column
cell = grid.rows[i].cells[0];

//loop according to the number of childNodes in the cell
for (j=0; j<cell.childNodes.length; j++)
{
//if childNode type is CheckBox
if (cell.childNodes[j].type =="checkbox")
{
//assign the status of the Select All checkbox to the cell checkbox within the grid
cell.childNodes[j].checked = document.getElementById(id).checked;
}
}
}
}
}

function CheckAndUncheckHeaderBox(HeaderlevelCheckBox)
{
//get reference of GridView control
var grid = document.getElementById("<%= FileList.ClientID %>");
//variable to contain the cell of the grid
var cell;

if (grid.rows.length > 0)
{
var Totallength=grid.rows.length;
var CheckedBoxesCounter=0;
//loop starts from 1. rows[0] points to the header.
for (i=1; i<grid.rows.length; i++)
{
//get the reference of first column
cell = grid.rows[i].cells[0];

//loop according to the number of childNodes in the cell
for (j=0; j<cell.childNodes.length; j++)
{
//if childNode type is CheckBox
if (cell.childNodes[j].type =="checkbox" && cell.childNodes[j].checked==true)
{
CheckedBoxesCounter=CheckedBoxesCounter+1;
}
}
}
alert(CheckedBoxesCounter);
alert(Totallength);
if(CheckedBoxesCounter+1==Totallength)
{

alert(true);
document.getElementById(HeaderlevelCheckBox).checked=true;
alert("done");
}
else
{
alert(false);
document.getElementById(HeaderlevelCheckBox).checked=false;
alert("done");
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<h1>
Check/Uncheck All CheckBoxes in a GridView Using Client-Side Script</h1>
<p>
<asp:Label ID="Summary" runat="server" EnableViewState="False" Font-Bold="False"
Font-Italic="False" Font-Size="XX-Large" ForeColor="Red"></asp:Label> </p>
<p>
<asp:GridView ID="FileList" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" DataKeyNames="FullName" AllowPaging="false" OnRowDataBound="FileList_RowDataBound">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox runat="server" ID="HeaderLevelCheckBox" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox runat="server" ID="RowLevelCheckBox" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="CreationTime" HeaderText="Created On">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
<asp:BoundField DataField="Length" DataFormatString="{0:N0}" HeaderText="File Size"
HtmlEncode="False">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
</Columns>
</asp:GridView>
<asp:HiddenField runat="server" ID="hdnCheckBoxheader" />
</p>
<p>
<asp:Button runat="server" ID="DeleteButton" Text="Delete Checked Files" />
(<i>go ahead and click this... it won't really delete the files</i>)
</p>
<p>
<asp:Literal ID="CheckBoxIDsArray" runat="server"></asp:Literal> </p>
</div>
</div>
</form>
</body>
</html>


ASPX.CS PAGE

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Collections.Generic;
namespace DataboundControls
{
public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
string PhysicalPath = Request.PhysicalApplicationPath;
DirectoryInfo objDirectory = new DirectoryInfo(PhysicalPath);
FileList.DataSource = objDirectory.GetFiles();
FileList.DataBind();

foreach (GridViewRow gvr in FileList.Rows) {
//Get a programmatic reference to the CheckBox control
CheckBox cb = (CheckBox)gvr.FindControl("RowLevelCheckBox");
ClientScript.RegisterArrayDeclaration("CheckBoxIDs", string.Concat("'", cb.ClientID, "'"));
}
}

protected void FileList_RowDataBound(object Sender, GridViewRowEventArgs e)
{

if (e.Row.RowType == DataControlRowType.Header)
{
hdnCheckBoxheader.Value = ((CheckBox)e.Row.FindControl("HeaderLevelCheckBox")).ClientID.ToString();
((CheckBox)e.Row.FindControl("HeaderLevelCheckBox")).Attributes.Add("onclick", "Javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("HeaderLevelCheckBox")).ClientID + "')");
}

if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox RowLevelCheckBox = (CheckBox)e.Row.FindControl("RowLevelCheckBox");
RowLevelCheckBox.Attributes.Add("onclick", "Javascript:CheckAndUncheckHeaderBox('" + hdnCheckBoxheader.Value + "')");

}
}
}
}

No comments:

Post a Comment