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

[Jaime Stuardo]

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

[Jason Kester]

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/

[Sebastian Wojciechowski]

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/

[Jaime Stuardo]

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/

[Jaime Stuardo]

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/

[Jason Kester]

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/

[Praveen]

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.

[Jaime Stuardo]

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.