ReddyInfoSoft: Check / UnCheck Gridview page / All Pages CheckBoxes using Jquery in ASP.Net and c#.Net

In the previous post Check / UnCheck Gridview page CheckBoxes using Jquery in ASP.Net which checks only current page checkboxes of the gridview using Jquery and looses checkbox state when the gridview page was changed.

Here i will show how to check all the check boxes using c#.Net and it maintains checkbox state when gridpages are changed.

ASPX Page :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs"

Inherits="CheckUnCheck_Jquery.MainPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Check Uncheck All checkBoxes in gridview page</title>

function CheckUnCheckAll(chk) {

$('#<%=gvCheckAll.ClientID %>').find("input:checkbox").each(function () {

if (this != chk) {

this.checked = chk.checked;

}

});

}

</script>

</head>

<body>

<div>

<h2>

Check/Uncheck All checkBoxes in gridview All pages<br />

using Jquery and C#.Net</h2>

<asp:CheckBox ID="chkAll" runat="server" Text="Check All CheckBoxes "

TextAlign="Left" ForeColor="Green" AutoPostBack="true"

oncheckedchanged="chkAll_CheckedChanged"/>

<asp:GridView ID="gvCheckAll" runat="server" BackColor="White"

AutoGenerateColumns="false" BorderColor="#CC9966"

BorderStyle="None" BorderWidth="1px" CellPadding="4" AllowPaging="true"

OnPageIndexChanging="gvCheckAll_PageIndexChanging"

OnRowDataBound="gvCheckAll_RowDataBound" >

<asp:TemplateField HeaderText="EMP ID">

<asp:Label ID="lblempid" runat="server"

Text='<%# Eval("empid") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="DeptID">

<asp:Label ID="lbldeptid" runat="server"

Text='<%# Eval("deptid") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Full Name">

<asp:Label ID="lblfullname" runat="server"

Text='<% #Eval("fullname") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Designation">

<asp:Label ID="lbldes" runat="server"

Text='<%# Eval("designation") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Qualification">

<asp:Label ID="lblqual" runat="server"

Text='<%# Eval("qualification") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<asp:CheckBox ID="chkMain" runat="server"

onclick="javascript:CheckUnCheckAll(this);" />

</HeaderTemplate>

<asp:CheckBox ID="chkChild" runat="server" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</center>

</div>

</form>

</body>

</html>

CodeBehind :

using System;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Web.UI.WebControls;

namespace CheckUnCheck_Jquery

    public partial class MainPage : System.Web.UI.Page

        protected void Page_Load(object sender, EventArgs e)

            if (!IsPostBack)

                gridviewBind();

        private void gridviewBind()

            string constring =

            ConfigurationManager.ConnectionStrings["myconstring"].ToString();

            string query = "select e.empid, e.DeptID,(e.fname +' '+e.lname) as fullname,

                      e.designation,e .qualification  from EMPTable e";

            DataSet ds = new DataSet();

            SqlDataAdapter da = new SqlDataAdapter(query, constring);

            da.Fill(ds,"grid");

            gvCheckAll.DataSource = ds;

            gvCheckAll.DataBind();

        protected void gvCheckAll_PageIndexChanging(object sender,

                                System.Web.UI.WebControls.GridViewPageEventArgs e)

            gvCheckAll.PageIndex = e.NewPageIndex;

            gridviewBind();

        protected void gvCheckAll_RowDataBound(object sender, GridViewRowEventArgs e)

            if (e.Row.RowType == DataControlRowType.DataRow)

                if (chkAll.Checked)

                    ((CheckBox)gvCheckAll.HeaderRow.FindControl("chkMain")).Enabled = false;

                else

                    ((CheckBox)gvCheckAll.HeaderRow.FindControl("chkMain")).Enabled = true;

                ((CheckBox)e.Row.FindControl("chkChild")).Checked = chkAll.Checked;

        protected void chkAll_CheckedChanged(object sender, EventArgs e)

            gridviewBind();

DownLoad from HERE

3 comments:

UnknownFebruary 21, 2013 at 3:11 PM
Impressive Article . . . Works Awesome
AnonymousApril 9, 2013 at 11:53 PM
Thanks! I made this small addition to handle things, in case you have 2 checkbox (columns) in the grid. By using the JQuery "id-ends-with" function (aka, the "id*=" seen below)

function CheckUnCheckAll(chk) {
$('#<%=gvCheckAll.ClientID %>').find("input:checkbox[id*='chkChild']").each(function (i, currentChkBox) {
if (this != chk) {
this.checked = chk.checked;
}
});
}

Wednesday, September 19, 2012

Check / UnCheck Gridview page / All Pages CheckBoxes using Jquery in ASP.Net and c#.Net

3 comments: