Below I have given you the sample code for checkbox oprations in grid views... using this you can do the below one...
1. Select and unselect all check boxes when select the heder check box..
2.select and unselect header check box based on the row check boxes..
3. Adding ids to hidden field based on the Selection and removing the Id from the hidden when un select the check box...
ASPX Page ...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Name"
DataSourceID="SqlDataSource1" Width="425px" Height="138px">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chk_Head" runat="server" onclick="SetChechUnCheck_New('Head', this);"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk_Main" runat="server" onclick="SetChechUnCheck_New('Body', this);"/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="True" SortExpression="Name" />
<asp:BoundField DataField="age" HeaderText="age" SortExpression="age" />
<asp:CheckBoxField DataField="sex" HeaderText="sex" SortExpression="sex" />
<asp:BoundField DataField="vasanth" HeaderText="vasanth" SortExpression="vasanth" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:test_VasanthConnectionString %>"
SelectCommand="SELECT * FROM [tbl_Name]"></asp:SqlDataSource>
<asp:HiddenField ID="hid_Ids" runat="server" />
</div>
</form>
</body>
</html>
and Js function as....
function SetChechUnCheck_New(chkType, con)
{
//get the table element
var tbl = document.getElementById('GridView1');
var hid_Text = "";
//check whether the selected check box is header or body
if(chkType == 'Head')
{
document.getElementById("hid_Ids").value = "";
//assign check box .....
var tbl_Header_Chk = con;
//loop through the table rows
for(var i = 1; i< tbl.rows.length;i++)
{
var tbl_row = tbl.rows[i];
//find the table cell in chich check box is available
var tbl_Cell = tbl_row.cells[0]; // we can change 0 to any cell
var tbl_Cell_Chk;
//loop through the cell's controls and find the checkbox
for(var x = 0; x<tbl_Cell.childNodes.length;x++)
{
if(tbl_Cell.childNodes[x].type == "checkbox")
{
tbl_Cell_Chk = tbl_Cell.childNodes[x];
}
}
//set the check boxes checked state is true
tbl_Cell_Chk.checked = tbl_Header_Chk.checked;
if(tbl_Header_Chk.checked == true)
{
var tbl_cell_Id = tbl.rows[i].cells[1];
if(hid_Text != "")
{
hid_Text = hid_Text + "," + tbl_cell_Id.innerHTML;
}
else
{
hid_Text = tbl_cell_Id.innerHTML;
}
}
}
document.getElementById("hid_Ids").value = hid_Text;
}
//if the selected check box is body check box
else
{
//get the header cell
var tbl_HeaderRow = tbl.rows[0];
var tbl_HeaderCell = tbl_HeaderRow.cells[0];
var tbl_Header_chk;
//loop thorugh the header cell and get header checkbox control
for(var x = 0; x<tbl_HeaderCell.childNodes.length;x++)
{
var temp = tbl_HeaderCell.childNodes[x];
if(tbl_HeaderCell.childNodes[x].type == "checkbox")
{
tbl_Header_chk = tbl_HeaderCell.childNodes[x];
}
}
var chk_Cell = con.parentElement.parentElement.cells[1];
var Id = chk_Cell.innerHTML;
//check whether the selected check box is checked or not....
if(con.checked == false)
{
//if unchecked set the header check box to false straigtaway
tbl_Header_chk.checked = false;
var arrIds = Array();
arrIds = document.getElementById("hid_Ids").value.split(",");
for(var i = 0;i<arrIds.length;i++)
{
if(arrIds[i] == Id)
{
arrIds[i] = null;
break;
}
}
for(var i = 0;i<arrIds.length;i++)
{
if(arrIds[i] != null)
{
if(hid_Text != "")
{
hid_Text = hid_Text + "," + arrIds[i];
}
else
{
hid_Text = arrIds[i];
}
}
}
}
//the selected checkbox is checked
else
{
var IsChecked = false;
//this is temp variable is used to
var tempCount = 0;
//loop through the table rows and check whether all the check boxes are checked....
for(var i = 1; i< tbl.rows.length;i++)
{
var tbl_row = tbl.rows[i];
var tbl_Cell = tbl_row.cells[0];
var tbl_Cell_Chk;
//loop through the controls in cells and set the check box control
for(var x = 0; x<tbl_Cell.childNodes.length;x++)
{
if(tbl_Cell.childNodes[x].type == "checkbox")
{
tbl_Cell_Chk = tbl_Cell.childNodes[x];
}
}
//if checkbox is checked increase the count by 1....
if(tbl_Cell_Chk.checked == true)
{
tempCount = tempCount + 1;
}
}
if(tempCount == tbl.rows.length - 1)
{
tbl_Header_chk.checked = true;
}
else
{
tbl_Header_chk.chekced = false;
}
hid_Text = document.getElementById("hid_Ids").value;
if(hid_Text != "")
{
hid_Text = hid_Text + "," + Id;
}
else
{
hid_Text = Id;
}
}
document.getElementById("hid_Ids").value = hid_Text;
}
} |