CheckBoxList Select All Extender and Spore

8/19/2008

Before I get to any code, I just wanted to point out that Spore is coming out on September 7... So if you come to the site and haven't seen an update after that date, you'll know why.

Anyway, on to the code. This one is rather basic (as most of the extenders I create are), but I haven't seen anyone else coming out with extenders to do similar tasks. Either that or the ones I do find, I don't really like for one reason or another. In this case, all I wanted was a button that I could click on and have all of the various check boxes in a CheckBoxList be checked. And if they're all checked, to uncheck them all... That was it really.

CheckBoxSelectAllExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.CheckBoxSelectAll
  11: {
  12:     [Designer(typeof(CheckBoxSelectAllDesigner))]
  13:     [ClientScriptResource("AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior", "AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class CheckBoxSelectAllExtender : ExtenderControlBase
  16:     {
  17:         // TODO: Add your property accessors here.
  18:         //
  19:         [ExtenderControlProperty]
  20:         [DefaultValue("")]
  21:         [IDReferenceProperty(typeof(WebControl))]
  22:         public string CheckBoxListID
  23:         {
  24:             get
  25:             {
  26:                 return GetPropertyValue("CheckBoxListID", "");
  27:             }
  28:             set
  29:             {
  30:                 SetPropertyValue("CheckBoxListID", value);
  31:             }
  32:         }
  33:  
  34:         [ExtenderControlProperty]
  35:         [DefaultValue("Select All")]
  36:         public string SelectAllText
  37:         {
  38:             get
  39:             {
  40:                 return GetPropertyValue("SelectAllText", "");
  41:             }
  42:             set
  43:             {
  44:                 SetPropertyValue("SelectAllText", value);
  45:             }
  46:         }
  47:  
  48:         [ExtenderControlProperty]
  49:         [DefaultValue("Deselect All")]
  50:         public string DeselectAllText
  51:         {
  52:             get
  53:             {
  54:                 return GetPropertyValue("DeselectAllText", "");
  55:             }
  56:             set
  57:             {
  58:                 SetPropertyValue("DeselectAllText", value);
  59:             }
  60:         }
  61:     }
  62: }

CheckBoxSelectAllBehavior.js

   1: // README
   2: //
   3: // There are two steps to adding a property:
   4: //
   5: // 1. Create a member variable to store your property
   6: // 2. Add the get_ and set_ accessors for your property
   7: //
   8: // Remember that both are case sensitive!
   9:  
  10:  
  11: /// <reference name="MicrosoftAjaxTimer.debug.js" />
  12: /// <reference name="MicrosoftAjaxWebForms.debug.js" />
  13: /// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />
  14:  
  15:  
  16: Type.registerNamespace('AJAXControls.CheckBoxSelectAll');
  17:  
  18: AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior = function(element) {
  19:     AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior.initializeBase(this, [element]);
  20:  
  21:     // TODO : (Step 1) Add your property variables here
  22:     this._CheckBoxListIDValue = null;
  23:     this._Selected = false;
  24:     this._SelectAllTextValue = "Select All";
  25:     this._DeselectAllTextValue = "Deselect All";
  26: }
  27: AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior.prototype = {
  28:     initialize: function() {
  29:         AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior.callBaseMethod(this, 'initialize');
  30:  
  31:         // TODO: Add your initalization code here
  32:         Sys.UI.DomEvent.addHandler(this.get_element(), 'click', Function.createDelegate(this, this._onclick));
  33:     },
  34:  
  35:     _onclick: function() {
  36:         var CheckBoxTable = $get(this._CheckBoxListIDValue);
  37:         var CheckBoxList=CheckBoxTable.getElementsByTagName("input");
  38:         if (this._Selected) {
  39:             for (var x = 0; x < CheckBoxList.length; ++x) {
  40:                 CheckBoxList[x].checked = false;
  41:             }
  42:             this.get_element().value = this._SelectAllTextValue;
  43:             this._Selected = false;
  44:         }
  45:         else {
  46:             for (var x = 0; x < CheckBoxList.length; ++x) {
  47:                 CheckBoxList[x].checked = true;
  48:             }
  49:             this.get_element().value = this._DeselectAllTextValue;
  50:             this._Selected = true;
  51:         }
  52:         return false;
  53:     },
  54:  
  55:     dispose: function() {
  56:         // TODO: Add your cleanup code here
  57:  
  58:         AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior.callBaseMethod(this, 'dispose');
  59:     },
  60:  
  61:     // TODO: (Step 2) Add your property accessors here
  62:     get_CheckBoxListID: function() {
  63:         return this._CheckBoxListIDValue;
  64:     },
  65:     set_CheckBoxListID: function(value) {
  66:         this._CheckBoxListIDValue = value;
  67:     },
  68:     get_DeselectAllText: function() {
  69:         return this._DeselectAllTextValue;
  70:     },
  71:     set_DeselectAllText: function(value) {
  72:         this._DeselectAllTextValue = value;
  73:     },
  74:     get_SelectAllText: function() {
  75:         return this._SelectAllTextValue;
  76:     },
  77:     set_SelectAllText: function(value) {
  78:         this._SelectAllTextValue = value;
  79:     }
  80: }
  81: AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior.registerClass('AJAXControls.CheckBoxSelectAll.CheckBoxSelectAllBehavior', AjaxControlToolkit.BehaviorBase);

My code is extremely basic in this instance, but allows you to switch the text of the button based on the state that it's in. Otherwise, not much really to it. Just specify the TargetControlID as the button you want to use, the CheckBoxListID to the CheckBoxList, the select all and deselect all text, and you're good to go. So if you want to go in and modify the code, feel free. I will warn you that the CheckBoxListID points to the list, but the list is rendered as a table. So in order to get the actual check boxes from it, you need to use getElementsByTagName("input"). It's pretty straight forward from there, but keep that in mind. Anyway, download the code, give it a try, and happy coding.



Comments