In
this article I’m going to explain how to use CheckBox control in Gridview to Check
or Uncheck all checkbox using JavaScript
To
implement this concept we have to use one Checkbox control in Gridview header
template and one more checkbox control in Gridview item template. And we
need to use javascript to avoid postback and change gridview row color if
checkbox was checked or unchecked.
Here I’m going to write
two javascript functions for check or uncheck row and check or uncheck all row
in gridview
Table Design:
|
Column Name
|
Data Type
|
|
empid
|
varchar(50)
|
|
name
|
varchar(100)
|
|
designation
|
varchar(100)
|
|
city
|
varchar(50)
|
Create table script:
CREATE TABLE [dbo].[EmployeeDetails](
[empid] [varchar](50) NULL,
[name] [varchar](100) NULL,
[designation] [varchar](100) NULL,
[city] [varchar](50) NULL,
[country] [varchar](50) NULL
) ON [PRIMARY]
Designer Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Chckbox in Gridview</title>
<script type="text/javascript">
function CheckRow(objRef) {
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if (objRef.checked) {
//Change the gridview row color when checkbox checked
change
row.style.backgroundColor = "#5CADFF";
}
else {
//If checkbox not checked change default row color
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor =
"#AED6FF";
}
else {
row.style.backgroundColor =
"white";
}
}
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i]
!= headerCheckBox) {
if (!inputList[i].checked) {
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
function checkAllRow(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef
!= inputList[i]) {
if (objRef.checked) {
//If the header checkbox is checked
//check all checkboxes
//and highlight all rows
row.style.backgroundColor = "#5CADFF";
inputList[i].checked = true;
}
else {
//If the header checkbox is checked
//uncheck all checkboxes
//and change rowcolor back to
original
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#AED6FF";
}
else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvUpload" runat="server" AutoGenerateColumns="false" ShowFooter="true">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" onclick="checkAllRow(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelectRow" runat="server" onclick="CheckRow(this);" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="empid" HeaderText="Employee-ID" />
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:BoundField DataField="designation" HeaderText="Designation" />
<asp:BoundField DataField="city" HeaderText="City" />
<asp:BoundField DataField="country" HeaderText="Country" />
</Columns>
<HeaderStyle BackColor="#0063A6" ForeColor="White" />
</asp:GridView>
<asp:Label ID="lblMsg" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection conn = new SqlConnection("Data Source=SPIDER;Initial Catalog=Demo;
Integrated Security=True");
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
protected void BindGrid()
{
DataSet ds = new DataSet();
conn.Open();
string cmdstr = "Select * from EmployeeDetails";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
cmd.ExecuteNonQuery();
gvUpload.DataSource = ds;
gvUpload.DataBind();
conn.Close();
}
}