Wednesday, September 19, 2012

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Check Uncheck All checkBoxes in gridview page</title>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CheckUnCheckAll(chk) {
            $('#<%=gvCheckAll.ClientID %>').find("input:checkbox").each(function () {
                if (this != chk) {
                    this.checked = chk.checked;
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <center>
            <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" >
                <Columns>
                    <asp:TemplateField HeaderText="EMP ID">
                        <ItemTemplate>
                            <asp:Label ID="lblempid" runat="server" 
                                            Text='<%# Eval("empid") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="DeptID">
                        <ItemTemplate>
                            <asp:Label ID="lbldeptid" runat="server"  
                                            Text='<%# Eval("deptid") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Full Name">
                        <ItemTemplate>
                            <asp:Label ID="lblfullname" runat="server"  
                                            Text='<% #Eval("fullname") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Designation">
                        <ItemTemplate>
                            <asp:Label ID="lbldes" runat="server"  
                                            Text='<%# Eval("designation") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Qualification">
                        <ItemTemplate>
                            <asp:Label ID="lblqual" runat="server" 
                                             Text='<%# Eval("qualification") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkMain" runat="server" 
                                   onclick="javascript:CheckUnCheckAll(this);" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="chkChild" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
                <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
                <RowStyle BackColor="White" ForeColor="#330099" />
                <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
                <SortedAscendingCellStyle BackColor="#FEFCEB" />
                <SortedAscendingHeaderStyle BackColor="#AF0101" />
                <SortedDescendingCellStyle BackColor="#F6F0C0" />
                <SortedDescendingHeaderStyle BackColor="#7E0000" />
            </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:

  1. Impressive Article . . . Works Awesome

    ReplyDelete
  2. 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;
    }
    });
    }

    ReplyDelete