Wednesday, September 19, 2012

Check Uncheck All Checkboxes in Gridview Using JQuery

Here i will show how to Check or UnCheck Gridview CheckBoxes using Jquery. As the title says it checks only current gridview page.




Script to check All CheckBoxes :


          <script type="text/javascript">
        function CheckUnCheckAll(chk) {
            $('#<%=gvCheckAll.ClientID %>').find("input:checkbox").each(function () {
                if (this != chk) {
                    this.checked = chk.checked;
                }
            });
        }
    </script>

Full 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 page<br />
                using Jquery</h2>
            <asp:GridView ID="gvCheckAll" runat="server" BackColor="White" 
                AutoGenerateColumns="false" BorderColor="#CC9966" BorderStyle="None" 
                BorderWidth="1px" CellPadding="4" AllowPaging="true"
                OnPageIndexChanging="gvCheckAll_PageIndexChanging">
                <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>

Code Behind : 


using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
 
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();
        }
    }
}
 
Download From HERE 

No comments:

Post a Comment