Points Covered: 1) If checkbox in the column is set to true/false then all the child checkboxes will be set to true/false and vice-versa.
2) If any of the child checkbox is set to false or true then the checkbox in the header section will be set accordingly.
Source Page: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Event_Bubling.aspx.cs" Inherits="Event_Bubling" %>
<!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></title>
<script type="text/javascript" language="javascript">
function check_all() {
var gv = document.getElementById("<%= gv.ClientID %>");
var chkrow;
if (gv.rows.length > 0) {
var chk = gv.rows[0].cells[2];
for (i = 1; i < gv.rows.length; i++) {
chkrow = gv.rows[i].cells[2];
chkrow.childNodes[0].checked = chk.childNodes[0].checked;
}
}
}
function check_child() {
var gv = document.getElementById("<%= gv.ClientID %>");
var chkrow;
if (gv.rows.length > 0) {
var chk = gv.rows[0].cells[2];
for (i = 1; i < gv.rows.length; i++) {
chkrow = gv.rows[i].cells[2];
if (chkrow.childNodes[0].checked == false) {
chk.childNodes[0].checked = false;
break;
}
else {
chk.childNodes[0].checked = true;
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="S.No" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="TextBox">
<ItemTemplate>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CheckBox">
<HeaderTemplate>
<asp:CheckBox ID="chkheader" runat="server" onclick="return check_all();" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" onclick="return check_child();"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Code Behind 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;
public partial class Event_Bubling : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
BindGrid();
}
void BindGrid()
{
DataTable dt = new DataTable();
DataRow dr;
for (int i = 0; i < 10; i++)
{
dr = dt.NewRow();
dt.Rows.Add(dr);
}
gv.DataSource = dt;
gv.DataBind();
}
}