Checking All Checkboxes in a GridView Using jQueryBy Scott Mitchell
In May 2006 I wrote two articles that showed how to add a column of checkboxes to a GridView and offer the ability for users to check (or uncheck) all checkboxes in the column with a single click of the mouse. The first article, Checking All CheckBoxes in a GridView, showed how to add "Check All" and "Uncheck All" buttons to the page above the GridView that, when clicked, checked or unchecked all of the checkboxes. The second article, Checking All CheckBoxes in a GridView Using Client-Side Script and a Check All CheckBox, detailed how to add a checkbox to the checkbox column in the grid's header row that would check or uncheck all checkboxes in the column. Both articles showed how to implement such functionality on the client-side, thereby removing the need for a postback.
programming over the past few years. For instance, the script presented in the previous articles uses server-side code in the GridView's
handler to assign a client-side
onclick event handler to each checkbox. While this works, it violates the tenets of unobtrusive
Creating a GridView with a CheckBox in Each Row
Before we examine how to provide functionality to check or uncheck each checkbox in a GridView, let's first concentrate on building a GridView control that includes a CheckBox for each row. A column of CheckBoxes can be added to the GridView using one of two approaches:
- Using the CheckBoxField - the CheckBoxField is a built-in GridView field type that renders a column of CheckBoxes with each CheckBox's
Checkedproperty assigned to some data field in the grid's underlying data source.
- Using a TemplateField - we can add a TemplateField and then, in the
ItemTemplate, add a CheckBox Web control. If the CheckBox Web control's
Checkedproperty should be based on some underlying data field value, the
Checkedproperty can be set either declaratively (such as,
<asp:CheckBox runat="server" ... Checked='<%# Eval("ColumnName") %>' ... />) or programmatically (such as in the
Checkedproperty is not dependent on some underlying data field, then you'll need to use the TemplateField option. This article, and the demo available for download at the end of the article, uses the TemplateField option.
Imagine that we are building a web-based file management tool that lists the files in the current directory, allowing the user to select one or more files to delete. To select a file, we want to include a checkbox in each row; beneath the GridView there's a "Delete All Checked Files" Button that, when clicked, will delete the selected files. (The demo available for download at the end of this article doesn't actually delete the files; rather, it just prints a message indicating what files it would have deleted, had that functionality been implemented.)
The following GridView accomplishes the needed functionality. Note that it uses a TemplateField to house a CheckBox control for each GridView row. Also note that the
DataKeyNames property is assigned
FullName. Setting the
DataKeyNames property prompts the GridView to record the
value of each file's
FullName property in its
DataKeys collection; this information is used when deleting the selected files. (Some of the
GridView's formatting-related settings have been removed for brevity.)
Page_Load event handler the files in the current directory are retrieved and bound to the GridView.
(For more information on accessing and displaying the files in a directory, see Displaying
Files and Folders in a GridView.)
Additionally, we need a "Delete All Checked Files" Button Web control that, when clicked, determines what CheckBox controls in the grid have been selected and
then deletes those files. The demo includes a Button Web control named
DeleteButton that carries out this purpose. In its
handler, the rows of the GridView are enumerated using a
foreach loop over the GridView's
Rows collection. For each
chkSelected CheckBox is referenced and its
Checked property is examined. If checked, the file corresponding to that row is deleted.
Note that the file path for each GridView row is accessible via the GridView's
ow that we have the groundwork laid out, we're ready to examine how to implement functionality to check and uncheck all CheckBoxes in the GridView using client-side script. Let's start with a look at adding said functionality using "Check All" and "Uncheck All" buttons. Following that, we'll see how to implement the same functionality using a checkbox in the grid's header row.
Using "Check All" and "Uncheck All" Buttons
With the existing GridView in place, a user can check one or more checkboxes, click the "Delete All Checked Files" button, and have those selected files deleted. But what if there are a lot of files in the directory and they want to delete them all? As it stands now, they must check each checkbox, one at a time, until all are selected. We can improve the user experience by adding a mechanism for checking or unchecking all checkboxes with one click of the mouse.
One way to let users check (or uncheck) all checkboxes is to add two buttons to the page titled "Check All" and "Uncheck All." The following markup adds two such buttons to the page. (In the screen shot below and in the demo available for download at the end of this article, these two buttons are positioned above the GridView, but you could place them anywhere on the page.)
The above script starts by creating a variable named
checkBoxSelector that defines the selector syntax for selecting all checkboxes in the GridView.
Let's look at each part of the selector:
gvFileList.ClientIDis server-side code that returns the client-side
idattribute for the HTML
<table>rendered by the
gvFileListGridView. While the GridView's server-side
gvFileList, the rendered
idattribute sent down to the client may be modified if the GridView is within any naming containers. For my demo, the GridView's rendered client-side
ContentPlaceHolder1_gvFileList, which is the value returned by
gvFileList.ClientID. Consequently, the
#<%=gvFileList.ClientID%>in the web page gets rendered to the client as
#ContentPlaceHolder1_gvFileList, which tells jQuery to start its search by looking for an HTML element with the
ContentPlaceHolder1_gvFileList. (For more information on the
ClientIDproperty and related tips, refer to Take Control Of Web Control ClientID Values in ASP.NET 4.)
input[id*="chkSelected"]- returns all
idattribute contains the text
chkSelected. (Note that each checkbox in the grid has an
idof the form
ContentPlaceHolder1_gvFileList_chkSelected_rowNumber.) Because this appears after the
#<%=gvFileList.ClientID%>selector, it is limited in its search scope to within the gvFileList GridView. That is, if there is another
<input>element on the page with a matching
idit will not be returned.
:checkbox- this limits the set of elements returned by the previous selector to those that are also checkboxes.
$(document).readyevent handler we define
clickevent handlers for the two buttons. Both buttons have similar event handlers. For the
btnCheckAllbutton we set the
chkSelectedcheckboxes in the grid; the
btnUncheckAllevent handler sets the
false. The event handlers here are defined using jQuery's
livefunction (instead of
click) to support the case where the GridView may be in an UpdatePanel. (See Rebinding Client-Side Events After a Partial Page Postback for more details on this concept.)
With the above script in place, clicking the "Check All" button checks all checkboxes, and clicking "Uncheck All" unchecks all checkboxes. But notice that even after all checkboxes are checked, the "Check All" button remains clickable; ditto the "Uncheck All" checkbox when no checkboxes are checked. Ideally, these buttons would be disabled in these scenarios. To accomplish this we need to do three things:
- Create a function that determines if all the checkboxes are checked or if no checkboxes are checked. If all checkboxes are checked then the "Check All" button should be disabled. If no checkboxes are checked then "Uncheck All" should be disabled.
- Whenever a checkbox is checked or unchecked or whenever the "Check All" or "Uncheck All" buttons are clicked we need to call the function created in Step 1.
- When the page loads for the first time we need to call the function created in Step 1.
ToggleCheckUncheckAllOptionAsNeeded, performs the task outlined in Step 1. It starts by getting a reference to the set of the
chkSelectedcheckboxes in the grid as well as those that are checked. It then sets the
disabledattribute based of the
trueif the number of total checkboxes equals the number of checked checkboxes,
falseotherwise. Similarly, the
disabledattribute is set to
trueif the number of checked checkboxes equals 0, otherwise it's set to
$(document).ready event handler the
chkSelected checkboxes have their
click event wired up to the
function. Likewise, the
click event handlers for the "Check All" and "Uncheck All" buttons have been updated to call
ToggleCheckUncheckAllOptionAsNeeded is called when the page first loads, as well.
With this new script in place, the buttons are disabled when they would otherwise be redundant. The screen shot below shows an example. Here, no checkboxes are checked, so the "Uncheck All" button is disabled. Checking a single checkbox (or clicking the "Check All" button) causes the "Uncheck All" button to become enabled again.
Using a Checkbox in the GridView Header Row
In place of "Check All" and "Uncheck All" buttons we could opt to add a checkbox to the GridView's header row that serves the same purpose. To add such a checkbox we need to add a
HeaderTemplatewith its own CheckBox control to the TemplateField that contains the
With this addition the GridView now renders a checkbox in the header row, as the following screen shot shows.
Much like with the "Check All" and "Uncheck All" button demo, we need to have the header row checkbox check (or uncheck) all
chkSelected checkboxes when
clicked. And if all checkboxes are checked by the user, one at a time, we need to also check the header row checkbox. If there is at least one unchecked checkbox then
the header row checkbox should be unchecked.
This can be accomplished in the same way as the button demo. In the
$(document).ready event handler we need to create an event handler for the header row
click event that checks (or unchecks) all
chkSelected checkboxes. We also need a
function that checks (or unchecks) the header row checkbox based on whether all
chkSelected checkboxes are checked, and
needs to be called whenever a
chkSelected checkbox is clicked, whenever the header row checkbox is clicked, and when the page first loads.
In the above script there are two selector variables,
checkBoxSelector, which are the jQuery selectors to retrieve the
header row checkbox and the set of
chkSelected checkboxes in the
gvFileList grid. In the
the header row checkbox is checked if all checkboxes in the grid are checked, otherwise it's unchecked.