Select deselect all checkboxes in grid view using javascript

By
Advertisement


Introduction:

In my previous article I have explained about 

Get Ip address/domain of the domain/Ip address in C#.Net  In this article I am going to explain the process of select and deselect all checkboxes in a gridview.

 

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 inside <appsettings>.

 

<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 HeaderText="Check">
            <ItemTemplate>
                <asp:CheckBox ID="check" Text="" 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>
<br />
<input type="button" value="Check" id="btnCheck" onclick="return checkall();" />
<input type="button" value="UnCheck" id="btnUnCheck" onclick="return uncheckall();" />
</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 two javascript functions one for selecting checkbox and another one for deselecting checkboxes. The javascript code is given below.


<script type="text/javascript">
function checkall() {
    var grid = document.getElementById('<%= grdEmployee.ClientID %>');
    var cell, ccell;
    var val = 0;

    if (grid.rows.length > 0) {
        for (i = 1; i < grid.rows.length; i++) {
            ccell = grid.rows[i].cells[0];
            cell = grid.rows[i].cells[1];
            for (j = 0; j < ccell.childNodes.length; j++) {
                if (ccell.childNodes[j].type == "checkbox") {
                    ccell.childNodes[j].checked = "true";
                }
            }
        }
        return true;
    }
}

function uncheckall() {
    var grid = document.getElementById('<%= grdEmployee.ClientID %>');
    var cell, ccell;
    var val = 0;
    if (grid.rows.length > 0) {
        for (i = 1; i < grid.rows.length; i++) {
            ccell = grid.rows[i].cells[0];
            cell = grid.rows[i].cells[1];
            for (j = 0; j < ccell.childNodes.length; j++) {
                if (ccell.childNodes[j].type == "checkbox") {
                    ccell.childNodes[j].checked = false;

                }
            }
        }
        return true;
    }
}
</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