Filter DropDownList by Multiple Properties

Environment

Product	Telerik UI for ASP.NET MVC DropDownList
Progress Telerik UI for ASP.NET MVC version	Created with the 2022.2.621 version

Description

How can I filter the DropDownList data by multiple properties on the client-side?

Solution

1. Subscribe to the Filtering event.
2. Prevent the default behavior of the Filtering event.
3. Use the dataSource filter method to apply the custom filtering.

    @(Html.Kendo().DropDownList()
          .Name("dropDownList")
          .DataTextField("Text")
          .DataValueField("Value")
          .Filter(FilterType.Contains)
          .Events(e => e.Filtering("onFilter"))
          .BindTo(new List<SelectListItem>() {
              new SelectListItem() {
                  Text = "Maria Anders",
                  Value = "H120"
              },
              new SelectListItem() {
                  Text = "Ana Trujilo",
                  Value = "H220"
              },
              new SelectListItem() {
                  Text = "Antonio Moreno",
                  Value = "H320"
              }
          })
          .Template("#: data.Text # (#: data.Value #)")
          .HtmlAttributes(new { style = "width: 100%" })
    )

    <script>
        function onFilter(e){
            e.preventDefault();
            var filterValue = e.filter != undefined ? e.filter.value : ""; //get the filter value

            this.dataSource.filter({ //apply the required filter logic
              logic: "or",
              filters: [
                {
                  field: "Text",
                  operator: "contains",
                  value: filterValue
                },
                {
                  field: "Value",
                  operator: "contains",
                  value: filterValue
                }
              ]
            });
        }
    </script>  

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.