Check/Uncheck GridView Rows using a Checkbox in JQuery

Category: ASP.NETJQUERY Comments: No comments

I have a one gridview with checkboxes here my requirement is if I select header checkbox of gridview I need to select all the child checkboxes in gridview and if I deselect header checkbox I need to deselect all the child checkboxes in gridview and if I select all the child checkbox I need to select the header checkbox and if any child checkbox deselected I need to deselect header checkbox for this I have written JQuery function to achieve this functionality.

Design Page————————————————————————-

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”TestingPage.aspx.cs” Inherits=”TestingPage” %>

<!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></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“input[id$=chkAll]“).click(function () {

$(“input[id$=chkChild]“).attr(‘checked’, this.checked);

});
});

</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”false”>
<Columns>

<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID=”chkAll” runat=”server” />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID=”chkChild” runat=”server” />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”User Name”>
<ItemTemplate>
<asp:Label ID=”lblName” runat=”server” Text=’<%# Eval(“userName”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”City”>
<ItemTemplate >
<asp:Label ID=”lblCity” runat=”server” Text=’<%# Eval(“City”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Designation”>
<ItemTemplate>
<asp:Label ID=”lblDesignation” runat=”server” Text=’<%# Eval(“Designation”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText=”sal”>
<ItemTemplate>
<asp:Label ID=”lblsal” runat=”server” Text=’<%# Eval(“sal”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

Code Page——————————————————————————————————-

SqlConnection con = new SqlConnection(“Data Source=.\\SQLExpress;Initial Catalog=abc;Integrated Security=True”);
DataSet ds = new DataSet();
SqlCommand cmd = new SqlCommand();

protected void Page_Load(object sender, EventArgs e)
{
cmd.CommandText = “select * from tblgrid”;
cmd.Connection = con;
con.Open();
SqlDataReader dr=cmd.ExecuteReader();

GridView1.DataSource = dr;
GridView1.DataBind();
con.Close();
}

screen_short

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.