Tuesday, March 29, 2016

Check Uncheck all CheckBoxes in ASP.Net GridView using Javascript

In this article I am going to explain how to check and unchecked all check-box in asp.net grid view using JavaScript function

Code to check uncheck checkboxes

            <script type="text/javascript">
                function SelectAllCheckboxes(chk) {
                    $('#<%=TypeHeregidviewname.ClientID%>').find("input[id*='chkitem']:checkbox").each(function () {
                        if (this != chk) {
                            this.checked = chk.checked;
                        }
                    });
 
                }
        </script>

Code of Default..aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
            <script type="text/javascript">
                function SelectAllCheckboxes(chk) {
                    $('#<%=gvselectall.ClientID%>').find("input[id*='chkitem']:checkbox").each(function () {
                        if (this != chk) {
                            this.checked = chk.checked;
                        }
                    });
 
                }
        </script>
 
</head>
<body>
    <form id="form1" runat="server">
  
   <asp:GridView ID="gvselectall" runat="server" AutoGenerateColumns="false">
   <Columns>
 
  <asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkheader" runat="server" onclick="SelectAllCheckboxes(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkitem" runat="server"  />
</ItemTemplate>
</asp:TemplateField>
 
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblname" runat="server" Text='<%#Eval("name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
 
<asp:TemplateField HeaderText="Gender">
<ItemTemplate>
<asp:Label ID="lblgender" runat="server" Text='<%#Eval("gender") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
 
   </Columns>
   </asp:GridView>
    </form>
</body>
</html>

Code of Default..aspx.cs

using System;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt  = new  DataTable();
            dt.Columns.Add("name");
            dt.Columns.Add("gender");
            DataRow rr = dt.NewRow();
            rr["name"] = "Sharad";
            rr["gender"] = "Male";
            dt.Rows.Add(rr);
            DataRow rr1 = dt.NewRow();
            rr1["name"] = "Varun";
            rr1["gender"] = "Male";
            dt.Rows.Add(rr1);
            DataRow rr2 = dt.NewRow();
            rr2["name"] = "Devesh";
            rr2["gender"] = "Male";
            dt.Rows.Add(rr2);
            DataRow rr3 = dt.NewRow();
            rr3["name"] = "Sudhir";
            rr3["gender"] = "Male";
            dt.Rows.Add(rr3);
            DataRow rr4 = dt.NewRow();
            rr4["name"] = "Swati";
            rr4["gender"] = "Female";
            dt.Rows.Add(rr4);
 
            gvselectall.DataSource = dt;
            gvselectall.DataBind();
 
        }
    }
}

Output



After Click on header check-box


No comments:

Post a Comment