Friday 2 November 2012

Select/ DeSelect all checkboxes in gridview using JQuery

Purpose : Select All Checkboxes by selecting checkbox in header of Gridview.



<%@ 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">

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript">

function SelectAllCheckboxes(Objchk) {
    $('#<%=grdView.ClientID %>').find("input:checkbox").each(function() {
        if (this != Objchk) {
            this.checked = Objchk.checked;
        }
    });
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView runat="server" ID="grdView" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Delete<asp:CheckBox ID="chkSelectAll" runat="server" Text="" onclick="javascript:SelectAllCheckboxes(this);" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkAllow" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Name
                    </HeaderTemplate>
                    <ItemTemplate>
                        Tarun
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>




.CS File CODE  : Bind Grid View




using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ArrayList arr = new ArrayList();
        arr.Add("Row1");
        arr.Add("Row2");
        arr.Add("Row3");
        grdView.DataSource = arr;
        grdView.DataBind();
    }


}


Jquery File Link http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

1 comment: