Blazor Query Builder Documentation Overview

24 Sep 20269 minutes to read

Introduction to Syncfusion Blazor Query Builder

The Blazor Query Builder is a powerful and feature-rich UI component designed for creating and editing filter conditions at runtime with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including nested groups with AND/OR connectors, a rich set of operators through rule editing, value templates, and seamless import and export of queries across JSON, SQL, and MongoDB formats. Built for scalability, it enables developers to create responsive, data filtering experiences for reports, search interfaces, and dynamic query applications with ease.

Common use cases

The Blazor Query Builder is ideal for a wide range of business scenarios:

Use Case Description Key Features
Advanced Search Interfaces Let users build complex search conditions without writing code Filtering, Operators, Templates
Report Filtering Filter datasets for reports and dashboards at runtime Filtering, Import and Export
Rule Engine Configuration Build business rule editors for workflow conditions Nested Groups, Clone Group/Rule
Query Migration & Sharing Move queries between UI and database representations Importing and Exporting
Data Exploration Tools Explore and slice enterprise data interactively Data Binding, Drag and Drop
Restricted Rule Editing Prevent users from changing critical conditions Lock Group/Rule

Data connectivity

The Blazor Query Builder enables multiple data binding approaches, offering flexibility in choosing the right strategy for different application architectures. The Query Builder can work with in-memory collections for defining columns, or connect to remote services so users can build conditions against real data.

Data Binding Approaches

  • List Binding - Bind the Query Builder to local collections to auto-generate columns and enable condition evaluation on the bound data.
  • Remote Data - Connect to web services, REST APIs, OData, and Web API endpoints for scalable applications.
  • Complex Data Binding - Bind nested and complex object structures with mapped fields.

Column Configuration

Feature Purpose Key Benefit
Auto generation Generate columns automatically from the bound data source Rapid setup
Labels Display friendly names for fields Readable conditions
Operators Control which operators are available per column Tailored filtering logic
Step Set increment steps for numeric value editors Precise numeric input
Format Apply formats to date and number columns Consistent value display
Validations Enforce required and range rules on values Correct data entry

Rules & groups

The Blazor Query Builder provides comprehensive capabilities for composing conditions as rules and nested groups:

Feature Purpose Key Benefit
Filtering Apply built-in and value filtering to the bound data Immediate result feedback
Separate Connector Render vertically stacked AND/OR connectors between rules Distinct group connectors
Lock Group/Rule Disable editing of individual rules or entire groups while keeping them in evaluation Protected critical conditions
Clone Group/Rule Duplicate existing rules or groups Fast condition reuse
Drag and Drop Rearrange rules and groups by dragging Visual query structuring

Templates

The Blazor Query Builder offers extensive customization options for tailoring the editing experience:

Feature Purpose Key Benefit
Value Template Replace value editors with custom Blazor components Custom value input
Column Template Customize the field column rendering Branded field selectors
Header Template Add custom content to the group header Rich group headers

Importing & exporting

The Blazor Query Builder provides comprehensive interoperability for moving queries between the UI and other formats:

Feature Purpose Key Benefit
Importing from JSON Object Load rules from JSON Integration with saved filters
Importing from SQL Query Parse SQL WHERE clauses into rules Database interop
Importing from MongoDB Query Parse MongoDB query documents into rules NoSQL interop
Exporting to JSON Object Serialize the current rules to JSON Persisted filters
Exporting to SQL Query Produce SQL WHERE clauses from rules Direct database use
Exporting to MongoDB Query Produce MongoDB query documents from rules NoSQL pipeline use

Globalization & accessibility

The Blazor Query Builder is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards:

Advanced features

The Blazor Query Builder includes sophisticated capabilities designed for complex enterprise scenarios:

Feature Purpose Use Case Key Benefit
Events Handle rule change, value change, and drag-and-drop events Custom workflows and integrations Deep integration points
Style and Appearance Customize background, containers, connectors, and buttons Themed query builders Complete visual control
Change Display Mode Switch between horizontal and vertical layouts Space-constrained layouts Flexible orientation
Readonly Render a non-editable view of the conditions Review and sharing scenarios Safe display mode
Restrict the Groups Limit the number of nested groups Controlled complexity Guarded query structure
Show Not Operator Enable the NOT condition between rules Negated conditions Advanced logic support

System requirements

The Blazor Query Builder works with:

  • Blazor Version: .NET 8.0 or higher
  • Hosting Models: Blazor Server, Blazor WebAssembly, Blazor Web App
  • Browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile: iOS Safari, Android Chrome

Getting Started:

Popular Features:

Support & Resources