Select All Checkboxes while Paging in GridView
This question has been around for pretty long time. The scenario is simple. You have a GridView control which has paging enabled and you also have a checkbox column in the GridView which allows the user to select items or all the items using the "ChkAll" checkbox in the header of the GridView.
Check out the image below:
Okay! now when you select the top checkbox in the GridView all the items (checkboxes) are selected. This is pretty easy. If you are not familier how to do this then check out the following article:
http://gridviewguy.com/ArticleDetails.aspx?articleID=81
Okay so it selects all the checkboxes on a single page of the GridView. This is important because we have paging enabled hence only few number of items are displayed which is controlled by the PageSize property of the GridView control. So, if you go to page 2, page 3 or any other page you will find that all the items are unchecked.
One easy workaround is that when you check the "CheckAll" checkbox which is in the header just assume that all the items are selected and instead of iterating through the GridView rows simply returns the collection that you are using.
The question is that how do you know that "ChkAll" checkbox is checked. Well, you can always use the Request.Form[] collection to get id. Check out the following code:
protected void Btn_Select_Click(object sender, EventArgs e)
{
// Now we need to check that if the selectAll checkbox is clicked or not
string[] keys = Request.Form.GetValues("gvProducts$ctl01$chkAll");
// This means that checkAll was selected so simply get the data from the collection
if (keys != null && keys.Length > 0)
{
// This means all the items are selected as the Select All has been checked
// print out the selected items
DataSet ds = GetDataSet();
foreach (DataRow row in ds.Tables[0].Rows)
{
Response.Write(row["ProductName"] as String);
}
}
}
Although it will give use the correct result but the user might go to page 2, page 3 or any page to actually see the selected checkboxes. And when this happens he/she will be dissapointed since none of the items will be selected. Yes, our illusion will fail and the only thing the user will say is that "What happened to all the checkboxes? They should be selected as I selected the ChkAll checkbox". Okay, so how to solve this problem.
The hidden field comes to our rescue. Check out the code below:
GridView HTML code:
<asp:GridView AllowPaging="true" PageSize="10" AutoGenerateColumns="false" ID="gvProducts" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" OnPageIndexChanging="gvProducts_PageIndexChanging">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input id="chkAll" onclick="SelectAllCheckboxes(this);" runat="server" type="checkbox" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ProductID">
<ItemTemplate>
<asp:Label ID="lblProductID" runat="server" Text='<%# Eval("ProductID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ProductName">
<ItemTemplate>
<asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="Btn_Select" runat="server" OnClick="Btn_Select_Click" Text="Get Selected Items" /></div>
<input type="hidden" name="checkboxParentHidden" id="checkboxParentHidden" runat="server" />
And here is the required BLOCKED SCRIPT
<script language="javascript" type="text/javascript">
if(document.getElementById("checkboxParentHidden").value == "parentChecked")
{
document.getElementById("gvProducts_ctl01_chkAll").checked = true;
SelectAllCheckboxes(document.getElementById("gvProducts_ctl01_chkAll"));
}
else
if(document.getElementById(
"gvProducts_ctl01_chkAll").value ==
"parentNotChecked")
{
document.getElementById("gvProducts_ctl01_chkAll").checked = false;
SelectAllCheckboxes(document.getElementById("gvProducts_ctl01_chkAll"));
}
// select/deselect all checkboxes
function
SelectAllCheckboxes(parentCheckBox)
{
if(parentCheckBox.checked)
{
// We can move this information into a hidden field so that it will be available for postbacks
document.getElementById("checkboxParentHidden").value = "parentChecked";
}
else
{
document.getElementById("checkboxParentHidden").value = "parentNotChecked";
}
var children = parentCheckBox.children;
var theBox = (parentCheckBox.type == "checkbox") ? parentCheckBox: parentCheckBox.children.item[0];
var checkboxes = theBox.form.elements;
for( i=0; i<checkboxes.length; i++)
{
if(checkboxes[i].type == "checkbox" && checkboxes[i].id != "gvProducts_ctl01_chkAll")
{
if(checkboxes[i].checked)
{
checkboxes[i].checked = false;
}
else
{
checkboxes[i].checked = true;
}
}
}
}
</
script>
After you implement this code your "ChkAll" checkboxes will work on every page of the GridView. And as you move from page to page you will find that all the checkboxes are selected based on the condition in "ChkAll".
Please note that this will not work if you want to select particular items from each page of the GridView. Luckly, I have written article about this issue also so you can mix the two techniques to get both the effects.
Check out this article for maintaining individual checkboxes on different pages of the GridView control:
http://aspalliance.com/774
Hope it helps!
Azam