Kendo UI Starter Template

An empty fiddle with the latest Kendo UI CSS and JS references.

by Dave Salomon

HTML

<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<select id="foo"></select>

CSS

.k-multiselect {
    position: relative;
}

.k-multiselect:after {
    content: "\25BC";
    position: absolute;
    top: 30%;
    right: 25px;
    font-size: 12px;
}

.k-multiselect.opened:after {
    content: "\25C0";
}

JavaScript

var Globals = {};

$('#foo').kendoMultiSelect({
    dataSource: ['Foo', 'Bar', 'Baz', 'Quux'],
    autoClose: false,
    open: function(e) {
        $(this.element).parent().addClass('opened');
        Globals.MultiSelectIsOpening = true;
        setTimeout(function() {
            Globals.MultiSelectIsOpening = false;
        }, 500);
    },
    close: function(e) {
        $(this.element).parent().removeClass('opened');
    }
});

$('#foo').parents('.k-multiselect').parent().on('click', '.k-multiselect', function() {
    if (!Globals.MultiSelectIsOpening) {
        $('#foo').data('kendoMultiSelect').toggle();
    }
});