Select All Checkboxes In GridView Using jQuery In ASP.NET C#

Sometimes simple things go wrong, just like this simple functionality of "Select all" took my whole day. This is also important in the clumsy world, no one has that much time to check the boxes one by one. It is okay if there are 4-5 checkboxes but what about when it comes to 100 – 200 – that's a bit time consuming, so to shorthand that here, in this article I will show you how to select and deselect all the checkboxes in GridView using jQuery in ASP.NET C#.

Initial Chamber

Step 1: Open your Visual Studio 2010 and create an Empty Website, Give a suitable name, gridview_demo.

Step 2: In Solution Explorer, you get your empty website, Add a web form, SQL Database. Here are the steps,

For Web Form:

gridview_demo (Your Empty Website) - Right Click, Add New Item, then Web Form. Name it gridview_demo.aspx.

For SQL Server Database:

gridview_demo (Your Empty Website) - Right Click, Add New Item, then SQL Server Database. Add Database inside the App_Data_folder.

Database Chamber:

Step 3:

Get to your Database [Database.mdf], we will create a table - tbl_Data, Go to the database.mdf - Table, then add New table, design your table like the following:

Table - tbl_data [Don’t forget to make ID - Identity Specification, click Yes]

Design Chamber

Step 5:

Now, open your gridview_demo.aspx file, were we create our design by taking Gridview from the toolbox, After dragging the control – add 4 bound field button – Name it as : ID, Name , Location and Select All. You have to change the “Select All field” to – “Template Field”.

Template Field:

We use Template Fields when we wish to display ASP.NET controls in a GridView column. We display ASP.NET controls in a GridView column to provide additional functionality in the user interface.

Here are some beautiful answers regarding Template Fields – Template Fields.

Gridview_demo.aspx:

<%@PageLanguage="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 type="text/javascript" language="javascript"> functionCheckall(Checkbox) { var GridView1 = document.getElementById("
<%=GridView1.ClientID %>"); for (i = 1; i
< GridView1.rows.length; i++) { GridView1.rows[i].cells[3].getElementsByTagName( "INPUT")[0].checked=C heckbox.checked; } } </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridViewID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyleBackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBoxID="CheckBox1" AutoPostBack="true" OnCheckedChanged="chckchanged" runat="server" /> </HeaderTemplate>
<ItemTemplate>
<asp:CheckBoxID="CheckBox2" runat="server" /> </ItemTemplate>
</asp:TemplateField>
<asp:BoundFieldDataField="id" HeaderText="ID" />
<asp:BoundFieldDataField="name" HeaderText="Name" />
<asp:BoundFieldDataField="location" HeaderText="Location" /> </Columns>
<FooterStyleBackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyleBackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyleBackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyleBackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyleBackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyleBackColor="#FDF5AC" />
<SortedAscendingHeaderStyleBackColor="#4D0000" />
<SortedDescendingCellStyleBackColor="#FCF6C0" />
<SortedDescendingHeaderStyleBackColor="#820000" /> </asp:GridView>
</div>
</form>
</body>
</html>

table
Code Chamber:

Step 6:

Open your gridview_demo.aspx.cs, here in this part we will bind our GridView by the database so that whatever the data is there in the database gets displayed here and after that we will write our code for checkboxes in the event of Checkbox OnCheckedChanged.

OnCheckedChanged :The CheckedChanged event is raised when the value of the Checked property changes between posts to the server.

Gridview_demo.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class_Default: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
refreshdata();
}
}
public void refreshdata()
{
SqlConnection con = newSqlConnection(@ "Data Source=Nilesh;InitialCatalog=nil_db;Integrated Security=True");
con.Open();
SqlCommandcmd = newSqlCommand("select * from tbl_data", con);
SqlDataAdaptersda = newSqlDataAdapter(cmd);
DataTable dt = newDataTable();
sda.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void chckchanged(object sender, EventArgs e)
{
CheckBox chckheader = (CheckBox) GridView1.HeaderRow.FindControl("CheckBox1");
foreach(GridViewRow row in GridView1.Rows)
{
CheckBoxchckrw = (CheckBox) row.FindControl("CheckBox2");
if (chckheader.Checked == true)
{
chckrw.Checked = true;
} else
{
chckrw.Checked = false;
}
}
}
}

Output Chamber:

Hope you like it. Thank you for reading.