Check or Uncheck all CheckBoxes in an ASP.NET GridView using jQuery

var $headerCheckBox = $('.headerSelectAll input[type="checkbox"]');
        var $childCheckBox = $('.childSelect input[type="checkbox"]');
        $($headerCheckBox).change(function () {
            $childCheckBox.each(function () {
                this.checked = $headerCheckBox[0].checked;
            })
        });

        $($childCheckBox).change(function () {
            // if any of the checkbox is unchecked
            // check all checkbox should be cleared
            if (!$(this).is(':checked')) {
                $headerCheckBox.removeAttr('checked');
            }
            else {
                // if all of the checkbox is checked
                // check all checkbox should be checked
                if ($childCheckBox.length == $childCheckBox.filter(':checked').length) {
                    $headerCheckBox[0].checked = true;
                }
            }
        });

Ternary Operator in javascript

var eVal = (isNaN(eThis.val())) ? 0 : eThis.val();
var eVal = parseFloat($(eThis).val()) || 0;

show popup window minimized

var win;

    function openWindow() {
        if (win == null || win.closed == true) {
            win = window.open('Help.htm', 'Help', 'top=150,left=200,width=450,height=250,resizable=yes,scrollbars=yes');
            win.focus();
            return false;
        } else {
            win.target = "Help.htm";
            win.focus();
            return false;
        }
    }

How to call

OnClientClick="javascript:return openWindow();"

Auto center pop up window

function PopupCenter() {
    var width = 600;
    var height = 480;
    var top = (screen.height / 2) - (height / 2);
    var left = (screen.width / 2) - (width / 2);

    var parametar = 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left;
    var url = 'Default.aspx'
    var windowName = 'Default';
    var targetWin = window.open(url, windowName, parametar);
    targetWin.focus();
    return false;
}

Page with query string

function PopupCenter(Name, Age) {
    var width = 600;
    var height = 480;
    var top = (screen.height / 2) - (height / 2);
    var left = (screen.width / 2) - (width / 2);

    var parametar = 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left;
    var url = 'Default.aspx?Name=' + Name + '&Age=' + Age;
    var windowName = 'Default';
    var targetWin = window.open(url, windowName, parametar);
    targetWin.focus();
    return false;
}

References
www.javascripter.net
msdn
htmlgoodies

Grouping RadioButton inside gridveiw

        function uncheckOthers(id) {
            var elm = document.getElementsByTagName('input');
            for (var i = 0; i < elm.length; i++) {
                if (elm.item(i).id.substring(id.id.lastIndexOf('_')) == id.id.substring(id.id.lastIndexOf('_'))) {
                    if (elm.item(i).type == "radio" && elm.item(i) != id) elm.item(i).checked = false;
                }
            }
        }  

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        try
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //To make the RadioButton mutually exclusive
                string strScript = "uncheckOthers(" + ((RadioButton)e.Row.Cells[0].FindControl("rbSelect")).ClientID + ");";
                ((RadioButton)e.Row.Cells[0].FindControl("rbSelect")).Attributes.Add("onclick", strScript);
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

Selecting or DeSelecting multiple checkbox inside a gridview

function SelectAllOrDeselect(CheckBox, Type, Column, HCheckBox) {
    try {
        var TotalChkBx = parseInt('<%= grd_EmpSelection.Rows.Count %>');
        var TargetBaseControl = document.getElementById('<%= grd_EmpSelection.ClientID%>');
        var TargetChildControl = null;

        if (Column == "1") TargetChildControl = "chkTestSelect";
        else TargetChildControl = "chkTrainingSelect";

        var Inputs = TargetBaseControl.getElementsByTagName("input");
        var SelectCount = 0;
        //Checked/Unchecked all the checkBoxes in side the GridView.
        if (Type == "1") {
            for (var iCount = 0; iCount < Inputs.length; ++iCount) {
                if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0) 
                    Inputs[iCount].checked = CheckBox.checked;
            }

            //Reset Counter
            SelectCount = CheckBox.checked ? TotalChkBx : 0;
        } else if (Type == "2") {
            //Reset Counter
            for (var iCount = 0; iCount < Inputs.length; ++iCount) {
                if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0) 
                    if (Inputs[iCount].checked == true) SelectCount++;
            }

            //Modifiy Counter;        
            if (!CheckBox.checked && SelectCount > 0) SelectCount--;

            //Change state of the header CheckBox.
            if (SelectCount < TotalChkBx) HCheckBox.checked = false;
            else if (SelectCount == TotalChkBx) HCheckBox.checked = true;
        }
    } catch (err) {}
}

