New to Kendo UI for jQuery? Download free 30-day trial

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

In this article