Selecting All checkBox in GridView Control Asp.net

Many of the user who use the hotmail, yahoo or gmail they may observe for each email they have provide the checkbox so that you can select the email and then you can perform you action either delete the email, move the email to other folder etc. They also provide the option of selecting the all emails and perform one action to the all selected email records.
Today in this post i will show you how you can select all the checkbox in the grid like yahoo, hotmail and the gmail accounts. For this post i have just one grid view control which consist of two columns one for the checkbox and the second for the subject. I have added checkbox in the header of the grid so that when user click on that checkbox all the checkboxs in the grid view are checked and when that checkbox is unchecked then all the checkboxs in the grid view control are unchecked.

Let us start with our example code. I have bind the grid in the Page_Load event.By setting the DataSource property of the grid view control and after setting the grid view dataSource property i have called the DataBind() method of the grid view control. Here is the code which is used to add the click attribute of the checkbox which is added in the header to select all the checkbox and then depending on the value of the this checkbox all the checkboxs are unchecked.

if (e.Row.RowType == DataControlRowType.Header)
{
CheckBox chkSelectAll = (CheckBox)e.Row.FindControl("chkSelectAll");
if (chkSelectAll != null)
chkSelectAll.Attributes.Add("onclick", "SelectAll(this);");
}

In the code above i have place if condition to check the header row of the grid view control. Then i have find the chkSelectAll check box control which is placed in the header row of the grid view control, the return control is converted to the checkbox and placed in the chkSelectAll checkbox control. In the next statement i have place the if condition to check the if the control is found or not. if found than i have added the onclick attribute to the chkSelectAll checkbox and place JavaScript function SelectAll, The SelectAll JavaScript function will take the current control as parameter so i pass this object to the function. The above code is place in the RowDataBound event of the grid view control.

Here is the SelectAll function code in the JavaScript, which is placed in the JavaScript tag.

function SelectAll(chkSelectAll)
{
// get datagrid by passed the clientID of the grid
var myGridView = document.getElementById('<%= grdvOrders.ClientID %>');

//Get all the input control in the grid.
var gridViewInputControls = myGridView.getElementsByTagName("input");

for(var intCounter=0;intCounter<=gridViewInputControls.lenght ; ) 
{
if(gridViewInputControls[intCounter].type == 'checkbox')
{
     if(chkSelectAll.checked==true)
        gridViewInputControls[intCounter].checked=true;
     else
      gridViewInputControls[intCounter].checked=false;
}
intCounter= intCounter+1;
}
}

In the above code i have get the grid view control by passing the client id of the grid view control which in this, as i have set the id of the control grdvOrders so i placed the grdvOrders.ClientID in the getElementById function call. in the next statement i have get all the input control in the grid by using the getElementByTagName function and passing the input as parameter and place the return control in the gridViewInputControls variable. And then i have loop through the gridViewInputControls array and in the for loop i have place the if condition to check the type of the control as i need to set the checked property of the checkbox , so i have place the type of control to checkbox. In the if condition i have check the checked property of the passed checkbox which is the placed in the header of the grid view control and user can use that checkbox to checked/unchecked all the checkbox in that column. If the selectAll checkbox is check then all the checkboxs are marked as check and if the selectAll checkBox is unchecked then all the checkboxs are marked as unchecked.

Note: if you have more then one checkbox in you grid like i have only one checkbox foreach row, but if there is situation where you have more then one checkboxs then you have to check name of the checkbox as well in the if condition where i have check the type of the input control.Here is change code if you have more then one checkbox for each row.

if((gridViewInputControls[intCounter].type == 'checkbox') &&
 (gridViewInputControls[intCounter].id.indexOf("chkSelect") !=-1))
{
     if(chkSelectAll.checked==true)
        gridViewInputControls[intCounter].checked=true;
      else
      gridViewInputControls[intCounter].checked=false;
}

In the above code i have place extra condition to true in the if condition in order to perform check/unchecked the check box, in the above if condition chkSelect is the name of the checkbox which is placed in the grid view control and which need to be checked/unchecked.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!