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

Filter DropDownList by Multiple Properties


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


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


  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.

In this article