In this post I will explain how to select\Deselect or
checked\Unchecked CheckBox in GridView
using JQuery.
In the previous I had
explained Select \Deselect or Checked\Unchecked CheckBox in GridView usingJScript in Asp.Net .
For this You have to
Download Jquery file 1.7.2.min.js. You can also download file or make a file name jquery-1.7.2.min.js in your project solution and copy the code and paste it.
Jquery code for select\deselect code :-
<script type="text/javascript">
$(document).ready(function()
{
var chkBox=$("input[id$='chkHeader']");
chkBox.click(function()
{
$("#GridView1
INPUT[type='checkbox']").attr('checked',
chkBox.is(':checked'));
});
$("#GridView1
INPUT[type='checkbox']").click(function()
{
if(!$(this)[0].checked){
chkBox.attr("checked",false);
}
});
});
</script>
Design Page with Jquery Code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript"
src="../Scripts/jquery-1.7.2.min.js"></script>
<script
type="text/javascript">
$(document).ready(function()
{
var chkBox=$("input[id$='chkHeader']");
chkBox.click(function()
{
$("#GridView1
INPUT[type='checkbox']").attr('checked',
chkBox.is(':checked'));
});
$("#GridView1
INPUT[type='checkbox']").click(function()
{
if(!$(this)[0].checked){
chkBox.attr("checked",false);
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
AllowSorting="True"
AllowPaging="True" CellPadding="4" ForeColor="#333333" GridLines="None"
PageSize="5">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate >
<asp:CheckBox ID="chkHeader" runat="server"
/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkChild" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="user_name" HeaderText="user_name"
SortExpression="user_name" ReadOnly="true" />
<asp:BoundField DataField="password" HeaderText="password"
SortExpression="password" ReadOnly="true" />
<asp:BoundField DataField="country" HeaderText="country"
SortExpression="country" />
<asp:BoundField DataField="email" HeaderText="email" SortExpression="email" />
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$
ConnectionStrings:modiConnectionString %>"
SelectCommand="SELECT * FROM [user_registration]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Press F5 to run the code.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.