Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Check Uncheck All Checkboxes in Gridview Using JQuery

Sep 8, 2012
Introduction:

In this article I will explain how to check/uncheck or select/deselect all the checkboxes in gridview with header checkbox using JQuery in asp.net.

Description:

In previous article I explained how to select/deselect checkboxes in gridview using JavaScript and many articles relating to JavaScript. Now I will explain how to check/uncheck or select/deselect all the checkboxes in gridview with header checkbox in JQuery.

For that first design your aspx page like this


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>check uncheck all checkboxes in gridview using jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('[id$=chkHeader]').click(function() {
$("[id$='chkChild']").attr('checked', this.checked);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvUserInfo" runat="server">
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkHeader" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkChild"  runat="server"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Now add following namespaces in codebehind
C# Code


using System;
using System.Data;
using System.Data.SqlClient;
After that add following code in code behind


protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
// This method is used to bind gridview from database
protected void BindGridview()
{
SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
con.Open();
SqlCommand cmd = new SqlCommand("select TOP 10 UserName,LastName,Location from UserInformation", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
gvUserInfo.DataSource = ds;
gvUserInfo.DataBind();
}
VB.NET Code


Imports System.Data
Imports System.Data.SqlClient
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindGridview()
End If
End Sub
' This method is used to bind gridview from database
Protected Sub BindGridview()
Dim con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
con.Open()
Dim cmd As New SqlCommand("select TOP 10 UserName,LastName,Location from UserInformation", con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
gvUserInfo.DataSource = ds
gvUserInfo.DataBind()
End Sub
End Class
Demo


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

14 comments :

Sai Bharath said...

its not working to me,, only indvidual checkboxes are working not by clicking on header checkbox

Suresh Dasari said...

@Sai Bharath...
Please check whether you are passing checkbox id value correctly or not

durai velu velu said...

src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">.. can you explain from where i want to get

durai velu velu said...

src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">.. can you explain from where i want to get this....???

Suresh Dasari said...

@Durai velu...
That jquery script file already hosted you can use that one directly with the url.

Anonymous said...

Hi Suresh,

Above code is not working, because u are directly accessing the chkHeader id which is within the GRidview control.

Anonymous said...

Thanks

Anonymous said...

if i have two gridview and i want the same functionality in both so i have to make scripts again or can use the same script for both

Debashis Chowdhury said...

it's not working. I put my ID correctly :/

bharath goud said...

is not working.........

bharath goud said...

is not working.........

Anonymous said...

Thanks a lot, it worked for me

Anonymous said...

Hi Suresh,

This code is working fine in ie8 but not working in mozilla firefox and chrome.. can please check and make it work in other browsers as well

Amit Kumar said...

It's Not Working , my data is showing in gridview but when click on headeer gridview, it dosen't check all checkboxes

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.