Description:-
In this example we
explain that how to check and uncheck checkbox in gridview using javascript or
select and deselect checkboxes in gridview with header checkbox in asp.net using javascript.
Previous time I already explain that how to check/uncheck checkbox in gridview in asp.net using C# and also in mvc with webgrid.
Bu in this example we explain same thing in Clienside using javascript and our requirement is that if user select or check header checkbox of the gridview then it's child checkbox means all the rows are automatically checked and if uncheck/deselect the header checkbox then all checkbox of the all the rows are also uncheck/deselected automatically without refresh or page load using javascript in asp.net.
Previous time I already explain that how to check/uncheck checkbox in gridview in asp.net using C# and also in mvc with webgrid.
Bu in this example we explain same thing in Clienside using javascript and our requirement is that if user select or check header checkbox of the gridview then it's child checkbox means all the rows are automatically checked and if uncheck/deselect the header checkbox then all checkbox of the all the rows are also uncheck/deselected automatically without refresh or page load using javascript in asp.net.
To show Example How to insert,update,delete in DataList control clikck here CRUD operation in DataList
How to Bind Excelsheet Data to Gridview CRUD operation in Excelsheet Database
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 id="Head1" runat="server">
<title>Check/Uncheck
all the Checkboxes in Gridview without postback using javascript
</title>
<script type="text/javascript">
//
Select/Deselect checkboxes based on header checkbox
function
SelectGrdHedaerCheckboxes(headerchk) {
debugger
var
grd_check = document.getElementById('grd_employee');
var
i;
//Condition
to check header checkbox selected or not if that is true checked all checkboxes
if
(headerchk.checked) {
for
(i = 0; i < grd_check.rows.length; i++) {
var
inputs = grd_check.rows[i].getElementsByTagName('input');
inputs[0].checked = true;
}
}
//if
condition fails uncheck all checkboxes in gridview
else
{
for
(i = 0; i < grd_check.rows.length; i++) {
var
inputs = grd_check.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
}
}
//function
to check header checkbox based on child checkboxes condition
function
Selectchildcheckboxes(header) {
var
ck = header;
var
count = 0;
var
grd_check = document.getElementById('grd_employee');
var
headerchk = document.getElementById(header);
var
rowcount = grd_check.rows.length;
//By
using this for loop we will count how many checkboxes has checked
for
(i = 1; i < grd_check.rows.length; i++) {
var
inputs = grd_check.rows[i].getElementsByTagName('input');
if
(inputs[0].checked) {
count++;
}
}
//Condition
to check all the checkboxes selected or not
if
(count == rowcount - 1) {
headerchk.checked = true;
}
else
{
headerchk.checked = false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grd_employee" runat="server" OnRowDataBound="grd_employee_RowDataBound"
BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px"
CellPadding="3" CellSpacing="2">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="Chk_Header" runat="server" onclick="javascript:SelectGrdHedaerCheckboxes(this)"
/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="Chk_rowschkbox" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</div>
</form>
</body>
</html>
Default3.aspx.cs:-
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 Default3 : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
Bingrid();
}
}
private void Bingrid()
{
DataTable
dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("name");
dt.Columns.Add("salary");
DataRow
dr1 = dt.NewRow();
dr1[0] = "E001";
dr1[1] = "Kirit";
dr1[2] = "20000";
dt.Rows.Add(dr1);
DataRow
dr2 = dt.NewRow();
dr2[0] = "E002";
dr2[1] = "Pintu";
dr2[2] = "15000";
dt.Rows.Add(dr2);
DataRow
dr3 = dt.NewRow();
dr3[0] = "E003";
dr3[1] = "Rajesh";
dr3[2] = "25000";
dt.Rows.Add(dr3);
grd_employee.DataSource = dt;
grd_employee.DataBind();
}
protected void grd_employee_RowDataBound(object sender, GridViewRowEventArgs
e)
{
if
(e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox
headerchk = (CheckBox)grd_employee.HeaderRow.FindControl("Chk_Header");
CheckBox
childchk = (CheckBox)e.Row.FindControl("Chk_rowschkbox");
childchk.Attributes.Add("onclick", "javascript:Selectchildcheckboxes('"
+ headerchk.ClientID + "')");
}
}
}
0 comments:
Post a Comment