JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2015.3.930/styles/kendo.default.min.css">
<select id="parsingmultiselect" multiple="multiple" style="width: 300px"></select>
JavaScript
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
MultiSelect = ui.MultiSelect,
CHANGE = "change",
PASTE = "paste";
var ParsingMultiSelect = MultiSelect.extend({
init: function (element, options) {
var that = this;
// Base call to MultiSelect to initialize ParsingMultiSelect
MultiSelect.fn.init.call(that, element, options);
that.input.on(PASTE, that, that._paste);
},
options: {
// Assigns the name as it should appear off the kendo namespace (i.e. kendo.ui.ParsingMultiSelect).
// The jQuery plugin would be jQuery.fn.kendoParsingMultiSelect
name: "ParsingMultiSelect"
},
events: [
PASTE
],
_paste: function (e) {
alert("data pasted!");
var parsingMultiSelect = e.data,
dataValueField = parsingMultiSelect.options.dataValueField,
parsingMultiSelectDataSource = parsingMultiSelect.dataSource,
pastedData = e.originalEvent.clipboardData.getData('text'),
validValues = [];
multiSelect._close();
parsingMultiSelectDataSource.fetch().done(function () {
var dataSourceData = parsingMultiSelectDataSource.data();
var dataSourceValues = [];
if (dataSourceData instanceof kendo.data.ObservableArray) {
dataSourceValues = dataSourceData.map(function (arrayElement, index) {
return arrayElement[dataValueField];
});
}
// Convert all commas to a single space then reduce all whitespace (and consecutive)
// characters in the pasted input to a single space to get ready for splitting
pastedData = pastedData.replace(/,/g, "").replace(/\s\s+/g, " ").trim();
pastedValues = pastedData.split(" ");
// Loop through the values pasted in. If any exist in the dataSource, push them to
// the array of valid values.
$.each(pastedValues, function (index, value) {
if...