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

1. Handle the change event of the MultiSelect widget.
2. 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>

See Also

• MultiSelect JavaScript API Reference
• Cascade from DropDownList
• Filter Values in Widgets Sharing the Same Data
• Preselect Items Using MVVM Binding
• Select All Values with Single Selection
• Use MultiSelect with Bootstrap Modal Window
• Wire Blur Event of the Filter Input