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


Collapse

Copy Code

<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

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


Collapse

Copy Code

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

SelectAllCheckboxes

JavaScript method:


Collapse

Copy Code

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

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.