Click here to Skip to main content
15,921,295 members
Articles / Web Development / HTML

Selecting Multiple checkboxes inside a GridView Control

Rate me:
Please Sign up or sign in to vote.
4.66/5 (83 votes)
3 Aug 20051 min read 821.6K   148   89
This article describes how you can select checkboxes inside a GridView control.

Introduction

GridView is a new data bound control introduced by Microsoft in Visual Studio .NET 2005. Most of the operations like sorting, paging and selecting items from the GridView are already built in and you can use it through the design view. In this article, I will explain how you can select single as well as all the checkboxes which are inside a GridView control.

Selecting Checkboxes inside the GridView Control

GridView has a CheckboxField column which maps the checkbox to a field in the database. In this article, we won't be using that, we will make a checkbox in a template column. Simply add a asp:checkbox control in the item template of the GridView control. If you are working with a DataGrid control and want the same functionality, then please check out my article: Selecting multiple checkboxes inside a DataGrid control.

The HTML code looks something like this:

ASP.NET
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
   AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="PersonID" 
   DataSourceID="mySource" Width="366px" CellPadding="4" 
   ForeColor="#333333" GridLines="None">
 <Columns>
   <asp:CommandField ShowSelectButton="True" />
   <asp:BoundField DataField="PersonID" HeaderText="PersonID" 
         InsertVisible="False" ReadOnly="True" SortExpression="PersonID" />
   <asp:BoundField DataField="Name" HeaderText="Name" 
                                       SortExpression="Name" />
   <asp:TemplateField HeaderText="Select">
    <ItemTemplate>
       <asp:CheckBox ID="chkSelect" runat="server" />
    </ItemTemplate>
    <HeaderTemplate>
    </HeaderTemplate>
   </asp:TemplateField>

 </Columns>

 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" 
                           HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <AlternatingRowStyle BackColor="White" />
</asp:GridView>

Now in the button click event, write this code:

C#
// StringBuilder object
StringBuilder str = new StringBuilder();

// Select the checkboxes from the GridView control
for (int i = 0; i < GridView1.Rows.Count; i++)
{
  GridViewRow row = GridView1.Rows[i];
  bool isChecked = ((CheckBox) row.FindControl("chkSelect")).Checked;

  if (isChecked)
  {
    // Column 2 is the name column
    str.Append(GridView1.Rows[i].Cells[2].Text);
  }
}

// prints out the result
Response.Write(str.ToString());

The code above just iterates through the GridView and selects the checked checkboxes. Later, it appends the selected value to a StringBuilder object. In order to use StringBuilder, you will need to add the System.Text namespace.

Making a CheckAll Functionality

To add a check-all functionality in the GridView, simply add a HTML CheckBox to the header template of the checkbox column.

HTML
<HeaderTemplate>
  <input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);" 
              runat="server" type="checkbox" />
</HeaderTemplate>

SelectAllCheckboxes JavaScript method:

JavaScript
<script language=javascript>

 function SelectAllCheckboxes(spanChk){

   // Added as ASPX uses SPAN for checkbox
   var oItem = spanChk.children;
   var theBox= (spanChk.type=="checkbox") ? 
        spanChk : spanChk.children.item[0];
   xState=theBox.checked;
   elm=theBox.form.elements;

   for(i=0;i<elm.length;i++)
     if(elm[i].type=="checkbox" && 
              elm[i].id!=theBox.id)
     {
       //elm[i].click();
       if(elm[i].checked!=xState)
         elm[i].click();
       //elm[i].checked=xState;
     }
 }
</script>

This is it. I hope you like the article, happy coding!

History

  • 3rd August, 2005: Initial version

License

This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below.

A list of licenses authors might use can be found here.


Written By
Web Developer
United States United States
My name is Mohammad Azam and I have been developing iOS applications since 2010. I have worked as a lead mobile developer for VALIC, AIG, Schlumberger, Baker Hughes, Blinds.com and The Home Depot. I have also published tons of my own apps to the App Store and even got featured by Apple for my app, Vegetable Tree. I highly recommend that you check out my portfolio. At present I am working as a lead instructor at DigitalCrafts.