protected void grd_EmpSelection_RowCreated(object sender, GridViewRowEventArgs e)
    {
        //e.Row.RowState == DataControlRowState.Edit not works on Alternating Rows 
        //if ((e.Row.RowState & DataControlRowState.Edit) > 0)
        if (e.Row.RowType == DataControlRowType.DataRow && (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate))
        {

            CheckBox chkTestSelectAll = (CheckBox)this.grd_EmpSelection.HeaderRow.FindControl("chkTestSelectAll");
            CheckBox chkTestSelect = (CheckBox)e.Row.Cells[1].FindControl("chkTestSelect");

            chkTestSelectAll.Attributes["onclick"] = string.Format("javascript:SelectAllOrDeselect(this,'1','1', {0});", chkTestSelectAll.ClientID);
            chkTestSelect.Attributes["onclick"] = string.Format("javascript:SelectAllOrDeselect(this,'2','1', {0});", chkTestSelectAll.ClientID);


            CheckBox chkTrainingSelectAll = (CheckBox)this.grd_EmpSelection.HeaderRow.FindControl("chkTrainingSelectAll");
            CheckBox chkTrainingSelect = (CheckBox)e.Row.Cells[1].FindControl("chkTrainingSelect");

            chkTrainingSelectAll.Attributes["onclick"] = string.Format("javascript:SelectAllOrDeselect(this,'1','2', {0});", chkTrainingSelectAll.ClientID);
            chkTrainingSelect.Attributes["onclick"] = string.Format("javascript:SelectAllOrDeselect(this,'2','2', {0});", chkTrainingSelectAll.ClientID);

        }
    }

The gridview checkbox will maintain the checked state during postback.

Reference
http://www.codeproject.com/KB/webforms/SelectingAllCheckBoxes.aspx

Collapsible Div

function ToggleCollapsible(ControlIdToShow, SaveStateField, ControlFireID) {
    var control = document.all[ControlIdToShow].style;
    var expandstate = document.all[SaveStateField];

    var ControlFireID = document.getElementById(ControlFireID);

    if (control.display == 'none') {
        control.display = '';
        expandstate.value = 'true';

        if (ControlIdToShow == "ToShow") {
            //showImageID.style.display = "none";
            //hideImageID.style.display = "block";
            //On button click change the image
            ControlFireID.src = "Collapsible/collapse.gif";
            ControlFireID.title = "Hide";
        }
    }
    else {
        control.display = 'none';
        expandstate.value = 'false';

        if (ControlIdToShow == "ToShow") {
            //showImageID.style.display = "block";
            //hideImageID.style.display = "none";
            //On button click change the image
            ControlFireID.src = "Collapsible/expand.gif";
            ControlFireID.title = "Show";
        }
    }

    return false;
}

<input type="hidden" name="CollapsiblePanelHidden" value="True" />
<input id="imgBtnShow" name="imgBtnShow" type="image" src="Collapsible/expand.gif"
onclick="return ToggleCollapsible (&#39;ToShow&#39;, &#39;CollapsiblePanelHidden&#39;, &#39;imgBtnShow&#39;)"
title="Show" style="display: block;" />
<div id="ToShow" style="display: none;">
<table id="ShowTable">
<tr>
<td>
<a id="ShowTableContent"
title="Click to expand/collapse" onclick="return ToggleCollapsible (&#39;PanelToShowOrHide&#39;, &#39;CollapsiblePanelHidden&#39;, &#39;imgBtnShow&#39;, &#39;imgBtnHide&#39;)"
href="#">Collapsible panel (click to expand).</a></td>
</tr>
<tr>
<td id="PanelToShowOrHide" style="width: 100%; display: none; color: Red;">
http://asp-tech.blogspot.com/
</td>
</tr>
</table>
</div>

Numeric Validation in Javascript

