Client Side Validation for a Checkbox in DataGrid

Introduction

This article provides the code to add a checkbox in a DataGrid, and thereby allows you to check or uncheck all the checkboxes in the DataGrid using JavaScript.

Background

I really had a very hard day Googling for code to check/uncheck all the checkboxes in a DataGrid using JavaScript. I had an option to do it on the server side, but to check all the records in a DataGrid on the server-side, I will have to reload the web page from the server; sounds crazy, doesn’t it? So finally, I sat down and wrote the following code and solved my problem. I post this because I found that many of you are also surfing for the same cause.

Using the code

Consider the above image. I added a checkbox to the header template, and then each row of the DataGrid will the checkbox. Checking or un-checking any of the checkboxes in the DataGrid will show the same functionality through out the DataGrid.

The HTML code for adding the checkbox looks like this:

//
// this html tag adds checkbox to header
//
<asp:TemplateColumn> 
 <HeaderTemplate> 
  <Input id="checkAll" type=checkbox 
    onclick="DGSelectOrUnselectAll('DataGrid1',this,'chkDel')" > 
 </HeaderTemplate>
 //
 // this html tag adds checkbox to datagrid
 <ItemTemplate> 
  <asp:CheckBox ID="chkDel" Runat="server"></asp:CheckBox> 
 </ItemTemplate> 
</asp:TemplateColumn>

Now, let's pass on to JavaScript for the check/uncheck functionality:

//-------------------------------------------------------
//this is to select or unselect the datagrid check boxes 

function DGSelectOrUnselectAll(grdid,obj,objlist){ 
//this function decides whether to check or uncheck all
    if(obj.checked) 
        DGSelectAll(grdid,objlist) 
    else 
        DGUnselectAll(grdid,objlist) 
} 
//---------- 
 
function DGSelectAll(grdid,objid){ 
//.this function is to check all the items
    var chkbox; 
    var i=2; 

    chkbox=document.getElementById(grdid + 
               '__ctl' + i + '_' + objid); 

    while(chkbox!=null){ 
        chkbox.checked=true; 
        i=i+1; 
        chkbox=document.getElementById(grdid + 
                   '__ctl' + i + '_' + objid); 
    } 

}//-------------- 

function DGUnselectAll(grdid,objid){ 
//.this function is to uncheckcheck all the items
    var chkbox; 
    var i=2; 

    chkbox=document.getElementById(grdid + 
               '__ctl' + i + '_' + objid); 

    while(chkbox!=null){ 
        chkbox.checked=false; 
        i=i+1; 
        chkbox=document.getElementById(grdid + 
                   '__ctl' + i + '_' + objid); 
    } 
}
//-------------------------------------------------------

That’s all, you are done. Now, you can check/uncheck all the checkboxes in the DataGrid using JavaScript.

History

This is my first post, hope this will be of interest to you.