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
- Subscribe to the
Filteringevent. - Prevent the default behavior of the
Filteringevent. - Use the dataSource
filtermethod 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.