JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
Select ID's binding fine:<br />
<select data-role="multiselect" data-bind="source: selectData, value: selectedIDs" data-text-field="Name" data-value-field="ID"></select>
<br />Select ID's not binding to extended:<br />
<select data-role="multiselectcustom" data-bind="source: selectData, value: selectedIDs" data-text-field="Name" data-value-field="ID"></select>
<br /><br />
<small>*Strange but an integer, not array, binds fine to extended</small>
JavaScript
//EXTEND MULTISELECT WITH NOTHING MUCH
kendo.ui.plugin(kendo.ui.MultiSelect.extend({
init: function (element, options) {
kendo.ui.MultiSelect.fn.init.call(this, element, options);
},
options: {
name: 'MultiSelectCustom'
}
}));
kendo.data.binders.widget.multiselectcustom = kendo.data.binders.widget.multiselect;
var viewModel = kendo.observable({
selectedIDs: [ 1, 3 ],
selectData: [{
Name: 'Bill Smith',
ID: 1
}, {
Name: 'Jennifer Jones',
ID: 2
}, {
Name: 'Tim Philips',
ID: 3
}]
});
kendo.bind('body', viewModel);