I'm trying to create a new kendo multi-select widget by extending the existing one. The goal is to show the tag list in a div below the input.
My goal here in this code is to render the tag list in a separate div on the select event of the widget, and then return the select event of the base widget (Kendo MultiSelect), but the select event of the base widget returns a dataItem undefind error. What am I doing wrong?
(function ($) {
var customMultiSelect = kendo.ui.MultiSelect.extend({
init: function (element, options) {
var that = this;
kendo.ui.MultiSelect.fn.init.call(that, element, options);
// Hide the tag list...
var id = that.element.attr('id');
that.wrapper.find(`ul#${id}_taglist`).addClass("hidden");
that.element.on("select", that._select);
},
options: {
name: "CustomMultiSelect"
},
_select: function (e) {
// code to render the tag list in a div goes here
that.trigger("select", e);
return kendo.ui.MultiSelect.prototype._select.call(e);
}
});
kendo.ui.plugin(customMultiSelect);
})(jQuery, document);