JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<select id="multiselecta" multiple="multiple">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option>Item4</option>
</select>
JavaScript
var maxSelectedItems = 3 ;
$("#multiselecta").kendoMultiSelect(
{
tagMode: "single",
maxSelectedItems: maxSelectedItems
});
var multiselect = $("#multiselecta").data("kendoMultiSelect");
$("#multiselecta").parent().find(".k-multiselect-wrap.k-floatwrap").on("click",function(e)
{
if(multiselect.dataItems().length >= maxSelectedItems)
{
$("#multiselecta_listbox li").on("click",function()
{
if(multiselect.dataItems().length >= maxSelectedItems)
{
var index = $(this).attr("data-offset-index");
var currentVal = multiselect.listView._view[index].item.value;
if($(this).hasClass("k-state-selected"))
{
var indexArray = multiselect.listView._values.indexOf(currentVal);
if (indexArray > -1)
{
multiselect.listView._values.splice(indexArray,1);
}
}
multiselect.close();
multiselect.refresh();
}
});
$(".k-animation-container").css(
{
"display":"block",
"overflow":"visible"
}).find("#multiselecta-list").css(
{
"display":"block",
"transform": "translateY(0px)"
});
}
});