Goal: Assuming you have already added a checkbox column to
the DataGrid web control using TemplateColumn. Now you want to add a
checkbox in the header of this column to select/clear all the
checkboxes in the column.
Solution: besides adding the select all check box to the
DataGrid, you will only need 3 JavaScript functions and 2 lines of
code to accomplish this.
1. Add a CheckBox to the HeaderTemplate of the checkbox column.
Set the name to:
the name of ItemTemplate + "SelectAll";
2. In the code-behind, "Page_Load" function add this:
string scriptString = "<script language='javascript'>\n" +
"<!-- Hide script from old browsers.\n" +
"bindSelectAllCheckBox(" +
"'CheckBoxCol'" + //unfortunately, this is a hard-coded name of checkbox
",'" +
[YourDataGrid].ClientID + //replace with the name of your datagrid
"')" + "\n"+
"// End of hiding here. -->\n" +
"</script>";
RegisterStartupScript("CBSelectAll", scriptString);
3. The Javascript:
var gSelectAllTable; //global class to save information
function SelectAllCB_Click()
{
var bChecked = gSelectAllTable.SelectAllCB.checked;
var numCBs = gSelectAllTable.CheckBoxes.length
for(var i = 0; i < numCBs; i++)
{
gSelectAllTable.CheckBoxes[i].checked = bChecked;
}
gSelectAllTable.NumChecked = (bChecked) ? numCBs : 0;
}
function CheckBox_Click()
{
gSelectAllTable.NumChecked += this.checked ? 1 : -1;
gSelectAllTable.SelectAllCB.checked =
(gSelectAllTable.NumChecked == gSelectAllTable.CheckBoxes.length) ? true : false;
}
function bindSelectAllCheckBox(cbASPID, tableID)
//Assumptions:
// 1. only one such select check box is implemented on a page
// 2. the SelectAll check box's ID is composed "SelectAll"
//Parameters:
// cbASPID: ID (not ClientID) of the checkboxes
// tableID: ClientID of the table whose checkboxes will be selected
{
//regular expression for checkbox
var re = new RegExp(':' + cbASPID + '$');
//regex for select all
var reall = new RegExp(':' + cbASPID + 'SelectAll$');
gSelectAllTable = document.getElementById(tableID);
gSelectAllTable.CheckBoxes = new Array();
gSelectAllTable.NumChecked = 0;
var cbCount = 0;
if(gSelectAllTable)
{
var fm = document.forms[0];
for(var i = 0; i < fm.elements.length; i++)
{
elm = fm.elements[i];
if(elm.type == 'checkbox')
{
if(reall.test(elm.name))
{ //select all check box
gSelectAllTable.SelectAllCB = elm;
elm.onclick = SelectAllCB_Click;
}
else if(re.test(elm.name))
{ //other check boxes
gSelectAllTable.CheckBoxes[cbCount] = elm;
cbCount++;
if(elm.checked)
{
gSelectAllTable.NumChecked++;
}
elm.onclick = CheckBox_Click;
}
}
}
}
}
What can be improved:
The ID of CheckBox is hardcoded.We cannot catch any typo in compile time.
This implementation cannot handle 2 or more such DataGrid on one page;
This implementation cannot handle CheckBox in "EditItemTemplate";
This implementation is inspired by:
DHTML Utopia: Modern Web Design Using JavaScript & DOM:
http://www.sitepoint.com/books/dhtml1/?SID=878198150071901bb10971055cb72d00Yahoo Email: http://mail.yahoo.com
