Clear Filter on Opening the ComboBox

Environment

Product	Progress® Kendo UI® ComboBox for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I clear the filter of the Kendo UI ComboBox on opening the widget?

Solution

The following example demonstrates how to achieve the desired scenario.

  <div id="example">
    <div class="demo-section k-header">
      <h4>Products</h4>
      <input id="products" style="width: 400px" />
    </div>
    <script>
      $(document).ready(function() {
        $("#products").kendoComboBox({
          placeholder: "Select product",
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          filter: "contains",
          autoBind: false,
          minLength: 3,
          dataSource: {
            type: "odata-v4",
            serverFiltering: true,
            transport: {
              read: {
                url: "https://demos.telerik.com/service/v2/odata/Products",
              }
            }
          },
          open: function() {
            var filters = this.dataSource.filter();

            if (filters) {
              //clear applied filters
              this.dataSource.filter({});
            }
          }
        });
      });
    </script>

    <style scoped>
      .demo-section {
        width: 400px;
      }
    </style>
  </div>

See Also

• ComboBox JavaScript API Reference
• Bypass Boundary Detection
• Configure Deferred Value Binding
• Implement Cascading with Local Data
• Make Visible Input Readonly
• Open ComboBox When onFocus is Triggered
• Prevent Adding Custom Values
• Underline Matched Search