How to extend a telerik asp ajax control

Question

I had to extend my telerik ajax control for a library. Backend as well as frontend. Below is my tutorial how I did it. If there are any other ways pls post them as well.

Answer 1

This is a tutorial to extend a telerik control.

Telerik UI for ASP.NET AJAX Version: 2014Q1
css folder: ~/css
css sprite folder: ~/css/sprites
script folder: ~/scripts

Hints: Embed Resource: https://stackoverflow.com/a/39368856/11259733

Target: Extension for RadDropDownList which allows a visual invalidation → a library (dll) of extended controls

1) create a extended class and make it fields available

MyDropDownList.cs (Library):

namespace myLibrary {
 public class MyDropDownList: Telerik.Web.UI.RadDropDownList {
  private bool _isValid = true;
  private string _errorMessage = "";
  private string _toolTip = "";

  public bool IsValid {
   get {
    return _isValid;
   }
   set {
    _isValid = value;
   }
  }

  public string ErrorMessage {
   get {
    return _errorMessage;
   }
   set {
    _errorMessage = value;
   }
  }

  public override string ToolTip {
   get {
    return base.ToolTip;
   }
   set {
    _toolTip = value;
    base.ToolTip = value;
   }
  }
 }
}

Recompile your library and set a reference in your project (https://learn.microsoft.com/en-us/visualstudio/ide/how-to-add-or-remove-references-by-using-the-reference-manager?view=vs-2019). Then include it to your project.

Web.config (Project): add

<configuration>
   <system.web>
      <pages>
         <controls>
            <add tagPrefix="mp" namespace="myProject" assembly="myProject" />
         </controls>
      </pages>
   </system.web>
</configuration>

Site.aspx (Project):

<mp:OwnDropDownList runat="server" ErrorMessage="Error" ToolTip="tooltip">
   //.... some RadDropDownList properties (like Items)
</mp:OwnDropDownList>

2) Backend functions

We want to change the appearance of the dropdown (like an invalide textbox) and change the tooltip to an other text.

style.css(Library):

.riErrorDropDown > .rddlInner {
    background-color: white !important;
    border-color: orangered !important;
    background-image: none !important;
}

    .riErrorDropDown > .rddlInner > .rddlFakeInput {
        border-color: #d51923;
        background: transparent 100% -299px no-repeat url('<%=WebResource("myLibrary.css.sprites.ddAndWarnSprite.png")%>') !important;
        color: #d51923;
    }

myLibrary.css.sprites.ddAndWarnSprite.png is the Telerik.Web.UI.Skins.Default.Input.sprite.gif

now we have to set the style
Change MyDropDownList.cs (Library):

public bool IsValid {
 set {
  // set Css and tooltip 
  if (value) {
   base.ToolTip = _toolTip;
   this.CssClass = this.CssClass.Replace(" riErrorDropDown", "");
  } else {
   base.ToolTip = _errorMessage;
   if (!this.CssClass.Contains("riErrorDropDown"))
    this.CssClass += " riErrorDropDown";
  }

  //set the value
  _isValid = value;
 }
}

Now we have to define our WebResources
Add in AssemblyInfo.cs (Library):

//Css 
[assembly: WebResource("myLibrary.css.style.css", "text/css", PerformSubstitution = true)]

//Css related pictures
[assembly: WebResource("myLibrary.css.sprites.ddAndWarnSprite.png", "img/png")]

In the end we have to include the css into our project.
Add in the body of the Site.Master

<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1">
   <StyleSheets>
      <telerik:StyleSheetReference Assembly="myLibrary" Name="myLibrary.css.style.css" />
   </StyleSheets>
</telerik:RadStyleSheetManager>

3) Frontend functions

We have to create a client side equivalant to our MyDropDownList.cs

MyDropDownList.js

Type.registerNamespace("myLibrary");

String.prototype.replaceAll = function (find, replace) {
    var str = this;
    return str.replace(new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), replace);
};

//Class Constructor
myLibrary.MyDropDownList = function (element) {
    //call base constructor 
    myLibrary.MyDropDownList.initializeBase(this, [element]);

    //control fields

    //control fields from server side 
    this._invalid = null;
    this._invalidText = null;
    this._validText = null;


}

//Class Prototype
myLibrary.MyDropDownList.prototype =
    {
        // Release resources before control is disposed.
        dispose: function () {
            myLibrary.MyDropDownList.callBaseMethod(this, 'dispose');
        },

        // initialize resources
        initialize: function () {
            myLibrary.MyDropDownList.callBaseMethod(this, 'initialize');
        },

        /*************************
         ***** child functions  **
         *************************/

        set_invalid: function (bool) {
            this._invalid = bool;
            var css = "riErrorDropDown";
            var element = this._element;
            if (bool) {
                element.className += " " + css;
                element.title = this._invalidText;
            } else {
                element.className = element.className.replaceAll(" " + css, "");
                element.title = this._validText;
            }
        }
    }

// register a class with its base 
myLibrary.MyDropDownList.registerClass("myLibrary.MyDropDownList", Telerik.Web.UI.RadDropDownList);

//Notify Scriptmanager that script is loaded 
if (typeof (Sys) !== 'undefined') {
    Sys.Application.notifyScriptLoaded();
}

This javascript has to be included as webresource:

Add in AssemblyInfo.cs (Library):

//JS 
[assembly: WebResource("myLibrary.scripts.MyDropDownList.js", "text/javascript")]

And now we have to connect the backend with the frontend.
Change in MyDropDownList.cs (Library):

namespace myLibrary {
  [ClientScriptResource("myLibrary.MyDropDownList", "myLibrary.scripts.MyDropDownList.js")]
  public class MyDropDownList: Telerik.Web.UI.RadDropDownList { 
    //code

    // Set frontend properties
    protected override void DescribeComponent(IScriptDescriptor descriptor) {

      // Set client side fields
      descriptor.AddProperty("_invalid", !_isValid);
      descriptor.AddProperty("_invalidText", _errorMessage);
      descriptor.AddProperty("_validText", _toolTip);

      base.DescribeComponent(descriptor);
    }
  }
}