How can I replace an existing Kendo UI widget?

Question

I'm trying to extend an existing KendoUI widget (autocomplete). Since our application is already using a lot of instances of the autocomplete widget, I don´t want to create a new widget which extends the current one but rather replace the existing one.

I already found this topic: kendo-ui autocomplete extend, but unfortunately it points creating a new one.

I tried the following code:

   var plg = kendo.ui.AutoComplete.extend({
        options: {
            name: 'AutoCompleteMyOne'
        },
        init: function (_element, _options)
        {
            kendo.ui.AutoComplete.fn.init.call(this, _element, _options);

         /*...*/
        }
    });
    kendo.ui.plugin(plg);

The point is the name-attribute of the options. If the name is only "AutoComplete" the initialization does not work anymore: This line ends in an endlessloop:

kendo.ui.AutoComplete.fn.init.call(this, _element, _options);

How can I call the base-initialization or is it really overwritten?

Answer 1

If you replace the auto-complete widget, then your code is effectively calling its own init method recursively. So you need to store the existing method and call that one, e.g. like this:

var plg = (function (init) {
    return kendo.ui.AutoComplete.extend({
        options: {
            name: 'AutoComplete'
        },
        init: function (_element, _options) {
            // modify the placeholder
            _options.placeholder += " (custom)";

            init.call(this, _element, _options);

            /*...*/
        }
    });

})(kendo.ui.AutoComplete.fn.init);
kendo.ui.plugin(plg);

(demo)