How to implement custom filtering in Blazor MultiSelect with multiple fields using predicate?
When implementing Blazor MultiSelect 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 Name and Code.
Below is the code snippet that demonstrates how to set up the MultiSelect component with custom filtering:
<SfMultiSelect TValue="string[]" @ref="mulObj" TItem="Country" Placeholder="e.g. Australia" DataSource="@Countries" AllowFiltering="true">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
<MultiSelectEvents TValue="string[]" TItem="Country" Filtering="OnFilter"></MultiSelectEvents>
</SfMultiSelect>
@code {
SfMultiSelect<string[], Country> mulObj { get; set; }
public class Country
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Country> Countries = new List<Country>
{
new Country() { Name = "Australia", Code = "AU" },
new Country() { Name = "Bermuda", Code = "BM" },
new Country() { Name = "Canada", Code = "CA" },
new Country() { Name = "Cameroon", Code = "CM" },
new Country() { Name = "Denmark", Code = "DK" }
};
private async Task OnFilter(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)
{
args.PreventDefaultAction = true;
var predicate = new List<WhereFilter>
{
new WhereFilter { Condition = "or", Field = "Name", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true },
new WhereFilter { Condition = "or", Field = "Code", 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 mulObj.FilterAsync(this.mulObj.DataSource, query);
}
}
Sample
For further reference and to see the custom filtering in action, you can check out the provided sample:
By following the steps outlined in this article, you can successfully implement custom filtering in the Syncfusion Blazor MultiSelect component to enhance the user experience in your web applications.
