Mohammed Atef’s Technical blog

Check and uncheck all checkboxes in GirdView without any server side code

Introduction

I was searching for JavaScript method that check or uncheck all checkboxes in GridView using check box in header. actually i have find more of solution but no one can be generic or must write code in server side in Gridview_databound event. i have wrote this article to introduce new solution generic for any normal GridView.

Idea

My idea here is getting all html controls from type input and check if the control type is checkbox or not then update checked value depending on Boolean value send to method.

Understand Code

kindly find Javascript code for this issue below

   1: function CheckAllDataGridCheckBoxes(checkVal,id)
   2:  {     
   3:     var gvid=GetGridViewID(id);
   4:     var checkboxx = document.getElementsByTagName("input");
   5:     for (i = 0; i < checkboxx.length; i++) {
   6:         if (checkboxx(i).type == "checkbox" && checkboxx(i).id.indexOf(gvid)!=-1 ) {
   7:             checkboxx(i).checked = checkVal;
   8:         }
   9:     }
  10: }
  11: //used to get grid view id from chkall check box id
  12: function GetGridViewID(chkallid)
  13: {     
  14:     var underscorindex=chkallid.lastIndexOf("_");
  15:     var gvname=chkallid.substring(0,underscorindex-1);
  16:     underscorindex=gvname.lastIndexOf("_");
  17:     gvname=gvname.substring(0,underscorindex-1);
  18:     return   gvname;
  19: }

Parameters

checkVal:is Boolean hold true or false comes from checked value of checkbox found in GridView header

id:is id for check box found in GridView header.

How it is working?

I think any Javascript developer can understand the above code but i need to explain why i have used GetGridViewID method, acually i found Javascript method like CheckAllDataGridCheckBoxes but it have one issue, it is checking all check boxes found in your form that why i am using GetGridViewID method.

GetGridViewID this method is doing the following

1- Any checkbox under gridview id is following this pattern GridViewClientID_ctrl(0…n)_CheckBoxName

so in line 14 and 15 i get last index of _ character and substring id to this index it mean i have now  GridViewClientID_ctrl(0…n) in gvname

2-line 16,17 get the next last index of _ charchter and substring to this index it means i have now GridViewClientID in gvname so now i have the clientID for GridView.

How to use

To use this JavaScript method write the following in onClick event for CheckBox found in grid view header.

onClick="javascript:CheckAllDataGridCheckBoxes(this.checked,this.id)"

I hope this helped

Advertisements

October 7, 2009 - Posted by | Asp.net | , ,

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: