Extending MultiSelect widget broken since 2017?

2 posts, 0 answers
  1. Pieter
    Pieter avatar
    17 posts
    Member since:
    Oct 2014

    Posted 02 Aug Link to this post

    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

  2. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 04 Aug Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top