Click here to Skip to main content
Licence CPOL
First Posted 11 Apr 2005
Views 178,323
Bookmarked 83 times

DataGrid CheckBox Select Multiple Rows Column

By | 11 Apr 2005 | Article
Allow users to select multiple records from your DataGrid. "CheckAll / UnCheck All" functionality on client side.
Prize winner in Competition "ASP.NET Mar 2005"

Sample Image - dgcheckboxcolumn.jpg

Introduction

Multiple row selection in a web DataGrid is a usual requirement and the common and most elegant way to implement that is definitely using CheckBox(s). A checkbox column must of course be accompanied with a CheckAll / UnCheckAll functionality.

Outline

After searching this site, I was surprised not to find anything that suited this requirement completely. I did however find what I was looking for in different segments (acknowledged below). I decided to compile all what I needed in a reusable class / library (for reference). Following is the functionality provided:

  • Checkbox column for DataGrid.
  • CheckAll, UnCheckAll checkbox in the header without PostBack to the server.
  • Static method to register client side JavaScripts.

How to use

Download the supplied .cs file and add to your project. (If your project is in another language, create a new library project and add the supplied .cs to that project, compile the library, and attach the resulting .dll as a reference to your project).

Register a TagPrefix in your aspx page for the new column as follows:

<%@ Register TagPrefix="GridSelectCheckBox" Namespace="solCommon.Web.UI.DataGrid" 
                                                   Assembly="ProjectAssembly" %>

This is, of course, a snippet from my code, you can register any TagPrefix in your page. Should you change the namespace in the supplied .cs file, replace the Namespace attribute accordingly. The Assembly attribute must be your project/library assembly.

The next logical step is to include the column in your DataGrid. You may include the column at any location. Following adds the column at location 0, i.e. the first column:

<asp:datagrid ...>
...
    <Columns>
    <GridSelectCheckBox:DGCheckBoxColumn />
    ...
    </Columns>
...
</asp:datagrid>

Lastly, we use the exposed static method of DGCheckBoxColumn class to register client side JavaScripts for the CheckAll/UncheckAll feature. In the Page_Load method of your aspx page, add the following line:

DGCheckBoxColumn.RegisterClientCheckEvents(this,"Form1");

You should replace "Form1" with the name of the form in which your DataGrid resides.

Your DataGrid is now ready.

You can get the selected indexes or the selected DataKeys by calling one of the exposed properties, i.e. DGCheckBoxColumn.SelectedIndexes and DGCheckBoxColumn.SelectedDataKeys. Let's say, in your button click event handler you try the following:

// since we know that our column in the grid is the first one ...
DGCheckBoxColumn dgchkbxCol = (DGCheckBoxColumn)myGrid.Columns[0];

// iterate through the selection
foreach (int i in dgchkbxCol.SelectedIndexes)
{
   // do something ...
}

Acknowledgements

I must thank the following two articles as I have used much of their contents:

Usage and Copyrights

You may freely use/modify the supplied file for your own usage, as long as you retain the acknowledgements presented above. Please don't forget to rate this article. Thanks and good luck.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Noman Nadeem

Web Developer

Saudi Arabia Saudi Arabia

Member



Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
Questionhow to select through checkboxes? PinmemberMember 466308720:57 27 Apr '08  
QuestionHow Select a row in Data Grid Pinmemberpatelmurtuza2:14 16 Mar '07  
Questionhow can i tell what my project/library assembly is Pinmemberinsignificant6:30 15 Mar '07  
GeneralIt is not a good idea PinmemberMember #2738621:56 31 Jan '07  
QuestionSpecified cast is not valid Pinmemberkrimsondon9:49 19 Dec '06  
QuestionHow to fetch info abt checked rows Pinmembermontysehra23:35 19 Nov '06  
QuestionCheck All button Does not work PinmemberStephen Noronha8:55 20 Oct '06  
AnswerRe: Check All button Does not work Pinmemberphantomvie23:21 29 Nov '07  
GeneralRe: Check All button Does not work PinmemberMember 27961981:54 25 Jan '10  
Generalmy problem:my datasource is a arrayList [modified] Pinmemberrengdongzwf20:28 11 Jun '06  
GeneralPaging Problem Pinmembermshariq18:07 10 Jun '06  
GeneralTo check the checkbox PinmemberOlog-hai8:43 17 May '06  
GeneralRe: To check the checkbox PinmemberTed Husted8:50 30 May '06  
GeneralRe: To check the checkbox PinmemberDonald Bittenbender11:23 17 Dec '08  
Generalcollecting information from a datagrid PinmemberJustmeNick7:15 30 Apr '06  
GeneralCheck All isn't working PinmemberBSegE5:54 12 Mar '06  
Hello Everyone,
 
