How to implement custom filtering in Blazor DropDownList with multiple fields using predicate?

When implementing Blazor DropDownList feature in your application, you may encounter a scenario where you need to filter the suggestions based on multiple fields. This article will guide you through the process of custom filtering using the DataManager predicate to filter by both text and value fields.

Custom Filtering with DataManager Predicate

To achieve custom filtering, we can utilize the DataManager predicate to filter the dropdown list by specific fields. In this example, we will filter by CustomerID and ShipCountry.

Below is the code snippet that demonstrates how to set up the DropDownList component with custom filtering:

<SfDropDownList @ref=ddlObj TValue="string" AllowFiltering="true" TItem="OrderDetails" Placeholder="Select a customer" Query="@Query">
    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>
    <DropDownListFieldSettings Text="CustomerID" Value="ShipCountry"></DropDownListFieldSettings>
    <DropDownListEvents TValue="string" TItem="OrderDetails" Filtering="CustomFiltering"></DropDownListEvents>
</SfDropDownList>
 
@code {
    SfDropDownList<string, OrderDetails> ddlObj { get; set; }
 
    async Task CustomFiltering(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)
    {
        args.PreventDefaultAction = true;
        var predicate = new List<WhereFilter>
      {
        new WhereFilter { Condition = "or", Field = "CustomerID", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true },
        new WhereFilter { Condition = "or", Field = "ShipCountry", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }
      };
        var query = new Query().Where(WhereFilter.Or(predicate));
        query = !string.IsNullOrEmpty(args.Text) ? query : new Query();
        await ddlObj.FilterAsync(this.ddlObj.DataSource, query);
    }
    public Query Query = new Query().Select(new List<string> { "CustomerID", "ShipCountry" }).Take(6).RequiresCount();
 
    public class OrderDetails
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public int? EmployeeID { get; set; }
        public double? Freight { get; set; }
        public string ShipCity { get; set; }
        public bool Verified { get; set; }
        public DateTime? OrderDate { get; set; }
        public string ShipName { get; set; }
        public string ShipCountry { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipAddress { get; set; }
    }
}

Sample

For further reference and to see the custom filtering in action, you can check out the provided sample:

• Syncfusion Blazor DropDownList Playground Sample

By following the steps outlined in this article, you can successfully implement custom filtering in the Syncfusion Blazor DropDownList component to enhance the user experience in your web applications.