Syncfusion JavaScript Query Builder UI

SyncfusionQuery EditorsJavaScript

Create complex data filters with customizable UI components.

  • Outputs filters as structured JSON and SQL query formats.
  • Supports integration with data visualization and data manager.
  • Offers responsive design and customizable templates for UI elements.
Syncfusion logo

Prices from:

Loading...
Available in
Syncfusion Essential Studio UI Component SuiteLoading
Syncfusion Essential Studio EnterpriseLoading
Syncfusion JavaScript Query Builder UI product image
Syncfusion JavaScript Query Builder UI enables IT professionals to visually create and manage complex filter conditions for large data sets. It supports integration with data visualization controls and outputs filters in JSON and SQL formats. Its flexible template system and responsive design adapt to different devices, enhancing the data filtering experience across platforms.

Data Binding Integration

Bind the Query Builder to various local and remote data sources including JSON, OData, WCF, and RESTful services using Data Manager for efficient data fetching and filtering.

Filter Creation and Grouping

Create multiple filter conditions and logically group them with AND/OR operators, allowing complex query definitions with easy rule additions and deletions.

JSON and SQL Output Formats

Export and import filters using structured JSON, inline SQL, parameterized SQL, named parameter SQL, or Mongo query formats for flexible backend integration.

Template Customization

Customize UI elements such as fields, operators, and value inputs by incorporating controls like checkboxes, sliders, and dropdown lists through header, rule, and value templates.

Responsive and Adaptive Layout

Features a highly responsive user interface optimized for desktops, tablets, and smartphones across major platforms including iOS, Android, and Windows.

Summary View Display

Offers a summary view that displays the constructed filter in SQL format, enabling users to quickly review the query logic.

Model Binding Support

Supports model binding by allowing the assignment of component properties for field, operator, and value columns to customize behavior and appearance.

Locking and Cloning of Rules/Groups

Enable locking to prevent changes to specific filter rules or groups, and clone existing rules or groups to simplify query building.

Accessibility and Localization

Complies with WAI-ARIA and WCAG 2.0 standards, supporting screen readers, keyboard navigation, right-to-left languages, and locale-based formatting.

Product Compatibility

Review the details below to ensure this product is supported within your environment.

Component Type

  • JavaScript

JavaScript Platform

  • Vanilla JavaScript