As I understand it, when I implement this control I should see a checkbox column in my datagrid and when I check or uncheck the header checkbox, all of the individual checkboxes in the column should automatically be set accordingly. And, this is accomplished on the client using JavaScript.
 
My web application is being developed using VB.Net in an ASP.Net 1.1 environment.
 
I have added a new C# library project to my solution, successfully constructed a DgCheckboxColumn library dll and referenced it in my project.
 
I registered the control by adding the following line to the top of my HTML page:
 
<%@ Register TagPrefix="GridSelectCheckBox" Namespace="solCommon.Web.UI.DataGrid" Assembly="DgCheckboxColumn" %>
 
And I added the control to my datagrid as the 1st column using the provided example.
 
Next I added the following line immediately after calling the databiind methid in my datagrid:
 
DGCheckBoxColumn.RegisterClientCheckEvents(Me, "WebForm1")
 
The good news is that everything builds correctly and when executed my page displays the new checkbox column correctly.
 
However when I check the box in the column header, nothing else changes and I receive “An error has occurred in the script on this page” error further indicating “‘length’ is a Null or not an object”.
 
I went back and stepped through the execution. When the dgcheckboxcolumn code executes, it creates the following two scripts:
 
<script language=JavaScript> function CheckAll( checkAllBox )
{
var frm = document.[frmID];
var ChkState=checkAllBox.checked;
for(i=0;i< frm.length;i++)
{
e=frm.elements[i];
if(e.type=='checkbox' && e.name.indexOf('checkboxCol') != -1)
e.checked= ChkState ;
}
}
</script>
 

<script language=JavaScript>function CheckChanged()
{
var frm = document.[frmID];
var boolAllChecked;
boolAllChecked=true;
for(i=0;i< frm.length;i++)
{ e=frm.elements[i];
if ( e.type=='checkbox' && e.name.indexOf('checkboxCol') != -1 )
if(e.checked== false)
{
boolAllChecked=false;
break;
}
}
for(i=0;i< frm.length;i++)
{ e=frm.elements[i];
if ( e.type=='checkbox' && e.name.indexOf('checkboxHead') != -1 )
{
if( boolAllChecked==false)
e.checked= false ;
else
e.checked= true;
break;
}
}
}
</script>

 
I’m not Java literate, so I really can’t see anything obviously wrong here.
 
After building the scripts dgcheckboxcolumn moves on and ultimately fails in the registerattributes subroutine when executing the line:
 
CheckBox chk = (CheckBox)wc;
 
Ok, what did I do wrong? Sigh | :sigh:
 

NewsProjectAssembly Cannot Load Pinmembertorome16:51 10 Mar '06  
GeneralAdding data PinmemberMiniDawg5:45 25 Jan '06  
GeneraldgchkbxCol.SelectedIndexes return empty Pinmemberlayoro16:15 5 Jan '06  
GeneralRe: dgchkbxCol.SelectedIndexes return empty PinmemberMiniDawg7:14 26 Jan '06  
JokeRe: dgchkbxCol.SelectedIndexes return empty Pinmemberlayoro14:25 26 Jan '06  
JokeRe: dgchkbxCol.SelectedIndexes return empty PinmemberMiniDawg2:50 27 Jan '06  
GeneralPage Errors...About Length Pinmemberekasal20:48 1 Dec '05  
GeneralClick the header checkbox that is not select all checkbox PinmemberVincent Tan E H0:19 24 Aug '05  
GeneralRe: Click the header checkbox that is not select all checkbox Pinmembererikwi1:08 26 Nov '05  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web04 | 2.5.120529.1 | Last Updated 11 Apr 2005
Article Copyright 2005 by Noman Nadeem
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid