In this article I will show you how you can how to check all
checkboxes in gridview using jquery in your asp.net application. In this we
will put add select all checkbox in gridview header and when user click on this
checkbox all the checkboxes of the gridview get selected automatically without
post back on client side.
Some of my previous articles are as follows: Highlight
GridView Row on Mouseover Using CSS in Asp.Net C#.Net, Drag
Drop Cells in GridView Control Using Asp.net C# and jQuery, How
To Make a Single Row of DataGridview Bold Using C#.Net in Windows Application,
Code
to Export GridView to PDF in Asp.Net Using C# and Vb.Net, Bind
DataGridView In Windows Application Using C#, Binding
Gridview By Access DataBase Using C#.Net in Asp.Net.
So for this article first we will create a new asp.net
application and add a grid view control. In this gridview control we will an itemtemplate and in the item template we
will add a checkbox. Now we will write a jquery code to make the select other
checkbox.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript" type="text/javascript">
function
Selectallcheckbox(val) {
if
(!$(this).is(':checked'))
{
$('input:checkbox').prop('checked', val.checked);
} else
{
$("#chkroot").removeAttr('checked');
}
}
</script>
|
In above code we have defined jquery library reference and added
jquery code to select all checkboxed on click.
So here is the complete code for this article.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProjectDemo_Asp.et.Default"
%>
<!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 runat="server">
<title>Code to
Select All Checkbox in GridView in Asp.Net Using jQuery</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript" type="text/javascript">
function
Selectallcheckbox(val) {
if
(!$(this).is(':checked'))
{
$('input:checkbox').prop('checked', val.checked);
} else
{
$("#chkroot").removeAttr('checked');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
BorderStyle="Solid">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" onclick="javascript:Selectallcheckbox(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="checkboxselection" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="author_name" HeaderText="NAME" />
<asp:BoundField DataField="publisher_name" HeaderText="PUBLISHER NAME"
/>
<asp:BoundField DataField="publication_year" HeaderText="PUBLISH
YEAR" />
<asp:BoundField DataField="retail_price" HeaderText="PRICE" />
</Columns>
<HeaderStyle BackColor="#66CCFF" />
</asp:GridView>
</form>
</body>
</html>
|
In above code select all checkbox added on header of the
itemtemplate gridview. Now run the page for output
DOWNLOAD
About the Author
Hello, What is $("#chkroot")?
ReplyDeleteThanks :)
ReplyDelete