Edit this page

Filter DropDownList by Multiple Properties

Environment

Product Progress Kendo UI DropDownList
Operating System All
Browser All
Preferred Language JavaScript

Description

How can I filter the DropDownList items by multiple properties?

Solution

  1. Prevent the default behavior of the filter event.
  2. Use the dataSource filter method to apply the custom filtering.
    <input id="customers" style="width: 100%;"/>            

    <script>
        $(document).ready(function() {
            $("#customers").kendoDropDownList({
                dataTextField: "ContactName",
                dataValueField: "CustomerID",
                filter: "contains",
                template: `<h3>Name: #: data.ContactName #</h3>
                                        <h4>ID: #: data.CustomerID #</h4>`,
                dataSource: {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "https://demos.telerik.com/kendo-ui/service/Customers",
                        }
                    }
                },
                filtering: function(ev){
                    var filterValue = ev.filter.value;
                  ev.preventDefault();

                  this.dataSource.filter({
                    logic: "or",
                    filters: [
                      {
                        field: "ContactName",
                        operator: "contains",
                        value: filterValue
                      },
                      {
                        field: "CustomerID",
                        operator: "contains",
                        value: filterValue
                      }
                    ]
                  });
                }
            });
        });
    </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy