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

Filtering a 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 when working with the Telerik UI for ASP.NET MVC 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.
    @(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.

More ASP.NET MVC DropDownList Resources

See Also

In this article