How to uncheck gridview header checkbox if anyone of the row checkbox is unchecked?


In this article I am going to explain about how to uncheck automatically when row data checkbox is unchecked. Here I have write one separate method to uncheck header checkbox based on row selection you can use this code for the same.

Description

For example we are see many code to checked all row checkbox when gridview header checkbox is selected in web page.

In this example I have uncheck the header check automatically when any one of the row check box is unchecked. If all row check box is checked one by one then select header check box too selected automatically.

Full Source

In design side I have placed one gridveiw control and write javascript code to check or uncheck checkbox at webpage.

Client Side


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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 id="Head1" runat="server">
<title></title>

<script language="javascript" type="text/javascript">
function SelectAll(id) {
if (id = "GridView1_ctl01_SelectAll") {
var frm = document.forms[0];
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].type == "checkbox") {
frm.elements[i].checked = document.getElementById(id).checked;
}
}
}
}

function uncheckHeaderchkbox(id) {
if (document.getElementById(id).checked == false) {
document.getElementById('GridView1_ctl01_SelectAll').checked = document.getElementById(id).checked;
}
else {
var frm = document.forms[0];
var tot = 0;
var chked = 0;
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].type == "checkbox") {
tot = tot + 1;
if (frm.elements[i].checked == true) {
chked = chked + 1;
}
}
}
if (chked == tot - 1) {
document.getElementById('GridView1_ctl01_SelectAll').checked = true;
}
}
}

</script>

</head>
<body>
<form id="form2" runat="server">
<div>
<h3>
UnCheck Gridview Header check box when user uncheck anyone GridView row checkbox</h3>
<asp:GridView ID="GridView1" runat="server" DataKeyNames="eno" AutoGenerateColumns="false"
OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
<%-- if we no need Check box in header then hide it below Header Template and also comment server side row data bound code--%>
<HeaderTemplate>
<asp:CheckBox ID="SelectAll" runat="server" />
</HeaderTemplate>
<EditItemTemplate>
<asp:CheckBox ID="Chkbx" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="eno" HeaderText="Employee no" />
<asp:BoundField DataField="empname" HeaderText="Employee Name" />
<asp:BoundField DataField="sal" HeaderText="Employee Salary" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>


Code Behind

Here I have bind some records statically to grid view header check checkbox selection

sing System.Data;
public partial class _Default : System.Web.UI.Page
{
DataTable dt = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (!Page.IsPostBack)
{
dt.Columns.Add("eno");
dt.Columns.Add("empname");
dt.Columns.Add("sal");
//add some temp rows
dt.Rows.Add("101", "Ravi", "35000");
dt.Rows.Add("102", "James", "19000");
dt.Rows.Add("103", "Mike", "25000");
dt.Rows.Add("104", "Mathew", "26000");
dt.Rows.Add("105", "Allen", "34000");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
catch (Exception ex)
{

Response.Write(ex.ToString());
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if ((e.Row.RowType == DataControlRowType.Header))
{
((CheckBox)e.Row.FindControl("SelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("SelectAll")).ClientID + "')");
}

if ((e.Row.RowType == DataControlRowType.DataRow))
{
((CheckBox)e.Row.FindControl("CheckBox1")).Attributes.Add("onclick", "javascript:uncheckHeaderchkbox('" + ((CheckBox)e.Row.FindControl("CheckBox1")).ClientID + "')");
}
}
}


Output

GrdChkBxUncheck

Source Code

Here I attached full source code. Download it and test it.

Client Side: ASP.NET
Code Behind : C#

Conclusion

I hope this source code is help you to know about uncheck header checkbox based on row checkbox selection.


Attachments

  • GrdChkBxUncheck (44428-02247-GrdChkBxUncheck.rar)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: