Check Or Uncheck Checkboxes within GridView in ASP.NET using JQuery
How to implement check and uncheckboxes within the gridview control using asp.net:
Source:
Introduction
Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.
Implementation
Let’s we have 10 rows in gridview with first column to select user each rows to perform operation. On this time user can’t check each check box to select, because its consume time and it is not good user friendly system as well.
So I have implemented to features to select all checkbox or deselect all checkboxes in one click using a common check box. Even let’s say I have 10 records with checkboxes, but user want to select 5, 8 and 10. With less number of click and also without refresh page. Please try live demo end of the this article.
Let’s walk step by step to implement it.
Step 1
As usual create a new web project using visual studio 2008 and give name to project is “JQueryChkBox”.
Note: you can use any name to project.
Step 2
Add a GridView with few columns in page as like below,
Html Code
<asp:GridView ID="gvpub" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox runat="server" ID="chkAll" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkSelection" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Address1" HeaderText="Address1" />
<asp:BoundField DataField="Address2" HeaderText="Country" />
<asp:BoundField DataField="Company" HeaderText="Company" />
</Columns>
</asp:GridView>
The first column has a template field to customize the header and row for this column. The header template will have a checkbox to check or uncheck checkboxes with one click. The item template will have checkbox for represent each row.
Step 3
Let’s create a simple data source to bind to grid view. This data source is custom object collection of the publishers.
Note: I have attached sample project end of this article you can download it.
C# Code
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
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;
public partial class checkanduncheckdemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<Publisher> collectionOfPub = new List<Publisher>();
collectionOfPub.Add(new Publisher("Wrox", "No-02,John Ave 2", "US", "WROX"));
collectionOfPub.Add(new Publisher("Apress", "No-03,Cels Ave 6", "US", "APRESS"));
collectionOfPub.Add(new Publisher("Sams", "No-89,Test Ave 32", "US", "SAMS"));
collectionOfPub.Add(new Publisher("Orelly", "No-23/08,John Ave 23", "US", "ORELLY"));
collectionOfPub.Add(new Publisher("Packtpub", "No-56,John Ave 5", "INDIA", "PACKTPUB"));
this.gvpub.DataSource = collectionOfPub;
this.gvpub.DataBind();
}
}
}
Run and see output like shown,
Output
Step 4
In order work with JQuery, we have to add JQuery library in page as like bellow,
JavaScript
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
I’m always to prefer refer JQuery library source from Google CDN.
Step 5
Now write few lines of JavaScript code to access checkbox controls within gridview and implement features.
JavaScript
<script language="javascript">
$(document).ready(function(){
var chkboxrow = "#<%=gvpub.ClientID%> input[id*='chkSelection']:checkbox";
var chkall =$("input[id$='chkAll']");
$(chkall).change(function(){
$(chkboxrow).each(function()
{
if($(this).is(':checked'))
{
$(this).attr('checked', false);
}
else
{
$(this).attr('checked', true);
}
});
});
});
</script>
Code Explanation
1. The first line is defining document ready event for jquery.
2. In the next line get all checkboxes within the gridview with id “chkselection” and type is checkbox.
var chkboxrow = "#<%=gvpub.ClientID%> input[id*='chkSelection']:checkbox";
3. Next line is get the header checkbox with id is “chkAll” to perform the change event later part of the code.
var chkall =$("input[id$='chkAll']");
4. Next line for register change event to the checkbox (header) and then loop each row checkbox and validate is checked or not, if not checked then check otherwise uncheck.
$(chkall).change(function(){
$(chkboxrow).each(function()
{
if($(this).is(':checked'))
{
$(this).attr('checked', false);
}
else
{
$(this).attr('checked', true);
}
});
});
5. $(this).is(‘:checked’) is help to verify a checkbox is checked or unchecked
6. $(this).attr(‘checked’, false); is used to set attibute “checked” is true or false. If true means its check else uncheck.
Step 6
Now run application and output like as shown below,
Live Demo
Check Or Uncheck Checkboxes within GridView
Download Sample Project
Introduction
Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.
Implementation
Let’s we have 10 rows in gridview with first column to select user each rows to perform operation. On this time user can’t check each check box to select, because its consume time and it is not good user friendly system as well.
So I have implemented to features to select all checkbox or deselect all checkboxes in one click using a common check box. Even let’s say I have 10 records with checkboxes, but user want to select 5, 8 and 10. With less number of click and also without refresh page. Please try live demo end of the this article.
Let’s walk step by step to implement it.
Step 1
As usual create a new web project using visual studio 2008 and give name to project is “JQueryChkBox”.
Note: you can use any name to project.
Step 2
Add a GridView with few columns in page as like below,
Html Code
<asp:GridView ID="gvpub" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox runat="server" ID="chkAll" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkSelection" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Address1" HeaderText="Address1" />
<asp:BoundField DataField="Address2" HeaderText="Country" />
<asp:BoundField DataField="Company" HeaderText="Company" />
</Columns>
</asp:GridView>
The first column has a template field to customize the header and row for this column. The header template will have a checkbox to check or uncheck checkboxes with one click. The item template will have checkbox for represent each row.
Step 3
Let’s create a simple data source to bind to grid view. This data source is custom object collection of the publishers.
Note: I have attached sample project end of this article you can download it.
C# Code
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
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;
public partial class checkanduncheckdemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<Publisher> collectionOfPub = new List<Publisher>();
collectionOfPub.Add(new Publisher("Wrox", "No-02,John Ave 2", "US", "WROX"));
collectionOfPub.Add(new Publisher("Apress", "No-03,Cels Ave 6", "US", "APRESS"));
collectionOfPub.Add(new Publisher("Sams", "No-89,Test Ave 32", "US", "SAMS"));
collectionOfPub.Add(new Publisher("Orelly", "No-23/08,John Ave 23", "US", "ORELLY"));
collectionOfPub.Add(new Publisher("Packtpub", "No-56,John Ave 5", "INDIA", "PACKTPUB"));
this.gvpub.DataSource = collectionOfPub;
this.gvpub.DataBind();
}
}
}
Run and see output like shown,
Output
Step 4
In order work with JQuery, we have to add JQuery library in page as like bellow,
JavaScript
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
I’m always to prefer refer JQuery library source from Google CDN.
Step 5
Now write few lines of JavaScript code to access checkbox controls within gridview and implement features.
JavaScript
<script language="javascript">
$(document).ready(function(){
var chkboxrow = "#<%=gvpub.ClientID%> input[id*='chkSelection']:checkbox";
var chkall =$("input[id$='chkAll']");
$(chkall).change(function(){
$(chkboxrow).each(function()
{
if($(this).is(':checked'))
{
$(this).attr('checked', false);
}
else
{
$(this).attr('checked', true);
}
});
});
});
</script>
Code Explanation
1. The first line is defining document ready event for jquery.
2. In the next line get all checkboxes within the gridview with id “chkselection” and type is checkbox.
var chkboxrow = "#<%=gvpub.ClientID%> input[id*='chkSelection']:checkbox";
3. Next line is get the header checkbox with id is “chkAll” to perform the change event later part of the code.
var chkall =$("input[id$='chkAll']");
4. Next line for register change event to the checkbox (header) and then loop each row checkbox and validate is checked or not, if not checked then check otherwise uncheck.
$(chkall).change(function(){
$(chkboxrow).each(function()
{
if($(this).is(':checked'))
{
$(this).attr('checked', false);
}
else
{
$(this).attr('checked', true);
}
});
});
5. $(this).is(‘:checked’) is help to verify a checkbox is checked or unchecked
6. $(this).attr(‘checked’, false); is used to set attibute “checked” is true or false. If true means its check else uncheck.
Step 6
Now run application and output like as shown below,
Live Demo
Check Or Uncheck Checkboxes within GridView
Download Sample Project
How to grab the text inside the TextBox in ASP.NET using jQuery Check-All checkbox using GridView (asp.net)