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/

 

[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.

 

[Guest]

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

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.

 

[Guest]

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]

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/

 

[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.type == "checkbox"){
obj.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.

 

[Guest]

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

 

[jayeshu]

Well i have tried the solution provided by u Guys.
Thanks very much

Synopsis: I have to check if atleast 1 of the ckeckbox is checked and then only proceed on a button OnClientclick event. for the client side validation.

Attaching Down under is the code of how i implemented. and it is working abs fine.

<script language=javascript>
function chkValidation()
{
debugger;
var base ='ctl00_ContentPlaceHolder1_gridDomain_ctl0';
var chkBoxID ='_chkBxDomain';
var count = 3;
var result = false;
while(document.getElementById(base + count + chkBoxID)!=null)
{
if(document.getElementById(base + count + chkBoxID).checked)
{
result = true;
break;
}
count = count +1;
}
//var base ='ctl00_ContentPlaceHolder1_gridDomain_ctl03_chkBxDomain';
if(result == false)
{
alert('Please Check atleast One Check Box');
return false;
}
}
</script>