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
|
|||
|
|
11 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.........