Clear Filter in the MultiSelect When AutoClose is False
Environment
Product | Progress® Kendo UI® MultiSelect for jQuery |
Description
I want to set autoClose
option in MultiSelect to false
. In this case when I filter the data in the popup and select an item, the filter value is not cleared. How can I manually clear the filter input in the MultiSelect?
Solution
- Handle the
change
event of the MultiSelect widget. - In the event handler you can clear the text value of the input and the filter value:
<h4>Products</h4>
<select id="products"></select>
<script>
$(document).ready(function() {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "ProductName",
dataValueField: "ProductID",
autoClose: false,
filter: "contains",
change:function(e){
e.sender.wrapper.find('input').val("");
e.sender.dataSource.filter({});
},
dataSource: {
type: "odata",
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
}
});
});
</script>