In
this article I am going to tell you how to selecting and deselecting all checkboxes
inside Gridview data control using Javascript in asp.net.
In
the previous article I have explained how to generate QR code image usingGoogle Chart API in asp.net, how to populate dropdownlist with months name inasp.net using C# and vb.net , how to get all countries list usingsystem.globalization and bind to dropdownlist in asp.net and how to print a web form (webpage) in asp.netusing C# and VB.net.
Description:
When
the header checkbox is selected all checkboxes in Gridview got selected and
same while uncheck the header checkbox all checkboxes will be unchecked.
Implementation:
Add the
Javscript code
Put
the below given Javascript code before closing the head section of web from:
<script>
function
SelectAllChkb(headerchk) {
var
grdmovie = document.getElementById('grdmovie');
var i;
if
(headerchk.checked) {
for
(i = 0; i < grdmovie.rows.length; i++) {
var
inputs = grdmovie.rows[i].getElementsByTagName('input');
inputs[0].checked = true;
}
}
else {
for
(i = 0; i < grdmovie.rows.length; i++) {
var
inputs = grdmovie.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
}
}
function
CheckChildchkb(gv, Chkitem) {
var
grdmovie = gv.parentNode.parentNode.parentNode;
var
selectAll = grdmovie.rows[0].cells[Chkitem].getElementsByTagName("input")[0];
if
(!gv.checked) {
selectAll.checked = false;
}
else {
var
checked = true;
for
(var i = 1; i < grdmovie.rows.length; i++) {
var
chb = grdmovie.rows[i].cells[Chkitem].getElementsByTagName("input")[0];
if
(!chb.checked) {
checked = false;
break;
}
}
selectAll.checked = checked;
}
}
</script>
Complete HTML
Markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<script>
function
SelectAllChkb(headerchk) {
var
grdmovie = document.getElementById('grdmovie');
var i;
if
(headerchk.checked) {
for
(i = 0; i < grdmovie.rows.length; i++) {
var
inputs = grdmovie.rows[i].getElementsByTagName('input');
inputs[0].checked = true;
}
}
else {
for
(i = 0; i < grdmovie.rows.length; i++) {
var
inputs = grdmovie.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
}
}
function
CheckChildchkb(gv, Chkitem) {
var
grdmovie = gv.parentNode.parentNode.parentNode;
var
selectAll = grdmovie.rows[0].cells[Chkitem].getElementsByTagName("input")[0];
if
(!gv.checked) {
selectAll.checked = false;
}
else {
var
checked = true;
for
(var i = 1; i < grdmovie.rows.length; i++) {
var
chb = grdmovie.rows[i].cells[Chkitem].getElementsByTagName("input")[0];
if
(!chb.checked) {
checked = false;
break;
}
}
selectAll.checked = checked;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:50%">
<legend>Select
deselect all checkboxes Example</legend>
<asp:GridView ID="grdmovie" runat="server" AllowPaging="true" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="CheckAll">
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" onclick="SelectAllChkb(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkitem" runat="server" onclick="CheckChildchkb(this,0)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField
= "Name"
HeaderText = "Name" />
<asp:BoundField DataField
= "Genre"
HeaderText = "Customer ID" />
<asp:BoundField DataField
= "Budget"
HeaderText = "Contact Name"/>
</Columns>
</asp:GridView>
</fieldset>
</div>
</form>
</body>
</html>
Bind grid
Create
a method to bind the Gridview and call it on page load.
C#
code:
SqlConnection
con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindGrid();
}
}
public void BindGrid()
{
try
{
SqlCommand
cmd = new SqlCommand("select * from Tb_Movie", con);
con.Open();
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
DataTable
dt = new DataTable();
adp.Fill(dt);
if
(dt.Rows.Count > 0)
{
grdmovie.DataSource = dt;
grdmovie.DataBind();
}
}
catch (Exception ex)
{
}
}
VB.net
Code:
Private
con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
Protected Sub Page_Load(sender As
Object, e As EventArgs) Handles
Me.Load
If Not IsPostBack Then
BindGrid()
End If
End Sub
Public Sub BindGrid()
Try
Dim
cmd As New SqlCommand("select
* from Tb_Movie", con)
con.Open()
Dim
adp As New SqlDataAdapter(cmd)
Dim
dt As New DataTable()
adp.Fill(dt)
If
dt.Rows.Count > 0 Then
grdmovie.DataSource = dt
grdmovie.DataBind()
End
If
Catch
ex As Exception
End Try
End Sub
.png)
No comments:
Post a Comment