Welcome to AspAdvice Sign in | Join | Help

AzamSharp

Some day I will know everything I hope that day never comes

Syndication

Tags

Navigation

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:

GridViewCheckBoxPaging1

 

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

&nbsp;<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

 

 

 

 

Published Thursday, October 26, 2006 1:50 PM by azamsharp

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# Select All Checkboxes While Paging in Gridview @ Thursday, October 26, 2006 4:57 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

DotNetKicks.com

# re: Select All Checkboxes while Paging in GridView @ Thursday, November 16, 2006 2:04 AM

This really saved my day :)

jayaveer

# re: Select All Checkboxes while Paging in GridView @ Sunday, September 30, 2007 8:01 PM

You know who re you ? You are the great programming prince

Gersy

# re: Select All Checkboxes while Paging in GridView @ Thursday, October 04, 2007 3:17 AM

This is great!

ardeeboi

# re: Select All Checkboxes while Paging in GridView @ Thursday, October 04, 2007 3:18 AM

This is great! Thanks..

ardee

# Zolpidem. @ Wednesday, July 23, 2008 1:07 PM

Zolpidem abuse.

Zolpidem and sleepwalking.

# Propecia results. @ Thursday, August 07, 2008 5:29 PM

Propecia.

Natural herb reverse impotence from propecia.

Leave a Comment

(required) 
required 
(required) 
Enter the code you see below