New to Telerik UI for ASP.NET Core? Download free 30-day trial

Filtering a DropDownList by Multiple Properties


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


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?


  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.
          .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%" })
        function onFilter(e){
            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

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

More ASP.NET Core DropDownList Resources

See Also

In this article