In this article I will
explain how to check all check boxes in gridview using Javascript.
When we click on
header check box then all checkboxes will be checked and if one of the checkbox
is unchecked then Header will also be unchecked. If we check all checkboxes
then Header checkbox will automatically
checked.
Following script is Used to Check Header checkbox if all checkboxes are checked:
<script type = "text/javascript">
function Check_Click(objRef) {
var row = objRef.parentNode.parentNode;
var GridView = row.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var headerCheckBox =
inputList[0];
var checked = true;
if (inputList[i].type == "checkbox"
&& inputList[i] != headerCheckBox) {
if (!inputList[i].checked)
{
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
</script>
Check
all checkboxes functionality:
<script type = "text/javascript">
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var row =
inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox"
&& objRef != inputList[i]) {
if (objRef.checked) {
inputList[i].checked = true;
}
else {
inputList[i].checked = false;
}
}
}
}
</script>
Full Source Code for Sample Application:
1. Html Code with Script:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type = "text/javascript">
function Check_Click(objRef) {
var row = objRef.parentNode.parentNode;
var GridView = row.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var headerCheckBox =
inputList[0];
var checked = true;
if (inputList[i].type == "checkbox"
&& inputList[i] != headerCheckBox) {
if (!inputList[i].checked)
{
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
</script>
<script type = "text/javascript">
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var row =
inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox"
&& objRef != inputList[i]) {
if (objRef.checked) {
inputList[i].checked = true;
}
else {
inputList[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<fieldset style="width:280px"><legend><strong>Check Uncheck all Check Box in Grid</strong></legend>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="Student_ID" Width="250px" >
<Columns>
<asp:BoundField DataField="Student_name" HeaderText="Name" />
<asp:BoundField DataField="age" HeaderText="Age" />
<asp:BoundField DataField="class" HeaderText="Class" />
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick = "Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<br />
</div>
</fieldset></center>
</form>
</body>
</html>
2.
Asp.Net
Code using C#:
public partial class gridview : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Fill_Grid();
}
}
//Fetch
data from database and bind to gridview
public void Fill_Grid()
{
if (con.State == ConnectionState.Open)
{
con.Close();
}
con.Open();
DataSet ds = new DataSet();
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "Fill_Dataset";
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter dataadapater = new SqlDataAdapter();
dataadapater.SelectCommand = cmd;
dataadapater.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
cmd.Dispose();
con.Close();
}
}
0 comments:
Post a Comment