Introduction

In one of my articles I discussed how to select checkboxes inside the GridView control. You can view the article here. This is an extension to that article in which, I will discuss some additional features. These features include using regular expression to limit the checkbox selection on a particular GridView and de-selecting the parent checkbox when all child checkboxes are un-checked.

Creating the GridView Control

The first task is to create a simple GridView control using template fields. I strongly recommend using template fields instead of bound fields for the following reasons:

Template fields allow embedding the ASP.NET controls.

You don’t have to reorganize the appearance of the GridView after a new template field is added. This is because template field do not depend on the index number like the bound fields.

Template fields allow access to ASP.NET controls even if the fields are not visible.

The Check function is responsible for selecting and deselecting all the child checkboxes. First, I retrieve all the objects whose tag name is “INPUT”. Inside the loop I check that if the parent checkbox is checked or not. If it is checked then I find the correct checkbox element and mark it checked. The functions IsCheckBox and IsMatch are responsible for finding the child checkboxes.

Before I explain the working of the two methods let’s see your little regular expression which separates the GridView checkboxes from other checkboxes on the page and even from the checkboxes inside other GridView controls.

Here is out little regular expression:

var pattern = '^GridView1';

The expression says that select every string whose name starts with “GridView1”. You might be thinking that how does this expression help to find the correct child checkboxes. In order to understand it let’s take a look at the HTML code that is generated when the GridView is rendered on the page.

You can see that the checkboxes inside the GridView control are assigned unique ids. The first part contains the id of the GridView which, in this case is “GridView1”. The middle part contains the row number and the final part contains the original id of the checkbox as set by the developer.

Now, let’s take a look at the IsMatch function which, takes the id of the control as a parameter and returns true if matched else returns false.

The IsMatch function is not enough. Huh! The reason is that we are not checking for the type of the element. The element which has the “INPUT” tag can be a checkbox, radio, textbox, button etc. For that reason there is another small method called IsCheckBox which simply checks for type of the element.

All the code that we have discussed will allow you to check and uncheck all the checkboxes based on the parent checkbox. The code also checks for the particular GridView so, that other checkboxes on the page are not affected.

Attaching Listeners to the Child CheckBoxes

Listeners allow you to catch events generated by the controls and take action on those events by firing a function. Scott Andrew wrote an excellent piece of code that attaches the listeners to the object. The code is browser compatible (I have tested on Mozilla and IE).

In the code above I am registering the ‘click’ event of the checkboxes with a listener. Any time the click event is fired from the child checkboxes the CheckChild function is fired. The AttachListener is fired on the following event:

<bodyonload="AttachListener()">

The CheckChild Function

The CheckChild function keeps track of how many child checkboxes are checked. When all the child checkboxes are checked then the parent checkbox should also be checked.

The total of checked checkboxes is stored in the global variable called “counter”. Once, the counter reaches the total child checkboxes then the parent checkbox is checked. With the global variable counter in-place there is also a small change in the Check function. Take a look at the final Check function.

Comments and Discussions

I've just found out I didn't declare the OnLoad="AttachListener()" to my object. My question is: Since I have no Body tag in my User Control object and don't want to mess with my Master page, where in my User Object is the best place to call this function? Thanks in advance!

"Blessed is the man who finds wisdom, the man who gains understanding."
Proverbs 3:13