Telerik MVC : Extending the Client API

Written by John DeVightJohn DeVight on 14 Jun 2011 14:37

Download the source code and sample project from CodePlex.

Overview

The Telerik Extensions for ASP.NET MVC are really nice, but lacks a rich client API. Telerik has left it up to you to implement for yourself. One way of doing this is to write the same block of code each time that functionality is needed; not really efficient, but it works. Another way is to create a separate javascript class that encapsulates the block of code and takes a reference to the Telerik control as a parameter. This is better than the first option, but just doesn't feel right. The direction that I chose was to extend the Telerik Extensions so that the block of code is executed from the Telerik control.

The Telerik ScriptRegister evaluates the page that is being rendered and identifies what components are being used and downloads only the javascript files needed to support I created a variable that contained the list of functions to extend a Telerik plugin. So the first thing I do is check to see if the javascript file for the component has been downloaded for the page by checking to see if the jQuery plugin is defined. If it is, then I define my extension functions and apply the functions to the Telerik plugin using the jQuery .extend() function.

The following implementation is based on Telerik Extensions for ASP.NET MVC version 2011.2.818.

Telerik jQuery Plugin Classes

Here are a list of the Telerik jQuery plugin classes that I have extended:

Component jQuery Plugin Class
ComboBox $.telerik.combobox
DropDownList $.telerik.dropDownList
Grid $.telerik.grid
TabStrip $.telerik.tabstrip
TreeView $.telerik.treeview
Window $.telerik.window

Example of Extending the Window Extension

Here is an example of some functions for extending the Telerik Window extension.

(function($){
    // Was the tekerik.window.min.js added to the page by the telerik script registrar?
    if ($.telerik.window != undefined) {
        // Extend the window plugin.
        var windowExtensions = {
            /// <summary>
            /// Set a new height for the window.
            /// </summary>
            /// <param type="int" name="h">New height for the window.</param>
            setHeight: function(h) {
                $(this.element).find('.t-window-content').height(h);
            },
            /// <summary>
            /// Set a new width for the window.
            /// </summary>
            /// <param type="int" name="w">New width for the window.</param>
            setWidth: function(w) {
                $(this.element).find('.t-window-content').width(w);
            }
        };
 
        // Add the extensions to the window plugin.
        $.extend(true, $.telerik.window.prototype, windowExtensions);
    }
})(jQuery);

References

Discussion Closed

Add a New Comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License