36822

Extend Kendo MultiSelect

Question:

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);

Answer1:

I have tested the code and at first got and error - 'that is not defined'. After adding var that = this; in the '_select' method I noticed that you have to add 'that' as a first parameter to the call function. Here is the code that worked correctly at my side - <a href="https://dojo.telerik.com/@zdravkov/ApOVApiV" rel="nofollow">https://dojo.telerik.com/@zdravkov/ApOVApiV</a>

Recommend

  • angular 2 injection not work in inheritance
  • send javascript array in Ajax.BeginForm
  • multiselect.js refresh after change
  • Generating templates programmatically in Kendo for Angular grid
  • Wijmo wj-tree-view angularjs Drop wait for $http callback
  • Isset with multi select dropdown and bootstrap
  • Handle Empty bars in column chart in AmCharts
  • How to access column name dynamically in Kendo Grid template
  • MATLAB newbie - Display Photos above panel in guide
  • How to filter whole datasource on a kendo grid with virtualized remote data
  • How to refresh a grid and chart
  • jQuery timepicker 'Object does not support this property or method'
  • Jquery resizable reposition handle after scroll
  • dismiss Progress Dialog in another Activity … Android
  • Unable to click on the next page button containing “>” sign
  • jquery code not working without breakpoint
  • Java Application vs. Java Desktop Application in Netbeans [duplicate]
  • LiveData is abstract android
  • apply a javascript function to draggable copy
  • Implement JwtBearer Authentication in NSwag SwaggerUi
  • Spring: No transaction manager has been configured
  • accepts_nested_attributes_for practical form use for in Rails 3
  • Why use database factory in asp.net mvc?
  • Object and struct member access and address offset calculation
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Change JButton Shape while respecting Look And Feel
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Fill an image in a square container while keeping aspect ratio
  • jQuery tmpl and DataLink beta
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • Hits per day in Google Big Query
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Linking SubReports Without LinkChild/LinkMaster
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Reading document lines to the user (python)
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app
  • How to push additional view controllers onto NavigationController but keep the TabBar?