Skip to main content
Email Password   helpLost your password?

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: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:

// 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.

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

SelectAllCheckboxes JavaScript method:

<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!

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralHow to bring Old state to the checkboxes of the gridview control when the postback occurs Pin
Rajeshgut		4:40 14 Oct '09  
GeneralCan you do this without forms Pin
cheesehead91182		8:50 29 Sep '09  
QuestionHow to select a checkbox with ctrl and click instead of click Pin
emily0228		10:15 23 Jun '09  
GeneralNice article Pin
Donsw		11:21 18 Apr '09  
GeneralPlz can u help Pin
Mehul_qaz		4:52 16 Apr '09  
Generalnice article Pin
kanza azhar		4:37 12 Apr '09  
QuestionCheckboxes and GridView paging [modified] Pin
boqboq		2:58 2 Mar '09  
QuestionBeautiful!...How can I have 2 gridviews on a page and NOT have them control each other? Pin
Brian Fay		12:51 9 Feb '09  
AnswerRe: Beautiful!...How can I have 2 gridviews on a page and NOT have them control each other? Pin
azamsharp		8:50 11 Feb '09  
GeneralExcelente Mi Amigo. Sos pero jodido. Pin
Luis Rangel		7:34 4 Feb '09  
GeneralAA - Awesome Azam! Pin
planetregin		5:39 23 Dec '08  
Generalgood Pin
Member 2738246		23:33 27 Aug '08  
GeneralThank you for the great article Pin
jitendra v patil		1:11 22 Aug '08  
JokeGreat article - simple and concise! Pin
Mark Abraham		11:41 8 Aug '08  
QuestionSessions questions Pin
Manigandanmax2cs		1:31 16 Jul '08  
QuestionHow to count checked checkbox while paging in the gridview? [modified] Pin
Member 4085915		2:46 13 Jun '08  
QuestionGridView.DataSource = table; is not working with checkboxes in the GridView Pin
Member 4590579		23:57 21 Mar '08  
GeneralHow to mark CheckBox as checked in DataGrid according to condition taken from database Pin
abhijeet.musale		4:22 13 Mar '08  
General multiple column each one has checkall checkbox, I got it Pin
ab_dc		3:16 21 Nov '07  
Generalmultiple column each one has checkall checkbox, how to??? Pin
ab_dc		2:28 21 Nov '07  
GeneralThe checkbox returns false even if it checked [modified] Pin
Namrata1		0:37 11 Oct '07  
QuestionRe: The checkbox returns false even if it checked Pin
ab_dc		3:01 23 Oct '07  
GeneralVery Good Article Pin
umay		20:35 26 Oct '07  
GeneralRe: Very Good Article Pin
ab_dc		2:06 28 Oct '07  
GeneralRe: Very Good Article Pin
riteshms		0:45 27 Feb '08  
Last Visit: 12:02 21 Nov '09     Last Update: 12:02 21 Nov '09 123 Next »


Last Updated 3 Aug 2005 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009