How to implement filtering in Blazor DataGrid with QueryBuilder?

3 mins read

Overview

This article provides guidance on how to implement backend operations such as filtering, sorting, and paging in a Syncfusion Blazor DataGrid by using a Blazor QueryBuilder component. The operations are performed on the server-side (API implementation) to ensure efficient data handling and performance.

Prerequisites

Syncfusion Blazor components installed in your project.
A configured backend service to handle API requests.

Implementation Steps

1. Configure the DataGrid Component

First, define the SfGrid component with the necessary properties to enable filtering, sorting, and paging.

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data

<SfGrid TValue="Order" AllowFiltering="true" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel", "Search" })" AllowSorting="true" Query="Qry" AllowPaging="true">
    <SfDataManager Adaptor="Adaptors.CustomAdaptor">
        <CustomAdaptor></CustomAdaptor>
    </SfDataManager>
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
    <GridColumns>
        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" IsIdentity="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field="EmployeeID" HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

2. Integrate the QueryBuilder Component

Include the SfQueryBuilder component to allow users to create complex filter criteria.

@using Syncfusion.Blazor.QueryBuilder

<SfQueryBuilder TValue="Order">
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="OrderID" Label="Order ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="CustomerID" Label="Customer Name" Type="ColumnType.String"></QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>

3. Handle the Query Generation

Create a button that, when clicked, captures the query from the QueryBuilder and updates the DataGrid’s Query property.

@using Syncfusion.Blazor.Buttons

<SfButton OnClick="@OnClick">Click</SfButton>

@code {
    SfQueryBuilder<Order> QBObj;
    public Query Qry { get; set; }

    private void OnClick()
    {
        Qry = QBObj.GetDataManagerQuery();
    }
}

4. Implement the Custom Adaptor

Override the ReadAsync method in the CustomAdaptor.razor.cs file to execute the necessary backend operations according to the DataGrid’s request. This method will be called when the Query property of the Grid component is updated, and the updated DataSource will be reflected in the Grid component.

public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)
{
    var data = await Service.GetPeople();
    IEnumerable<Order> DataSource = (IEnumerable<Order>)data;

    // Perform searching, sorting, filtering, and paging
    DataSource = DataOperations.PerformOperations(DataSource, dm);

    int count = DataSource.Count();
    return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
}

5. Perform Operations in the Backend

The DataOperations.PerformOperations method should handle the searching, sorting, filtering, and paging based on the DataManagerRequest object.

For a live demonstration, refer to the provided demo link: Syncfusion Blazor DataGrid with QueryBuilder Demo

Additional References

Syncfusion Blazor DataGrid Documentation: DataGrid Component
Syncfusion Blazor QueryBuilder Documentation: QueryBuilder Component
Syncfusion Blazor Data Operations: Data Operations

Please note that the code snippets provided in this article are for guidance purposes and may require adjustments to work within your specific project context.

Conclusion

We hope you enjoyed learning how to implement filtering in the Blazor DataGrid with QueryBuilder.

You can refer to our Blazor QueryBuilder feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor QueryBuilder example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor QueryBuilder and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)