How to Implement Multicolumn Filtering with Remote Data using Blazor DropDownList Component

Implementing multicolumn filtering in a Blazor DropDownList component allows users to filter data based on multiple fields. This functionality can be particularly useful when dealing with remote data where the dropdown list needs to display and filter through complex datasets. Below is a guide on how to set up multicolumn filtering using the Syncfusion Blazor DropDownList component.

Implement Multicolumn Filtering with Remote Data

Please follow the steps below to implement the Multicolumn Filtering with Remote Data using the Blazor DropDownList Component.

Step 1: Add Namespaces

Start by including the necessary namespaces in your component:

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

Step 2: Define the DropDownList Component

Define the DropDownList component with the required properties for multicolumn filtering:

<SfDropDownList @ref="DropObj" TValue="string" Width="300px" TItem="Countries" Placeholder="e.g. Australia" PopupHeight="200px" CssClass="e-multi-column" DataSource="@Country" AllowFiltering="true">
    <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings>
    <DropDownListTemplates TItem="Countries">
        <HeaderTemplate>
            <table><tr><th>Name</th><th>Position</th></tr></table>
        </HeaderTemplate>
        <ItemTemplate>
            <table><tbody><tr>
                <td>@((context as Countries).Name)</td>
                <td>@((context as Countries).Job)</td>
            </tr></tbody></table>
        </ItemTemplate>
    </DropDownListTemplates>
    <DropDownListEvents TValue="string" TItem="Countries" Filtering="OnFiltering"></DropDownListEvents>
</SfDropDownList>

Step 3: Create the Data Model

Define the data model that represents the items in the dropdown list:

public class Countries
{
    public string Name { get; set; }
    public string Code { get; set; }
    public string Job { get; set; }
}

Step 4: Implement Filtering Logic

Implement the filtering logic to handle multicolumn filtering based on user input:

public async Task OnFiltering(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)
{
    args.PreventDefaultAction = true;
    var predicate = new List<WhereFilter>
    {
        new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "startswith", IgnoreAccent = true, IgnoreCase = true },
        new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "startswith", IgnoreAccent = true, IgnoreCase = true }
    };
    var pre = WhereFilter.Or(predicate);
    var query = new Query().Where(pre);
    await this.DropObj.FilterAsync(Country, query);
}

The above code snippet demonstrates how to filter the DropDownList based on the “Name” and “Job” columns using the provided text input. The use of predicates and the Or method effectively combines the conditions for filtering.

Sample

You can refer to the link below for a runnable sample

• Syncfusion Blazor Playground

Additional References

For further exploration and clarification, refer to the following resources:

• Syncfusion Blazor DropDownList Filtering Documentation
• FilterAsync API Documentation
• WhereFilter API Documentation

By following these steps, you can implement a robust multicolumn filtering feature in your Blazor application using the Syncfusion DropDownList component.