jquery - kendoui multiselect single tag mode max selections can't unselect -
when use kendoui multiselect in single tag mode maxselection, if hit max selections can't deselect items. there work around this?
http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect
i updated snippet
http://dojo.telerik.com/ovasa
to
<!doctype html> <html> <head> <meta charset="utf-8"> <title>kendo ui snippet</title> <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://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script> </head> <body> <select id="multiselect" multiple="multiple"> <option>item1</option> <option>item2</option> <option>item3</option> <option>item4</option> </select> <script> $("#multiselect").kendomultiselect({ tagmode: "single", maxselecteditems: 3 //only 3 or less items selected }); </script> </body> </html>
and once select 3 items can't deselect items.
after 2 hours , here want demo
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)" }); } });
Comments
Post a Comment