Challenges while maintaining the check boxes state during pagination of a grid.

See more:

C#

ASP.NET

Javascript

Hello,

I am successfully able to create a functionality in which state of the check boxes is maintained in a grid view while pagination. Its working awesome unless and untill I don't check the header check box. The hidden field stores the Client IDs corresponding to the check boxes and thus after all my process I make use of them in my code. However when I check the header check box whose text I have written as "Don't Send" it picks up the 'on' keyword from it.
Let me explain that I am sending to mail to all my clients in one go and checkboxes are used if we don't want to send mail to a particular client. the page size is 10 for the grid view so it returns me the array filled like this from hidden field:
<"on">
1
2
3
4
5
6
7
8
9
10
"on"
11
12
13
.
.
.>

and so on. This only happens when I check the header check box to select all records on my persisting page. I picked a article for achieving my task from code project only. Here is my javascript:

 //Reference of the GridView. 
        var TargetBaseControl = null;
        //Total no of checkboxes in a particular column inside the GridView.
        var CheckBoxes;
        //Total no of checked checkboxes in a particular column inside the GridView.
        var CheckedCheckBoxes;
        //Array of selected item's Ids.
        var SelectedItems;
        //Hidden field that wil contain string of selected item's Ids separated by '|'.
        var SelectedValues;
        
        window.onload = function()
        {
            //Get reference of the GridView. 
            try
            {
                TargetBaseControl = document.getElementById('<%= this.gvAllClients.ClientID %>');
            }
            catch(err)
            {
                TargetBaseControl = null;
            }
            
            //Get total no of checkboxes in a particular column inside the GridView.
            try
            {
                CheckBoxes = parseInt('<%= this.gvAllClients.Rows.Count %>');
            }
            catch(err)
            {
                CheckBoxes = 0;
            }
            
            //Get total no of checked checkboxes in a particular column inside the GridView.
            CheckedCheckBoxes = 0;
            
            //Get hidden field that wil contain string of selected item's Ids separated by '|'.
            SelectedValues = document.getElementById('<%= this.hdnFldSelectedValues.ClientID %>');
            
            //Get an array of selected item's Ids.
            if(SelectedValues.value == '')
                SelectedItems = new Array();
            else
                SelectedItems = SelectedValues.value.split('|');
                
            //Restore selected CheckBoxes' states.
            if(TargetBaseControl != null)
                RestoreState();
        }
//////////////////////////////////////////////////////////////////////////

function HeaderClick(CheckBox)
        {            
            //Get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName('input');
            
            //Checked/Unchecked all the checkBoxes in side the GridView & modify selected items array.
            for(var n = 0; n < Inputs.length; ++n)
                if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf('',0) >= 0)
                {
                    Inputs[n].checked = CheckBox.checked;
                    if(CheckBox.checked)
                        SelectedItems.push(document.getElementById(Inputs[n].id.replace('chkEmail_Single','hdnFldId')).value);
                    else
                        DeleteItem(document.getElementById(Inputs[n].id.replace('chkEmail_Single','hdnFldId')).value);
                }
                        
            //Update Selected Values. 
            SelectedValues.value = SelectedItems.join('|');
                        
            //Reset Counter
            CheckedCheckBoxes = CheckBox.checked ? CheckBoxes : 0;
        }
//////////////////////////////////////////////////////////////////////
function ChildClick(CheckBox, HCheckBox, Id)
{               
   //Modify Counter;            
   if(CheckBox.checked && CheckedCheckBoxes < CheckBoxes)
      CheckedCheckBoxes++;
   else if(CheckedCheckBoxes > 0) 
      CheckedCheckBoxes--;
                
   //Change state of the header CheckBox.
   if(CheckedCheckBoxes < CheckBoxes)
      HCheckBox.checked = false;
   else if(CheckedCheckBoxes == CheckBoxes)
      HCheckBox.checked = true;
                
   //Modify selected items array.
   if(CheckBox.checked)
      SelectedItems.push(Id);
   else
      DeleteItem(Id);
                
   //Update Selected Values. 
   SelectedValues.value = SelectedItems.join('|');
}  
  /////////////////////////////////////////////////////////////////////////
  function RestoreState()
{
   //Get all the control of the type INPUT in the base control.
   var Inputs = TargetBaseControl.getElementsByTagName('input');
            
   //Header CheckBox
   var HCheckBox = null;
            
   //Restore previous state of the all checkBoxes in side the GridView.
   for(var n = 0; n < Inputs.length; ++n)
      if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf('chkEmail_Single',0) >= 0)
         if(IsItemExists(document.getElementById(Inputs[n].id.replace
		('chkEmail_Single','hdnFldId')).value) > -1)
         {
            Inputs[n].checked = true;          
            CheckedCheckBoxes++;      
         }
         else
            Inputs[n].checked = false;   
      else if(Inputs[n].type == 'checkbox' && 
		Inputs[n].id.indexOf('chkAll',0) >= 0) 
         HCheckBox = Inputs[n];  
                    
   //Change state of the header CheckBox.
   if(CheckedCheckBoxes < CheckBoxes)
      HCheckBox.checked = false;
   else if(CheckedCheckBoxes == CheckBoxes)
      HCheckBox.checked = true;  
}
/////////////////////////////////////////////////////////////////////////////// 

function DeleteItem(Text)
{
   var n = IsItemExists(Text);
   if( n > -1)
      SelectedItems.splice(n,1);
}

function IsItemExists(Text)
{
   for(var n = 0; n < SelectedItems.length; ++n)
      if(SelectedItems[n] == Text)
         return n;
                 
      return -1;  
}   

Please Help.