Override javascript method in Microsoft Ajax Library

If you would like to override a method in javascript that uses the Microsoft Ajax Library (such as the control toolkit), you can do the following (with the control toolkit as the base which we are overriding):

Type.registerNamespace('AjaxControlToolkit');

AjaxControlToolkit.YourClassName= function(element)
{
   AjaxControlToolkit.YourClassname.initializeBase(this,[element]);
  //initialize any variables here
}
AjaxControlToolkit.YourClassName.prototype =
{
_setText: function(item) //this is the function we're overriding
{
this._callMyNewFunction('hello there');  // we're sending an alert instead of the normal behavior
},
_callMyNewFunction: function(alertMessage) // my new method
{
alert(alertMessage);
}

AjaxControlToolkit.YourClassName.inheritsFrom(AjaxControlToolkit.AutoCompleteBehavior);

AjaxControlToolkit.YourClassName.registerClass('AjaxControlToolkit.YourClassName', AjaxControlToolkit.AutoCompleteBehavior);  // second parameter is the class you're "inheriting" from

This type of behavior can be applied to any class that uses the Microsoft Ajax Library and is very useful when you need some base behavior for a control and also specific behavior for a particular implemenation.

Comments

• Anonymous
  April 03, 2008
  How would you go about using this to solve the famous _onStarClick bug in the rating control?::The Ratings control offers an OnChanged event delegate; what I want, however, is to handle the OnClick event.  Is there a simple way to override the delegation of the _starClickHandler event to the _onStarClick() function?  If not, is there another way to handle this without modifying the source and recompiling the code?  (I'd prefer not to fork the code for such a simple edit).For reference, the offending javascript code:   _onStarClick : function(e) {       if (this._readOnly) {           return;       }       if (this._ratingValue != this._currentRating) {           this.set_Rating(this._currentRating);       }   },

• Anonymous
  April 11, 2008
  Gavin,I would attempt the same approach I used for the AutoComplete control.  There are really 3 pieces to making this work: Create a new javascript file that overrides the method as I've shown above. Create a new class (control) that derives from the extender or the control.    In your new class (control) register your new javascript file and associate it to your control. Now, use your new control (from step 2) in your code to get your special behavior.  I started to code up an example for you, but got pulled away, but I would think it is definitely possible.Brett

• Anonymous
  August 18, 2008
  I am having the same problem as Gavin, but I am not able to figure out how to do what you describe. Can you be a bit more detailed about steps 2 and 3 in your reply to Gavin? I've created my js file overriding the js methods of the Rating control, and now I want to create a custom rating class that extends the toolkit rating control, and associate it with my js file with the overrides. Please give details of how to accomplish this. Thank you.

• Anonymous
  August 19, 2008
  Ok, so here's an example on what you'll need to do for step 2/3.  Do something as follows in your cs file: [assembly: WebResource("MyModJavascriptFile.js", "text/javascript")] //the custom/override javascript file is an embedded resource namespace MyOverrideControl {    [ClientScriptResource("AjaxControlToolkit.YourClassName", "MyModJavascriptFile.js")]    public class MyCustomAutoComplete : AutoCompleteExtender    {        [DefaultValue("")]        [ExtenderControlProperty]        [ClientPropertyName("heresACustomProperty")]        public string HeresACustomProperty        {            get { return GetPropertyValue("HeresACustomProperty", ""); }            set { SetPropertyValue("HeresACustomProperty", value); }        }    } }   I added in a custom property to my class, so this property would have to be reflected in the javascript file that you are using to override, like so: get_heresACustomProperty : function() {
          /// <value type="String" maybeNull="true">
           /// </value>
          this._heresACustomProperty;
      },
      set_heresACustomProperty : function(value) {
          if (this._heresACustomProperty != value) {
              this._heresACustomProperty = value;    
          }
      }  If you do not need a custom property, then just leave that out of your code.  Just look to see where you need to override behavior and override it in your javascript with what you want the code to do.  If you need values passed into the javascript, then use properties as I have posted above and set as you normally would.  Then use this new class in your code instead of the one provided by the ajax library.

• Anonymous
  February 09, 2011
  Hi BrettRobinson ,this post is nice....I an facing some error while inherting (i followed ur steps to override).I want ot customize the Accordion Behavior. I tryed with below code:CustomControls.Accordion.AccordionBehaviorX.inheritsFrom(AjaxControlToolkit.AccordionBehavior);here its throwing the "parent" type is undifined...can u pls help me how to proceed..thnaksHari K Chavan