/*
NUMERIC
prefix --> For number of digits before .(Period)
If you didn't give the period also it allows only the digits that given in the prefix part

suffix --> For the number of digits after the .(Period)

NumberOnly
If we specify suffix as 0 it allows only integer
*/

  
function NumericValidation(ctrlName, e, prefix, suffix) {

    var evt = e || window.event;
    var code = e.charCode ? e.charCode : e.keyCode;
    var EndKey = 35;
    var HomeKey = 36;
    var NumeriPeriodKey = 110;
    var PeriodKey = 190;
    if (e.shiftKey || e.ctrlKey) {
        return false;
    }


    //debugger;
    // IE
    if (evt.type == 'keydown') {

        if ((code == EndKey || code == HomeKey || code == 37 || code == 38 || code == 39 || code == 40 || code == 9)) {
            return true;
        }

        if (code == 46 || code == 8) {
            var val = ctrlName.value;
            var pos = val.indexOf('.');
            var lenofBox = val.length;

            if (code == 8) {
                //Since back key deletes backward
                if (doGetCaretPosition(ctrlName) == (pos + 1)) {

                    ctrlName.value = val.substring(0, pos)
                }
                else {
                    return true;
                }
            }
            else (code == 46)
            {
                //Since del key deletes forward
                if (doGetCaretPosition(ctrlName) == pos) {

                    ctrlName.value = val.substring(0, pos)
                }
                else {
                    return true;
                }
            }
        }

        if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105) || (code == PeriodKey || code == NumeriPeriodKey)) {

            var val = ctrlName.value;

            if (val != "") {
                var pos = val.indexOf('.');
                var lenofBox = val.length;

                //To allow only int
                if ((suffix == 0) && (code == PeriodKey || code == NumeriPeriodKey)) {
                    return false;
                }

                //if already period is available
                if ((code == PeriodKey || code == NumeriPeriodKey) && (pos > -1)) {
                    return false;
                }

                //if prefix reaches and the current one is not period the stop the event
                if ((pos == -1 && lenofBox == prefix) && (code != PeriodKey && code != NumeriPeriodKey)) {
                    return false;
                }

                if (doGetCaretPosition(ctrlName) > pos) {

                    if (pos > -1) {
                        var decSting = val.substring(pos + 1, lenofBox + 1);
                        // debugger;
                        //alert(doGetCaretPosition(document.getElementById('TextBox1')));
                        if (decSting.length == suffix) {
                            return false;
                        }
                    }
                }
                else if (pos >= prefix) {
                    return false;
                }

            }

            // alert(document.getElementById('TextBox1').value + String.fromCharCode(evt.keyCode));
            return true;
        }
        else {
            //  alert(document.getElementById('TextBox1').value);
            return false;
        }
    }
    else if (evt.type == 'keypress') {

        if ((code == 37 || code == 38 || code == 39 || code == 40) || (code == 46 || code == 8 || code == 9)) {
            return true;
        }

        if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105) || (code == PeriodKey || code == NumeriPeriodKey)) {

            var val = ctrlName.value;

            if (val != "") {
                var pos = val.indexOf('.');
                var lenofBox = val.length;

                //To allow only int
                if ((suffix == 0) && (code == PeriodKey || code == NumeriPeriodKey)) {
                    return false;
                }

                //if already period is available
                if ((code == PeriodKey || code == NumeriPeriodKey) && (pos > -1)) {
                    return false;
                }

                //if prefix reaches and the current one is not period the stop the event
                if ((pos == -1 && lenofBox == prefix) && (code != PeriodKey || code != NumeriPeriodKey)) {
                    return false;
                }

                if (doGetCaretPosition(ctrlName) > pos) {

                    if (pos > -1) {
                        var decSting = val.substring(pos + 1, lenofBox + 1);
                        // debugger;
                        //alert(doGetCaretPosition(document.getElementById('TextBox1')));
                        if (decSting.length == suffix) {
                            return false;
                        }
                    }
                }
                else if (pos >= prefix) {
                    return false;
                }
            }

            // alert(document.getElementById('TextBox1').value + String.fromCharCode(evt.keyCode));
            return true;
        }
        else {
            //   alert(document.getElementById('TextBox1').value);
            return false;
        }
    }
}

function doGetCaretPosition(ctrl) {
    var CaretPos = 0; // IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart;
    return (CaretPos);
}

Numeric Validation in Javascript

/* Babu Kumarasamy
NUMERIC
prefix --> For number of digits before .(Period)
If you didn't give the period also it allows only the digits that given in the prefix part
       
suffix --> For the number of digits after the .(Period)

NumberOnly
If we specify suffix as  0 it allows only integer
*/

