[Solved] Extending MultiSelect widget broken since 2017?

[Pieter]

Hi,

I once created a custom widget which extended the Multiselect widget (using Kendo 2016.2.714), but once I switch to Kendo 2017 (.1 or .2, doesn't matter), the widget is broken and gives a javascript error ("TypeError: Cannot read property 'done' of undefined"). For the purpose of this post, I created a really simple widget, showing the issue:

kendo.ui.plugin(kendo.ui.MultiSelect.extend({
    init: function (element, options) {
        kendo.ui.MultiSelect.fn.init.call(this, element, options);
    },
    options: {
        name: 'MultiSelectCustom'
    },
    _select: function(e) {
        console.log(e);
    }
}));

kendo.data.binders.widget.multiselectcustom = kendo.data.binders.widget.multiselect;

 

The issue seems to be in the override of the "select" function, when I remove that, no JavaScript errors are to be seen.

How to get this to work again with Kendo 2017?

Regards,
Pieter

[Dimitar]

Hello Pieter,

On the following Dojo example you will find a simple MultiSelect implementation, where a similar scenario to the one described is demonstrated (Extending/overriding the Kendo UI MultiSelect _select function).

The observed behavior is expected, as this function expects a deferred object to be resolved ($.Deferred). There are two possible options:

1) Perform custom logic and then call the base function (as demonstrated in the Dojo):

return kendo.ui.MultiSelect.fn._select.call(this, candidate);

2) Override the function and provide your own custom implementation:

_select: function(candidate) {
  // Create a deferred object
  var dfd  = $.Deferred();

  // Add handlers to be called when dfd is resolved
  dfd.done(function() {
    console.log("dfd resolved");
  });

  // Resolve the Deferred object
 return dfd.resolve();
}

Regards,
Dimitar
Progress Telerik