Filtering in Blazor MultiSelect Dropdown Component

17 Dec 20226 minutes to read

The MultiSelect has built-in support to filter data items when AllowFiltering is enabled. The filter operation starts as soon as you start typing characters in the MultiSelect input.

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="string[]" TItem="Country" Placeholder="Select a country" AllowFiltering="true" DataSource="@Countries">
    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>

@code{
    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
    private 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" },
        new Country() { Name = "France", Code = "FR" },
        new Country() { Name = "Finland", Code = "FI" },
        new Country() { Name = "Germany", Code = "DE" },
        new Country() { Name = "Greenland", Code = "GL" },
        new Country() { Name = "Hong Kong", Code = "HK" },
        new Country() { Name = "India", Code = "IN" },
        new Country() { Name = "Italy", Code = "IT" },
        new Country() { Name = "Japan", Code = "JP" },
        new Country() { Name = "Mexico", Code = "MX" },
        new Country() { Name = "Norway", Code = "NO" },
        new Country() { Name = "Poland", Code = "PL" },
        new Country() { Name = "Switzerland", Code = "CH" },
        new Country() { Name = "United Kingdom", Code = "GB" },
        new Country() { Name = "United States", Code = "US" },
    };
}

Custom Filtering

The MultiSelect component filter queries can be customized. You can also use your own filter libraries to filter data like Fuzzy search.

@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

<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" }
    };

    List<Country> CountriesFiltered = new List<Country>
    {
        new Country() { Name = "France", Code = "FR" },
        new Country() { Name = "Finland", Code = "FI" },
        new Country() { Name = "Germany", Code = "DE" },
        new Country() { Name = "Greenland", Code = "GL" }
    };

    private async Task OnFilter(FilteringEventArgs args)
    {
        args.PreventDefaultAction = true;
        var query = new Query().Where(new WhereFilter() { Field = "Name", Operator = "contains", value = args.Text, IgnoreCase = true });

        query = !string.IsNullOrEmpty(args.Text) ? query : new Query();

        await mulObj.FilterAsync(CountriesFiltered, query);
    }
}

Properties

AllowFiltering

When AllowFiltering property is set as true, filtering option is enabled in the component.

Filter action performs when type in search box and collect the matched item through Filtering event.

If searching character does not match, NoRecordsTemplate property value will be shown.

Click to refer the code for AllowFiltering

FilterBarPlaceholder

Accepts the value to be displayed as a watermark text on the filter bar. FilterBarPlaceholder is applicable when AllowFiltering is set as true in the checkbox mode. FilterBarPlaceholder is depends on AllowFiltering in checkbox mode.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" AllowFiltering="true" Mode="VisualMode.CheckBox" FilterBarPlaceholder="@FilterBarPlaceholder"> 
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
    };

    public string FilterBarPlaceholder { get; set; } = "Select the games";

}

Methods

FilterAsync(IEnumerable, Query, FieldSettingsModel)

To filter the data from given data source by using query.

Declaration

NOTE

public Task FilterAsync(IEnumerable dataSource, Query query = null, FieldSettingsModel fields = null)

Parameters

• dataSource -Specifies the data source.
• query - Specifies the query.
• fields - Specifies the fields.

Click to refer the code for FilterAsync