Filtering a DropDownList by Multiple Properties

Environment

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

Description

How can I filter the DropDownList data by multiple properties on the client-side when working with the Telerik UI for ASP.NET Core components?

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.

Index.cshtml

    @(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.js

    <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.

More ASP.NET Core DropDownList Resources

• ASP.NET Core DropDownList Documentation

• ASP.NET Core DropDownList Demos

• ASP.NET Core DropDownList Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Filtering a DropDownList by Multiple Properties
• Client-Side API Reference of the DropDownList for ASP.NET Core
• Server-Side API Reference of the DropDownList for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base