How to create a dynamic SfQueryBuilder in Blazor?

2 mins read

The Syncfusion Blazor QueryBuilder is a user interface component that allows users to create and edit filters. It can be used to generate complex filter criteria with an intuitive interface. In this article, we will discuss how to create a SfQueryBuilder with a dynamic data type in a Blazor application.

Implementation

First, ensure that the necessary Syncfusion Blazor namespace is included:

@using Syncfusion.Blazor.QueryBuilder

For dynamic types, we also include:

@using System.Dynamic

Within the Blazor component, we check if the data is loaded before rendering the SfQueryBuilder:

@if (dataLoaded)
{
  <SfQueryBuilder @ref="querybuilder" TValue="object">
    <QueryBuilderRule Condition="@BindingContext.QueryCondition" Rules="@rules"></QueryBuilderRule>
    <QueryBuilderColumns>
      @{
        foreach (var item in @BindingContext.MemberNames)
        {
          <QueryBuilderColumn Field="@item" Label="@item" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.String" Operators="@stringOperator">
          </QueryBuilderColumn>
        }
      }
    </QueryBuilderColumns>
  </SfQueryBuilder>
}

Code Explanation

SfQueryBuilder<object>: This specifies that the query builder will work with a dynamic object type.
dataLoaded: A boolean flag to check if the data is ready to be displayed.
stringOperator: A list of operators that will be available for string type columns.
BindingContext: An instance of the Context class that holds the query condition and member names.
rules: A list of RuleModel that defines the initial rules for the query builder.

The Context class is defined as follows:

public class Context : Object
{
  public string QueryCondition { get; set; }
  public List<string> MemberNames { get; set; }
}

In the OnInitializedAsync method, we initialize the BindingContext and rules:

protected async override Task OnInitializedAsync()
{
  BindingContext = new Context { QueryCondition = "and", MemberNames = new List<string>() { "AAA", "BBB", "CCC", "DDD", "EEE" } };
  rules = new List<RuleModel>()
  {
    new RuleModel { Field="AAA", Label="AAA", Type="String", Operator="equal", Value = "AAA" }
  };
  dataLoaded = true;
}

This method sets up the initial state of the query builder with a default condition and a set of member names that will be used to create columns.

Output Demo

To see the SfQueryBuilder in action, you can visit the following demo link: Syncfusion Blazor Playground - SfQueryBuilder.

Additional References

For more information on Syncfusion Blazor components and their usage, you can refer to the following resources:

By following the steps outlined in this article, you can successfully implement a dynamic SfQueryBuilder in your Blazor application, providing a powerful tool for users to create and manage complex queries with ease.

Conclusion

I hope you enjoyed learning how to create a dynamic SfQueryBuilder in Blazor.

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

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries 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)