Syncfusion.Blazor.QueryBuilder

Syncfusion® Blazor QueryBuilder Component

The Syncfusion® Blazor QueryBuilder Component enables building and editing complex filter conditions with a visual interface. It generates structured JSON filters that convert to SQL queries, supports AND/OR logic grouping, and integrates seamlessly with data grids and charts for advanced data filtering in Blazor applications.

Key features

• Visual Query Builder – Intuitive UI for building complex filter conditions
• Multiple Condition Types – Support for various operators (equals, contains, between, etc.)
• Grouping Logic – Combine conditions with AND/OR operators
• JSON Query Output – Structured JSON filters for easy SQL query generation
• Customizable Fields – Define filterable columns and data types
• Template Support – Custom templates for values, operators, and conditions
• Data Visualization Integration – Works with DataGrid, Charts, and other components
• Keyboard Navigation – Full accessibility support

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

• Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

• Add Blazor QueryBuilder component to your Razor page.

<SfQueryBuilder TValue="EmployeeDetails">
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="TitleOfCourtesy" Label="Title of Courtesy" Type="ColumnType.Boolean" Values="Values"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Title" Label="Title" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="City" Label="City" Type="ColumnType.String"></QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>

@code {
    private string[] Values = new string[] { "Mr.", "Mrs." };
    public class EmployeeDetails
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public bool TitleOfCourtesy { get; set; }
        public string Title { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
    }
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• API Reference
• Feature Overview
• Live Demos
• Video Tutorials

Support

• Support Portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a License
• Start a 30-day free trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

• Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

• Mobile: Flutter | UWP | JavaScript

• Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

[e-mail] | Toll Free: 1-888-9-DOTNET