In this article I will explain with an example, how implement Server Side check all CheckBoxes functionality in ASP.Net GridView.
Server Side means the check all CheckBoxes functionality will not be implanted on Client Side with the help of JavaScript or jQuery.
HTML Markup
The HTML Markup consists of an ASP.Net GridView containing one TemplateField column and three BoundField columns.
The TemplateField column consists of a HeaderTemplate with a CheckBox (Header Row CheckBox) and an ItemTemplate with CheckBox (Row CheckBox).
The Header Row CheckBox and the Row CheckBoxes have been assigned with OnCheckedChanged event handler and the AutoPostBack property to True.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" OnCheckedChanged="chkAll_CheckedChanged" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" OnCheckedChanged="chk_CheckedChanged" AutoPostBack="true" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="Customer Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country")});
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Check Uncheck all CheckBoxes in GridView when Header CheckBox is checked
The following event handler is executed when the GridView Header Row CheckBox is checked or unchecked.
Inside this event handler, first the state of the Header CheckBox is determined.
Finally, a loop is executed over the GridView Rows and each CheckBox is checked or unchecked based on state of Header Row CheckBox.
protected void chkAll_CheckedChanged(object sender, EventArgs e)
{
//Detmermine the state of the Header CheckBox.
bool isChecked = (sender as CheckBox).Checked;
//Loop and check and uncheck all row CheckBoxes based on Header Cell CheckBox.
foreach (GridViewRow row in GridView1.Rows)
{
(row.FindControl("chk") as CheckBox).Checked = isChecked;
}
}
When the Row CheckBoxes are checked then check the Header Row CheckBox
The following event handler is executed when the GridView Row CheckBox is checked.
Inside this event handler, a loop is executed over the GridView Rows and each CheckBox is verified whether checked or unchecked.
Finally, the Header Row CheckBox is referenced and if all Row CheckBoxes are checked, then Header Row CheckBox is checked and even if one Row CheckBox is unchecked then the Header Row CheckBox will be unchecked.
protected void chk_CheckedChanged(object sender, EventArgs e)
{
bool isChecked = true;
//Loop to verify whether all row CheckBoxes are checked or not.
foreach (GridViewRow row in GridView1.Rows)
{
if (!(row.FindControl("chk") as CheckBox).Checked)
{
//If one CheckBox is found unchecked. Break.
isChecked = false;
break;
}
}
//Set the state of the Header CheckBox based on isChecked variable.
CheckBox chkAll = GridView1.HeaderRow.FindControl("chkAll") as CheckBox;
chkAll.Checked = isChecked;
}
Screenshot
Demo
Downloads