Skip to main content

Select deselect all checkboxes in grid view using javascript



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


Comments

Popular posts from this blog

Sort Dictionary Based On Value In Asp.Net And C#.Net | Convert Dictionary into KeyValuePair or KeyValuePair into Dictionary.

In this tutorial i am going to explain about how to sort dictionary object based on value in asp.net and C#.Net or convert unsorted dictionary to sorted dictionary object in C#.Net and VB.Net or Convert Dictionary into KeyValuePair or KeyValuePair into Dictionary.

Code To Convert rupees(numbers) into words using C#.Net

Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...

C# code to send mail using smtp from gmail,yahoo mail and live mail

Introduction: In my previous article I have explained about   How to bind/Unbind events in jQuery . In this article I am going to explain about how to send mail from ASP.Net using gmail,yahoomail and live mail credentials. Explanation: First Include the below namespaces in your code behind file. using System; using System.Net; using System.Net.Mail;