We have talked about selecting checkboxes inside the GridView control numerous number of times in the past. One of the readers pointed out that the default solution may only work if there is a single GridView on the page. If more than one GridView was added with checkboxes then the checkboxes of the other GridView also got selected when the main GridView "SelectAll" checkbox was checked. In this article we are going to solve this problem.

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:



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 .



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:



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.



The isCheckBox is another small function which simply indicates if an element is a checkbox or not.



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.



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.