JSFiddle - React, Tailwind, and code Playground

by draunkin

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>
                    <input id="Rows[0]_FirstValue" name="Rows[0].FirstValue" style="width: 280px" />

CSS

.bud-multiselect-popup.k-popup .k-list .k-item {
    vertical-align: middle;
}
.bud-multiselect-popup.k-popup .k-list .k-item input,
.bud-multiselect-popup.k-popup .k-list .k-item span {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.bud-multiselect-popup.k-popup .k-list .k-item input {
    margin: 3px;
    margin-left: 2px;
    margin-right: 6px;
}

.bud-multiselect-popup .k-state-selected,
.bud-multiselect-popup .k-list .k-state-selected {
    background: inherit;
    border-color: transparent;
    color: inherit;
}


.bud-multiselect-popup .k-list .k-state-hover,
.bud-multiselect-popup .k-list .k-state-active 
{
    color: #fff;
    background: #AFAFA7;
    background-color: #AFAFA7;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}


.bud-multiselect-summary-empty {
    /* font-style: italic; */
}

.bud-multiselect-selectAll-item.k-item,
.bud-multiselect-selectAll-item.k-item.k-state-hover,
.bud-multiselect-selectAll-item.k-item.k-state-selected {
    font-style: italic;
    /* font-weight: bold; */
    /* text-transform: uppercase; */
    border-bottom: #e0e0e0 solid 1px;
    padding-bottom: 1px; 
}

JavaScript

//MultiSelect - A user extension of KendoUI DropDownList widget.           
(function ($) {

    // shorten references to variables
    var kendo = window.kendo,
        ui = kendo.ui,
        DropDownList = ui.DropDownList,
        keys = kendo.keys,
        SELECT = "select",
        SELECTIONCHANGED = "selectionChanged",
        SELECTED = "k-state-selected",
        HIGHLIGHTED = "k-state-active",
        CHECKBOX = "bud-check-item",
        SELECTALLITEM = "bud-multiselect-selectAll-item",
        MULTISELECTPOPUP = "bud-multiselect-popup",
        EMPTYSELECTION = "bud-multiselect-summary-empty";


    var lineTemplate = '<input type="checkbox" name="#= {1} #" value="#= {0} #" class="' + CHECKBOX + '" />' +
                       '<span data-value="#= {0} #">#= {1} #</span>';



    var MultiSelectBox = DropDownList.extend({

        init: function (element, options) {

            options.template = kendo.template(kendo.format(lineTemplate, options.dataValueField, options.dataTextField));

            // base call to widget initialization
            DropDownList.fn.init.call(this, element, options);
        },

        options: {
            name: "MultiSelectBox",
            index: -1,
            showSelectAll: true,
            preSummaryCount: 1,  // number of items to show before summarising
            emptySelectionLabel: ''  // what to show when no items are selected
        },

        events: [
            SELECTIONCHANGED
        ],

        refresh: function () {

            // base call
            DropDownList.fn.refresh.call(this);

            this._updateSummary();

            $(this.popup.element).addClass(MULTISELECTPOPUP);
        },


        current: function (candidate) {
            return this._current;
        },


        open: function () {
            var that = this;

            this._removeSelectAllItem();

            this._addSelectAllItem();

            if (!that.ul[0].firstChild) {
                that._open =...