Recommended Reading:
1) Selecting CheckBoxes Inside the GridView Control
2) GridView Selection with a Twist
Problem:
The problem is simple! You created a GridView control and set up the first column to hold checkboxes. Inside the HeaderTemplate of that column you added the master checkbox which when checked marked all the child checkboxes checked. The solution worked perfectly as long as this was the only GridView with checkboxes on the page. If you added a second GridView with checkboxes then those checkboxes also becomes selected by the first GridView.
Solution:
The solution is also very simple! Simply send in the ID of the GridView on which the checkAll operation is performed. Let's start from the beginning and populate our GridViews.
Populating the GridView Control:
We will be using the Northwind database in this example. We will populate two GridViews gvCategories and gvProducts. Check out the code below:
private void BindData()
{
using(NorthwindDataContext dc = new NorthwindDataContext())
{
gvCategories.DataSource = from c in dc.Categories
select c;
gvCategories.DataBind();
gvProducts.DataSource = (from p in dc.Products
select p).Take(10);
gvProducts.DataBind();
}
}
The above code simply populates the gvCategories with data from the Categories table and gvProducts with the data from the Products table.
Attaching the toggleCheckBoxes function to CheckBox:
The JavaScript function toggleCheckBoxes is responsible for checking all and unchecking all child checkboxes. First let's see the ASPX code for the categories GridView .
<asp:GridView ID="gvCategories" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" onclick="toggleCheckBoxes('<%= gvCategories.ClientID %>',this.checked)" id="chkAll" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Everything seems pretty normal except that in the HeaderTemplate of the GridView we are firing the toggleCheckBoxes function on the click of the CheckBox. The toggleCheckBoxes function sends in the ID of the GridView control and the master checkbox checked status. The ID of the GridView ensures that only this GridView is available in the check and uncheck operation.
Here is the toggleCheckBoxes function:
// toggle state of the checkbox between selected and not selected!
function toggleCheckBoxes(gvId, isChecked) {
var checkboxes = getCheckBoxesFrom(document.getElementById(gvId));
for (i = 0; i <= checkboxes.length - 1; i++) {
checkboxes[i].checked = isChecked;
}
}
We have refactored most of the code and created many small methods for clarity. The getCheckBoxesFrom method takes in the element and returns an Array of checkbox elements.
// get all the checkboxes from the container control
function getCheckBoxesFrom(gv) {
var checkboxesArray = new Array();
var inputElements = gv.getElementsByTagName("input");
if (inputElements.length == 0) null;
for (i = 0; i <= inputElements.length -1; i++) {
if (isCheckBox(inputElements[i])) {
checkboxesArray.push(inputElements[i]);
}
}
return checkboxesArray;
}
The isCheckBox is another small function which simply indicates if an element is a checkbox or not.
// checks if the elements is a checkbox or not
function isCheckBox(element)
{
return element.type == "checkbox";
}
And this is pretty much it! Now, if you want to extend this example and make checkAll and uncheckAll functionality available to the gvProducts GridView you will only do the following change.
<input type="checkbox" onclick="toggleCheckBoxes('<%= gvProducts.ClientID %>',this.checked)" id="chkAll" />
Conclusion:
In this article we learned how to restrict checking and unchecking the checkboxes when two GridViews are on the same page. In the future articles we will demonstrate how to handle a scenario where two columns of the same GridView contains checkboxes.