471,316 Members | 1,002 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,316 software developers and data experts.

How to implement a "check all" checkbox in a datagrid

Hi all..

I have a DataGrid with checkboxes. In the header I have a "check all"
checkbox.

I'm wondering if there is an easy way to check all checkboxes using that
checkbox. I could do it using JavaScript code, but the main problem I have
is that checkboxes ids aren't kept when the datagrid is rendered, for
example, if the checkboxes have the name chkNumid, when the datagrid is
rendered, the checkboxes become dgDataGrid_ctl02_chkNumId,
dgDataGrid_ctl03_chkNumId, and so on.

Of course, this must be done at client side, without posting the page back.

Thanks in advance
Jaime
Nov 19 '05 #1
7 2760
Yeah, it's certainly doable, and you've already identified the one
thing that makes it a bit tricky. Fortunately, those ids will remain
consistent between page loads. So once you teach your script to deal
with them, you won't have to worry about it breaking as you add
controls to your page.

I'd do something like

var base = 'dgDataGrid_ctl';
var boxID = '_chkNumId';
var index = 0;

while (document.getElementById(base + index + boxID))
{
document.getElementById(base + index + boxID).checked = true;
}
Clean, simple, and effective, if a bit hacky. But that's javascript
for you.

Good Luck!

Jason Kester
Expat Software Consulting Services
http://www.expatsoftware.com/

---
Get your own Travel Blog, with itinerary maps and photos!
http://www.blogabond.com/

Nov 19 '05 #2
To deal with those IDs you can create client side array in c# which will
contain .ClientID of those checkboxes.
I think it's safer.

"Jason Kester" <ja*********@gmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
Yeah, it's certainly doable, and you've already identified the one
thing that makes it a bit tricky. Fortunately, those ids will remain
consistent between page loads. So once you teach your script to deal
with them, you won't have to worry about it breaking as you add
controls to your page.

I'd do something like

var base = 'dgDataGrid_ctl';
var boxID = '_chkNumId';
var index = 0;

while (document.getElementById(base + index + boxID))
{
document.getElementById(base + index + boxID).checked = true;
}
Clean, simple, and effective, if a bit hacky. But that's javascript
for you.

Good Luck!

Jason Kester
Expat Software Consulting Services
http://www.expatsoftware.com/

---
Get your own Travel Blog, with itinerary maps and photos!
http://www.blogabond.com/

Nov 19 '05 #3
Do you mean to create the script in code-behind and register the script block
containing the function?

I realized that first index of the checkboxes in the data grid is 2 so I
need it first in order to program the while suggested before.

Jaime

"Sebastian Wojciechowski" wrote:
To deal with those IDs you can create client side array in c# which will
contain .ClientID of those checkboxes.
I think it's safer.

"Jason Kester" <ja*********@gmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
Yeah, it's certainly doable, and you've already identified the one
thing that makes it a bit tricky. Fortunately, those ids will remain
consistent between page loads. So once you teach your script to deal
with them, you won't have to worry about it breaking as you add
controls to your page.

I'd do something like

var base = 'dgDataGrid_ctl';
var boxID = '_chkNumId';
var index = 0;

while (document.getElementById(base + index + boxID))
{
document.getElementById(base + index + boxID).checked = true;
}
Clean, simple, and effective, if a bit hacky. But that's javascript
for you.

Good Luck!

Jason Kester
Expat Software Consulting Services
http://www.expatsoftware.com/

---
Get your own Travel Blog, with itinerary maps and photos!
http://www.blogabond.com/


Nov 19 '05 #4
But "index" must be padded with "0" to the left and how many zeros depend on
the number of rows the datagrid contains after populated with data, although
the while solution is the best (with respect to generating an array with all
checkboxes) I will need to get what numbers of zeros to add to the left
first. Do you have another better approach?

Thanks
Jaime

"Jason Kester" wrote:
Yeah, it's certainly doable, and you've already identified the one
thing that makes it a bit tricky. Fortunately, those ids will remain
consistent between page loads. So once you teach your script to deal
with them, you won't have to worry about it breaking as you add
controls to your page.

I'd do something like

var base = 'dgDataGrid_ctl';
var boxID = '_chkNumId';
var index = 0;

while (document.getElementById(base + index + boxID))
{
document.getElementById(base + index + boxID).checked = true;
}
Clean, simple, and effective, if a bit hacky. But that's javascript
for you.

Good Luck!

Jason Kester
Expat Software Consulting Services
http://www.expatsoftware.com/

---
Get your own Travel Blog, with itinerary maps and photos!
http://www.blogabond.com/

Nov 19 '05 #5
Never, ever, under any circumstances actually use RegisterScriptBlock!

<script>

var clientIDs = new Array( <asp:literal id=litClientIDs
runat=server/> );

// the rest of your javascript goes here, where you can read it, edit
it and actually make sense of it.

</script>

If you have to "pass" variables to javascript from the server, always
try to do so with the least amount of server code possible. There is
nothing uglier and less readable than a block of javascript constructed
as a string!
Jason Kester
Expat Software Consulting Services
http://www.expatsoftware.com/

---
Get your own Travel Blog, with itinerary maps and photos!
http://www.blogabond.com/

Nov 19 '05 #6
This js function may help you,

function fnSelectAll(){
var obj = document.getElementById("dg").all.tags("input");//ID of the
Datagrid
var blnFlag = true; //To check or to uncheck
var chk = document.getElementById("chkSelectAll"); //ID of Checkbox
at Datagrid header
if (chk.checked == true)
blnFlag=true;
else
blnFlag=false;

for (var i=0; i<obj.length; i++){
if (obj[i].type == "checkbox"){
obj[i].checked = blnFlag;
}
}
}

Expl: The first statement in the above fun. will give all the input
tags( for Checkbox Input type=checkbox) that are present in the
Datagrid. (A datagrid will be rendered in a table format). So just by
checking the validation, u can do whatever u want,

Praveen.

Nov 19 '05 #7
Thanks Praveen!! that worked!

My problem was that the first checkbox was assigned a name of ctl02 instead
of ctl01 and I don't know if it would be always that way (starting from 02),
so by using document.getElementById("dg").all.tags("input") it would work for
all cases.

Jaime

"Praveen" wrote:
This js function may help you,

function fnSelectAll(){
var obj = document.getElementById("dg").all.tags("input");//ID of the
Datagrid
var blnFlag = true; //To check or to uncheck
var chk = document.getElementById("chkSelectAll"); //ID of Checkbox
at Datagrid header
if (chk.checked == true)
blnFlag=true;
else
blnFlag=false;

for (var i=0; i<obj.length; i++){
if (obj[i].type == "checkbox"){
obj[i].checked = blnFlag;
}
}
}

Expl: The first statement in the above fun. will give all the input
tags( for Checkbox Input type=checkbox) that are present in the
Datagrid. (A datagrid will be rendered in a table format). So just by
checking the validation, u can do whatever u want,

Praveen.

Nov 19 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Not Me | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.