Step 1:- Add gridview to the
page.
<div>
<asp:GridView ID="GridView1" runat="server" GridLines="Both" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" ForeColor="#333333">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="headerCheckBox" runat="server" onclick="javascript:HeaderCheckBox(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="childCheckBox" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>
Step2:- Add
JavaScript code under head tag of the page.
<script type="text/javascript">
function HeaderCheckBox(headerChk)
{
var gridChk
= document.getElementById('<%=GridView1.ClientID %>');
var inputs;
//Condition
to check the header checkbox selected or not if that is true checked all
checkboxes
if (headerChk.checked)
{
for (var i
= 1; i < gridChk.rows.length; i++) {
inputs
= gridChk.rows[i].getElementsByTagName('input');
inputs[0].checked
= true;
}
}
//if
the condition fails uncheck all checkboxes in gridview
else {
for (var i
= 0; i < gridChk.rows.length; i++) {
inputs
= gridChk.rows[i].getElementsByTagName('input');
inputs[0].checked
= false;
}
}
}
//function
to checked the header checkbox based on child checkboxes selection
function ChildCheckBox(childChk)
{
var gridChk
= document.getElementById('<%=GridView1.ClientID %>');
var headerChk
= document.getElementById(childChk);
var count
= 0;
//By
using this for loop, we will count how many checkboxes has checked
for (var i
= 1; i < gridChk.rows.length; i++) {
var inputs
= gridChk.rows[i].getElementsByTagName('input');
if (inputs[0].checked)
{
count++;
}
}
//Check
all child checkboxes selected or not. If yes, select the header checkbox else
unselect
if (count
=== gridChk.rows.length - 1) {
headerChk.checked
= true;
}
else {
headerChk.checked
= false;
}
}
</script>
Step3:- In the GridView
RowDataBound event add the following code.
if (e.Row.RowType == DataControlRowType.DataRow)
{
var headerCheckBox
= (CheckBox)GridView1.HeaderRow.FindControl("headerCheckBox");
var childCheckBox
= (CheckBox)e.Row.FindControl("childCheckBox");
childCheckBox.Attributes.Add("onclick", "javascript:ChildCheckBox('" +
headerCheckBox.ClientID + "')");
}
Step4:- Complete code
Step1:-
(Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CheckBox
inside gridview</title>
<script type="text/javascript">
function HeaderCheckBox(headerChk)
{
var gridChk
= document.getElementById('<%=GridView1.ClientID %>');
var inputs;
//Condition
to check the header checkbox selected or not if that is true checked all
checkboxes
if (headerChk.checked)
{
for (var i
= 1; i < gridChk.rows.length; i++) {
inputs
= gridChk.rows[i].getElementsByTagName('input');
inputs[0].checked
= true;
}
}
//if
the condition fails uncheck all checkboxes in gridview
else {
for (var i
= 0; i < gridChk.rows.length; i++) {
inputs
= gridChk.rows[i].getElementsByTagName('input');
inputs[0].checked
= false;
}
}
}
//function
to checked the header checkbox based on child checkboxes selection
function ChildCheckBox(childChk)
{
var gridChk
= document.getElementById('<%=GridView1.ClientID %>');
var headerChk
= document.getElementById(childChk);
var count
= 0;
//By
using this for loop, we will count how many checkboxes has checked
for (var i
= 1; i < gridChk.rows.length; i++) {
var inputs
= gridChk.rows[i].getElementsByTagName('input');
if (inputs[0].checked)
{
count++;
}
}
//Check
all child checkboxes selected or not. If yes, select the header checkbox else
unselect
if (count
=== gridChk.rows.length - 1) {
headerChk.checked
= true;
}
else {
headerChk.checked
= false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" GridLines="Both" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" ForeColor="#333333">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="headerCheckBox" runat="server" onclick="javascript:HeaderCheckBox(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="childCheckBox" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>
</form>
</body>
</html>
Step2:-
(Default.aspx.cs)
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Demo
{
public partial class Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindDataToGridView();
}
}
protected void BindDataToGridView()
{
DataTable dt
= new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("Column1", typeof(string)));
dt.Columns.Add(new DataColumn("Column2", typeof(string)));
dt.Columns.Add(new DataColumn("Column3", typeof(string)));
dt.Columns.Add(new DataColumn("Column4", typeof(string)));
int totalRow
= 10;
for (int i
= 0; i < totalRow; i++)
{
dr
= dt.NewRow();
dr["Column1"] = "Row" +
i;
dr["Column2"] = "Row" +
i;
dr["Column3"] = "Row" +
i;
dr["Column4"] =
1000/(i + 1);
dt.Rows.Add(dr);
}
GridView1.DataSource
= dt;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType
== DataControlRowType.DataRow)
{
var headerCheckBox
= (CheckBox)GridView1.HeaderRow.FindControl("headerCheckBox");
var childCheckBox
= (CheckBox)e.Row.FindControl("childCheckBox");
childCheckBox.Attributes.Add("onclick", "javascript:ChildCheckBox('" +
headerCheckBox.ClientID + "')");
}
}
}
}
Example:-
No comments:
Post a Comment