I also have a lot of Udemy courses which you can check out at the following link:
Mohammad Azam Udemy Courses

Comments and Discussions

 
Generalit works great Pin
AnilMiLaN26-Nov-09 18:16
AnilMiLaN26-Nov-09 18:16 
QuestionHow to bring Old state to the checkboxes of the gridview control when the postback occurs Pin
Rajeshgut14-Oct-09 3:40
Rajeshgut14-Oct-09 3:40 
AnswerRe: How to bring Old state to the checkboxes of the gridview control when the postback occurs Pin
azamsharp28-Apr-10 5:00
azamsharp28-Apr-10 5:00 
QuestionCan you do this without forms Pin
cheesehead9118229-Sep-09 7:50
cheesehead9118229-Sep-09 7:50 
QuestionHow to select a checkbox with ctrl and click instead of click Pin
emily022823-Jun-09 9:15
emily022823-Jun-09 9:15 
GeneralNice article Pin
Donsw18-Apr-09 10:21
Donsw18-Apr-09 10:21 
GeneralPlz can u help Pin
Mehul_qaz16-Apr-09 3:52
Mehul_qaz16-Apr-09 3:52 
Generalnice article Pin
kanza azhar12-Apr-09 3:37
kanza azhar12-Apr-09 3:37 
Really nice article has the code m looking for
great........
QuestionCheckboxes and GridView paging [modified] Pin
boqboq2-Mar-09 1:58
boqboq2-Mar-09 1:58 
AnswerRe: Checkboxes and GridView paging Pin
cUbeindaclUb5-Sep-11 23:37
cUbeindaclUb5-Sep-11 23:37 
QuestionBeautiful!...How can I have 2 gridviews on a page and NOT have them control each other? Pin
Brian Fay9-Feb-09 11:51
Brian Fay9-Feb-09 11:51 
AnswerRe: Beautiful!...How can I have 2 gridviews on a page and NOT have them control each other? Pin
azamsharp11-Feb-09 7:50
azamsharp11-Feb-09 7:50 
GeneralExcelente Mi Amigo. Sos pero jodido. Pin
Luis Rangel4-Feb-09 6:34
Luis Rangel4-Feb-09 6:34 
GeneralAA - Awesome Azam! Pin
planetregin23-Dec-08 4:39
planetregin23-Dec-08 4:39 
Generalgood Pin
Krishna Chandra Singh27-Aug-08 22:33
Krishna Chandra Singh27-Aug-08 22:33 
GeneralThank you for the great article Pin
jitendra v patil22-Aug-08 0:11
jitendra v patil22-Aug-08 0:11 
JokeGreat article - simple and concise! Pin
Mark Abraham8-Aug-08 10:41
Mark Abraham8-Aug-08 10:41 
QuestionSessions questions Pin
Manigandanmax2cs16-Jul-08 0:31
Manigandanmax2cs16-Jul-08 0:31 
QuestionHow to count checked checkbox while paging in the gridview? [modified] Pin
Member 408591513-Jun-08 1:46
Member 408591513-Jun-08 1:46 
QuestionGridView.DataSource = table; is not working with checkboxes in the GridView Pin
Member 459057921-Mar-08 22:57
Member 459057921-Mar-08 22:57 
QuestionHow to mark CheckBox as checked in DataGrid according to condition taken from database Pin
abhijeet.musale13-Mar-08 3:22
abhijeet.musale13-Mar-08 3:22 
General multiple column each one has checkall checkbox, I got it Pin
ab_dc21-Nov-07 2:16
ab_dc21-Nov-07 2:16 
Questionmultiple column each one has checkall checkbox, how to??? Pin
ab_dc21-Nov-07 1:28
ab_dc21-Nov-07 1:28 
GeneralThe checkbox returns false even if it checked [modified] Pin
Namrata110-Oct-07 23:37
Namrata110-Oct-07 23:37 
QuestionRe: The checkbox returns false even if it checked Pin
ab_dc23-Oct-07 2:01
ab_dc23-Oct-07 2:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.