JSFiddle - React, Tailwind, and code Playground

by lhoeppner

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.flat.min.css">
<script src="http://cdn.kendostatic.com/2013.2.626/js/kendo.all.min.js"></script>
<button id='mybutton'>Log value</button>
<select id="ms" multiple="multiple" data-placeholder="Select attendees...">
    <option>Steven White</option>
    <option>Nancy King</option>
    <option>Nancy Davolio</option>
    <option>Robert Davolio</option>
</select>

JavaScript

(function ($) {
    var ui = kendo.ui,
        MultiSelect = ui.MultiSelect;

    var originalRender = MultiSelect.fn._render;
    var originalSelected = MultiSelect.fn._selected;
    
    var CustomMultiSelect = MultiSelect.extend({
        init: function (element, options) {
            var that = this;

            MultiSelect.fn.init.call(that, element, options);
        },
        options: {
            name: 'CustomMultiSelect'
        },
        _select: function (li) {
            var that = this,
                values = that._values,
                dataItem,
                idx;

            if (!that._allowSelection()) {
                return;
            }

            if (!isNaN(li)) {
                idx = li;
            } else {
                idx = li.data("idx");
            }

            that.element[0].children[idx].selected = true;

            dataItem = that.dataSource.view()[idx];

            that.tagList.append(that.tagTemplate(dataItem));
            that._dataItems.push(dataItem);
            values.push(that._dataValue(dataItem));

            that.currentTag(null);
            that._placeholder();

            if (that._state === "filter") {
                that._state = "accept";
            }
            console.log(this.dataSource.view());
        },        
        
        _render: function (data) {
            this._selected = dummy;
            return originalRender.call(this, data);
            this._selected = originalSelected;
        }
    });

    function dummy() { return null; }
    
    ui.plugin(CustomMultiSelect);
})(jQuery);

var ms = $("#ms").kendoCustomMultiSelect().data("kendoCustomMultiSelect");

$("#mybutton").click(function () {
    console.log(ms.value());
    console.log(ms.dataItems());
});