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 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:
function DGSelectOrUnselectAll(grdid,obj,objlist){
if(obj.checked)
DGSelectAll(grdid,objlist)
else
DGUnselectAll(grdid,objlist)
}
function DGSelectAll(grdid,objid){
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){
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.