Check uncheck all checkboxes in grid view using jquery

By
Advertisement

Introduction:                                  

In my previous article I have explained about  Select deselect all checkboxes in grid view using javascript.In this article I am going to explain the same process using jquery.

 

Explanation:

While working with grid view I got a requirement to select and deselect all checkboxes in a grid view in a single click. For this first create a table and insert some sample records in the table. I am binding the gridview through the procedure at the page load. And at the end I have two buttons which is used for select/deselect all checkboxes.

Below is the query to create table and insert some sample records.


--creating table
CREATE TABLE Employee(Eid INT IDENTITY,Empname VARCHAR(50),Designation VARCHAR(50))

--Inserting into table
INSERT INTO Employee values('Kanna','Software developer')
INSERT INTO Employee values('Dasan','Software developer')
INSERT INTO Employee values('Thirumalai','Network engineer')

--procedure for retriving data
CREATE PROC getEmployee
AS
BEGIN
SELECT * FROM Employee
END

After that add your connection string in web.config

 

<add key="mycon" value="data source=GKANNADASAN;uid=sa;pwd=kanna;
Initial Catalog=master;"/>                      

ASPX code is given below.

<div>
    <asp:GridView runat="server" ID="grdEmployee" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="chkSelectAll" runat="server" Text="" onclick="javascript:SelectAllCheckboxes(this);" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelectAdd" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField HeaderText="Employee id" DataField="Eid" />
            <asp:BoundField HeaderText="Name" DataField="Empname" />
            <asp:BoundField HeaderText="Designation" DataField="Designation" />
        </Columns>
    </asp:GridView>
</div>

 

After that add the below mentioned namespaces in code behind file.

 

using System.Data.SqlClient;
using System.Data;
using System.Configuration;

Below code is used to bind the grid view.


protected void Page_Load(object sender, EventArgs e)
{
    DataSet ds = new DataSet();
    try
    {
        string constr = ConfigurationManager.AppSettings["mycon"];
        SqlConnection con = new SqlConnection();
        SqlCommand cmd = new SqlCommand();
        con.ConnectionString = constr;
        cmd.Connection = con;
        cmd.CommandText = "getEmployee";
        cmd.CommandType = CommandType.StoredProcedure;
        SqlDataAdapter sda = new SqlDataAdapter();
        sda.SelectCommand = cmd;
        sda.Fill(ds);
        if (ds.Tables[0] != null)
        {
            grdEmployee.DataSource=ds.Tables[0];
            grdEmployee.DataBind();
        }
    }
    catch (Exception ex)
    {
          
    }
}

 

After that in aspx page I wrote a jquery function for selecting and deselecting checkboxes. The jquery code is given below.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

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

Do you like this article. Then comment here or share with your friends. Or like our Facebook page. Or post your comments below

Download Source Code Here

0 comments:

Post a Comment

Online Casino