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.
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 Email
|
|||
14 comments :
its not working to me,, only indvidual checkboxes are working not by clicking on header checkbox
@Sai Bharath...
Please check whether you are passing checkbox id value correctly or not
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">.. can you explain from where i want to get
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">.. can you explain from where i want to get this....???
@Durai velu...
That jquery script file already hosted you can use that one directly with the url.
Hi Suresh,
Above code is not working, because u are directly accessing the chkHeader id which is within the GRidview control.
Thanks
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
it's not working. I put my ID correctly :/
is not working.........
is not working.........
Thanks a lot, it worked for me
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
It's Not Working , my data is showing in gridview but when click on headeer gridview, it dosen't check all checkboxes
Note: Only a member of this blog may post a comment.