How to add checkbox to GridView rows in C#?


Want to add checkboxes to the rows in a data gridview? Learn in this article, how to add a checkbox in GridView. Also check out a sample code in C# for deleting multiple items selected through checkboxes in GridView.

You must have seen many applications where the GridView provides controls like Checkboxes, Buttons, Textboxes etc. for user activities. This article focuses on how to add a checkbox to a GridView control and how to perform joint operations over a set of selected rows from the GridView, like deleting multiple rows selected by the user.

GridView in Asp.Net is a data control which is used to display data in a tabular manner. Data GridView control are capable of displaying not only data but also some visual elements like checkbox, combobox, textbox, buttons etc.

Here we will see how to add a checkbox to GridView. To add any visual control to a GridView we will have to use Styles or Templates. I would demonstrate the insertion of a CheckBox in a GridView through a small web application where we will bind the data from an SQL data table to a Gridview. We would add the checkbox to the GridView by using the Template field. After the GridView gets populated we would select multiple rows through the check boxes and delete all the selected rows together on a single click.

First create a web application from Visual Studio as File>New>Project. Select Visual C#>Web then Asp.Net Empty web application.

Now add a GridView control to your web application and bind this GridView control to the required data table by initializing a connection to the database. In order to create and use an SQL connection we would require to add the following namespaces in our program:


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


Source code for Adding CheckBox to GridView


As said earlier in order to insert checkboxes in the GridView control we would use the TemplateField as:


<asp:GridView ID="gvw_employees" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField Datafield ="emp_id_pk" HeaderText ="Employee ID"/>
<asp:BoundField Datafield ="emp_fullname" HeaderText ="Employee Full Name"/>
<asp:BoundField Datafield ="emp_designation" HeaderText ="Designation"/>
<asp:BoundField Datafield ="emp_department" HeaderText ="Department"/>

<%-- Adding CheckBox to Grid View --%>
<asp:TemplateField HeaderText ="Select">
<ItemTemplate>
<asp:CheckBox ID ="checkBox" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>


C# code for adding CheckBox to a GridView


Now in order to create connection, bind data from SQL data table to the GridView I used the following C# code:

public partial class WebForm1 : System.Web.UI.Page
{
SqlConnection conn = new SqlConnection();
SqlCommand cmd = new SqlCommand();
SqlCommandBuilder cb = new SqlCommandBuilder();
SqlDataAdapter adp = new SqlDataAdapter();
DataSet ds = new DataSet();
DataRow dr;

protected void Page_Load(object sender, EventArgs e)
{
conn.ConnectionString = "Connection string"; // Put actual conn string here
cmd.Connection = conn;
adp.SelectCommand = cmd;

//Binding the Grid to the database table
if (!IsPostBack)
{
cmd.CommandText = "select * from EmpDetails";
adp.Fill(ds, "st");
gvw_employees.DataSource = ds.Tables["st"];
gvw_employees.DataBind();
}

}


You will get the desired result now i.e CheckBox in GridView control . When this program is run something like what shown below is seen on the web page:

Add CheckBox in GridView in Asp.Net

C# code for deleting multiple selected rows from a GridView


As an extention, I am here demonstrating another piece of C# code which would delete rows selected by the user using the checkbox provided in the GridView control.

Here I will use the FindControl method to find the checked CheckBox controls in the container control i.e GridView. Below is the screenshot from the code page to illustrate the

Code to Delete multiple rows selected in GridView

You can futher enhance this code by adding checkbox/link for Select All so as to select all the rows shown and performing a common action on them.

GridView can also be used to fetch data from Excel files. Learn more on How to display data from Excel file in to a GridView


More articles: GridView Samples

Comments

Guest Author: prince07 Oct 2012

its very useful thank u

Author: vinay04 Mar 2013 Member Level: Bronze   Points : 2

This is good article. have a look of this article with check box
http://dotnetpools.com/Article/ArticleDetiail/?articleId=238&title=MVC3:-How-to-bind-radio-button-and-make-single-radio-button-selection-in-webgrid

Guest Author: Martin David17 Mar 2013

Thanks for the article ..Was very useful

Guest Author: Cyclone18 Mar 2013

Thanks for this article it worked for me .

Guest Author: Mubarak17 Apr 2013

When i try with this code. its not working mean that it shows only "chkcheck.checked ==false " how can i do to solve this problem please help me to get delete rows using checkbox



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: