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:

Collapse

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

Collapse

// StringBuilder object



StringBuilder str = new StringBuilder();



// Select the checkboxes from the GridView control



for (int i = 0; i < row =" GridView1.Rows[i];" class="code-keyword">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.

Collapse

<HeaderTemplate>

<input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);"

            runat="server" type="checkbox" />

</HeaderTemplate>

SelectAllCheckboxes JavaScript method:

Collapse