Checkbox functionality in Gridview using Javascript......

Sourabh07
Posted by Sourabh07 under ASP.NET category on | Points: 40 | Views : 3226
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();
}


}

Comments or Responses

Posted by: T.Saravanan on: 11/8/2012 Level:Silver | Status: [Member] [MVP] | Points: 10
Hi Sourabh,

Don't assign variable name as 'i' in your code. Kindly modify your code with any other variable instead of 'i'.

Login to post response