function NumericValidation(ctrlName, e, prefix, suffix) {

  var evt = e || window.event;
  var code = e.charCode ? e.charCode : e.keyCode;
  var EndKey = 35;
  var HomeKey = 36;
  var NumeriPeriodKey = 110;
  var PeriodKey = 190;
  if (e.shiftKey || e.ctrlKey) {
      return false;
  }


  //debugger;
  // IE
  if (evt.type == 'keydown') {

      if ((code == EndKey || code == HomeKey || code == 37 || code == 38 || code == 39 || code == 40 || code == 9)) {
          return true;
      }

      if (code == 46 || code == 8) {
          var val = ctrlName.value;
          var pos = val.indexOf('.');
          var lenofBox = val.length;

          if (code == 8) {
              //Since back key deletes backward
              if (doGetCaretPosition(ctrlName) == (pos + 1)) {

                  ctrlName.value = val.substring(0, pos)
              }
              else {
                  return true;
              }
          }
          else (code == 46)
          {
              //Since del key deletes forward
              if (doGetCaretPosition(ctrlName) == pos) {

                  ctrlName.value = val.substring(0, pos)
              }
              else {
                  return true;
              }
          }
      }

      if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105) || (code == PeriodKey || code == NumeriPeriodKey)) {

          var val = ctrlName.value;

          if (val != "") {
              var pos = val.indexOf('.');
              var lenofBox = val.length;

              //To allow only int
              if ((suffix == 0) && (code == PeriodKey || code == NumeriPeriodKey)) {
                  return false;
              }

              //if already period is available
              if ((code == PeriodKey || code == NumeriPeriodKey) && (pos > -1)) {
                  return false;
              }

              //if prefix reaches and the current one is not period the stop the event
              if ((pos == -1 && lenofBox == prefix) && (code != PeriodKey && code != NumeriPeriodKey)) {
                  return false;
              }

              if (doGetCaretPosition(ctrlName) > pos) {

                  if (pos > -1) {
                      var decSting = val.substring(pos + 1, lenofBox + 1);
                      // debugger;
                      //alert(doGetCaretPosition(document.getElementById('TextBox1')));
                      if (decSting.length == suffix) {
                          return false;
                      }
                  }
              }
              else if (pos >= prefix) {
                  return false;
              }

          }

          // alert(document.getElementById('TextBox1').value + String.fromCharCode(evt.keyCode));
          return true;
      }
      else {
          //  alert(document.getElementById('TextBox1').value);
          return false;
      }
  }
  else if (evt.type == 'keypress') {

      if ((code == 37 || code == 38 || code == 39 || code == 40) || (code == 46 || code == 8 || code == 9)) {
          return true;
      }

      if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105) || (code == PeriodKey || code == NumeriPeriodKey)) {

          var val = ctrlName.value;

          if (val != "") {
              var pos = val.indexOf('.');
              var lenofBox = val.length;

              //To allow only int
              if ((suffix == 0) && (code == PeriodKey || code == NumeriPeriodKey)) {
                  return false;
              }

              //if already period is available
              if ((code == PeriodKey || code == NumeriPeriodKey) && (pos > -1)) {
                  return false;
              }

              //if prefix reaches and the current one is not period the stop the event
              if ((pos == -1 && lenofBox == prefix) && (code != PeriodKey || code != NumeriPeriodKey)) {
                  return false;
              }

              if (doGetCaretPosition(ctrlName) > pos) {

                  if (pos > -1) {
                      var decSting = val.substring(pos + 1, lenofBox + 1);
                      // debugger;
                      //alert(doGetCaretPosition(document.getElementById('TextBox1')));
                      if (decSting.length == suffix) {
                          return false;
                      }
                  }
              }
              else if (pos >= prefix) {
                  return false;
              }
          }

          // alert(document.getElementById('TextBox1').value + String.fromCharCode(evt.keyCode));
          return true;
      }
      else {
          //   alert(document.getElementById('TextBox1').value);
          return false;
      }
  }
}

function doGetCaretPosition(ctrl) {
  var CaretPos = 0; // IE Support
  if (document.selection) {
      ctrl.focus();
      var Sel = document.selection.createRange();
      Sel.moveStart('character', -ctrl.value.length);
      CaretPos = Sel.text.length;
  }
  // Firefox support
  else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart;
  return (CaretPos);
}

/* Babu Kumarasamy */

Call Validators form javascript

We can able to call the Validator controls form the javascript function
if needed

ValidatorEnable(document.getElementById ('reqItem'), true); 

reqItem is the ID of the validator control.

www.codeproject.com

Numeric Validation Using JavaScript

<asp:textbox id="TextBox1" runat="server"
onkeypress="return detectEvent(event);"
onkeydown="return detectEvent(event);"></asp:textbox>

onkeydown
onkeypress


we are using both the event since some
browsers don't have one of the event.


To accept only numbers both from NUMPAD and
from KeyBoard we use this method.

function detectEvent(e) {
var evt = e || window.event;
// Firefox
if(evt.type == 'keydown') {
 if ( (evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96
                      && evt.keyCode <= 105) ) return true;
 return false;
 }
else if(evt.type == 'keypress') {
 if (evt.charCode >= 48 && evt.charCode <= 57) return true;
 return false;
 }
}

This one for IE  since IE don't have charCode

function detectEvent(e) {
var evt = e || window.event;
// IE
if(evt.type == 'keydown') {
 if ( (evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96
                      && evt.keyCode <= 105) ) return true;
 return false;
 }
else if(evt.type == 'keypress') {
 if (evt.keyCode >= 48 && evt.keyCode <= 57) return true;
 return false;
 }
}


Now a common method for both the things(it works both in IE and FireFox
for both NUMPAD and for KeyBoard)

function validKey(e) {
var KeyID = window.event ? event.keyCode : e.which;
var evt = e || window.event;
if(evt.type == 'keydown') {
 if ( (KeyID >= 48 && KeyID <= 57) || (KeyID >= 96 && KeyID <= 105) ) return true;
 return false;
 }
else if(evt.type == 'keypress') {
 if(KeyID >= 48 && KeyID <= 57) return true;
 return false;
 }
}