Client Side Validation for a Checkbox in DataGrid

View our advertisers	Advertise with us

All Topics, .NET, C#, ASP.NET >> ASP.NET >> ASP.NET Controls

Client Side Validation for a Checkbox in DataGrid
By jebarson

This article shows how to use a checkbox in a DataGrid using JavaScript.

	C#, JScript Windows, .NET ASP.NET, Win32, VS, ADO.NET Dev
	Posted 8 Mar 2006 16:01
	Articles by this author
	969 views

Search:


	Ultimate Combo MFC tools $399

	Send to a friend

	My Profile

	My Settings
	My Articles
	My Bookmarks
	Sign out

Ultimate Toolbox 9.0 - MFC 7.0 Compliant, with Office 2003 like and Office XP like classes and hundreds more, all with 100% MFC source code

Broken Article?

Bookmark

Discuss

1 vote has for this article.

Popularity: 0. Rating: 5 out of 5.

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.

jebarson

Click here to view jebarson's online profile.

Other popular articles:

Dealing with images in content management systems, Part 1
Browser-based resizing and optimisation of images.
SqlWhereBuilder ASP.NET Server Control
A user interface web control for building conditions suitable for use in a SQL statement.
ASCII Art Generator
ASCII Art generator in ASP.NET.
ASCII art with C#
About writing an image to ASCII converter.