Skip to content

Commit 158e049

Browse files
Ashwini-SF5049Ashwini-SF5049
committed
983104: Updated the UG Documentation for querybuilder
1 parent afa68a0 commit 158e049

23 files changed

+189
-177
lines changed

‎blazor/query-builder/accessibility.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ layout: post
33
title: Accessibility in Blazor Query Builder component | Syncfusion
44
description: Checkout and learn here all about Accessibility in Syncfusion Blazor ContextMenu component and more.
55
platform: Blazor
6-
control: Context Menu
6+
control: QueryBuilder
77
documentation: ug
88
---
99

1010
# Accessibility in Blazor Query Builder component
1111

12-
The Blazor Query Builder component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
12+
The Blazor Query Builder follows widely accepted accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
1313

14-
The accessibility compliance for the Blazor Query Builder component is outlined below.
14+
The accessibility compliance for the Blazor Query Builder is outlined below.
1515

1616
| Accessibility Criteria | Compatibility |
1717
| -- | -- |
@@ -38,27 +38,27 @@ The accessibility compliance for the Blazor Query Builder component is outlined
3838

3939
## WAI-ARIA attributes
4040

41-
WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.
41+
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components. ARIA provides additional semantics to describe role, state, and functionality.
4242

4343
The following list of ARIA attributes is used in Blazor Query Builder.
4444

4545
| Attributes | Purpose |
4646
| --- | --- |
47-
| `role` | Indicates the query builder component. |
47+
| `role` | Identifies the Query Builder region and roles on interactive controls to assist screen readers. |
4848

4949
## Keyboard interaction
5050

51-
The Blazor Query Builder component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Query Builder component.
51+
The Blazor Query Builder follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported.
5252

5353
| Windows | Mac | Actions |
5454
| --- | --- | --- |
55-
| <kbd>Tab</kbd> / <kbd>Shift + Tab</kbd> | <kbd>Tab</kbd> / <kbd>⇧</kbd> + <kbd>Tab</kbd> | To focus the next item in the rule. |
55+
| <kbd>Tab</kbd> / <kbd>Shift + Tab</kbd> | <kbd>Tab</kbd> / <kbd>⇧</kbd> + <kbd>Tab</kbd> | Move focus between fields, operators, values, and action buttons within a rule. |
5656

5757
## Ensuring accessibility
5858

59-
The Blazor Query Builder component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
59+
The Blazor Query Builder’s accessibility levels are verified using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
6060

61-
The accessibility compliance of the Blazor Query Builder component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/querybuilder) in a new window to evaluate the accessibility of the Blazor Query Builder component with accessibility tools.
61+
The accessibility compliance of the Blazor Query Builder is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/querybuilder) in a new window to evaluate the accessibility of the Blazor Query Builder with accessibility tools.
6262

6363
{% previewsample "https://ej2.syncfusion.com/accessibility/query-builder.html" %}
6464

‎blazor/query-builder/clone-group-rule.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ documentation: ug
99

1010
# Clone Group/ Rule in Blazor QueryBuilder Component
1111

12-
The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) functionality extends to cloning both individual rules and entire groups. Utilizing the Clone options will generate an exact duplicate of a rule or group adjacent to the original one. This feature enables users to replicate complex query structures effortlessly. The [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) function offers users the ability to toggle the visibility of these cloning buttons, providing convenient control over the cloning process within the Query Builder interface.
12+
The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports cloning both individual rules and entire groups. Cloning creates an exact duplicate of the selected rule or group adjacent to the original, making it quick to replicate complex query structures. The [`ShowButtons`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) configuration controls the visibility of cloning buttons in the user interface for convenient, on-demand access.
1313

14-
You can `clone` groups and rules by interacting through the user interface and methods.
14+
Cloning is available via the user interface and programmatically:
15+
16+
* Use the [`CloneGroup`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneGroup_System_String_System_Int32_) method to clone a group. The first parameter is the existing group’s ID, and the second is the insert index within its parent.
17+
* Use the [`CloneRule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneRule_System_String_System_Int32_) method to clone a rule.
1518

16-
* Use the [CloneGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneGroup_System_String_System_Int32_) method to clone group.
17-
* Use [CloneRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneRule_System_String_System_Int32_) method to clone rule.
1819

1920
```cshtml
2021
@using Syncfusion.Blazor.QueryBuilder
@@ -98,6 +99,6 @@ You can `clone` groups and rules by interacting through the user interface and m
9899
99100
```
100101

101-
![Clone Group/Rule in Blazor QueryBuilder](./images/clone-group-rule.png)
102+
![Cloning a group and rule in Blazor Query Builder](./images/clone-group-rule.png)
102103

103-
N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder.
104+
N> Ensure that the IDs passed to `CloneGroup` and `CloneRule` refer to existing items in the current model. The cloning buttons can be shown or hidden via `QueryBuilderShowButtons`. You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to learn how to render and configure the Query Builder.

‎blazor/query-builder/columns-binding.md‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ documentation: ug
99

1010
# Columns in Blazor QueryBuilder Component
1111

12-
The column definitions are used as the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DataSource) schema in the Query Builder. This plays a vital role in rendering column values. The Query Builder operations such as create or delete conditions and create or delete groups are performed based on the column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) property of the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) is necessary to map the data source values in the query builder columns.
12+
Column definitions provide the schema used by the Query Builder’s [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DataSource). They determine how field values are rendered and how users create or delete conditions and groups. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) property in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) is required to map data source fields to Query Builder columns.
1313

14-
N> If the column field is not specified in the data source, the column values will be empty.
14+
N> If the column field is not present in the data source, the column renders with empty values.
1515

1616
## Auto generation
1717

18-
The [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) are automatically generated from the datasource when the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) declaration is empty or undefined while initializing the query builder. All the columns in the `DataSource` are bound as the query builder columns.
18+
[Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) are automatically generated from the data source when the `Columns` declaration is empty or not provided at initialization. In this case, all fields in the `DataSource` are bound as Query Builder columns.
1919

20-
N> When columns are auto-generated, the column type will be determined from the first record of the data source.
20+
N> When columns are auto-generated, the column type is inferred from the first record of the data source.
2121

2222
```cshtml
2323
@using Syncfusion.Blazor.QueryBuilder
@@ -49,13 +49,13 @@ N> When columns are auto-generated, the column type will be determined from the
4949

5050
## Labels
5151

52-
By default, the column label is displayed from the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) value. To override the default label, you have to define the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Label) value.
52+
By default, the column label is derived from the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) value. To override the default, set the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Label) property to a display-friendly name (for example, a localized string).
5353

54-
N> If both the field and label are not defined in the column, the column renders with `empty` text.
54+
N> If both the field and label are not defined for a column, it renders with `empty` text.
5555

5656
## Operators
5757

58-
The operator for a column can be defined in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) property. You can directly set the custom operators using [OperatorsModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.OperatorsModel.html) in columns `Operator` property. The available operators and its supported data types are:
58+
Define the allowed operators for a column in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) collection. Custom operator sets can be configured using the column’s [OperatorsModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.OperatorsModel.html). The following built-in operators and their supported data types are available:
5959

6060
| Operators | Description | Supported Types |
6161
| ------------ | ----------------------- | ------------------ |
@@ -65,26 +65,26 @@ The operator for a column can be defined in the [Columns](https://help.syncfusio
6565
| notendswith | Checks whether the value does not end with the specified value. | String |
6666
| contains | Checks whether the value contains the specified value. | String |
6767
| notcontains | Checks whether the value does not include the specified value. | String |
68-
| equal | Checks whether the value is equal to the specified value. | String, Number ,Date, Boolean |
68+
| equal | Checks whether the value is equal to the specified value. | String, Number, Date, Boolean |
6969
| notequal | Checks for values not equal to the specified value. | String, Number, Date, Boolean |
7070
| greaterthan | Checks whether the value is greater than the specified value. | Date, Number |
7171
| greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Date, Number |
72-
| lessthan | Checks whether the value is lesser than the specified value.| Date, Number |
73-
| lessthanorequal | Checks whether the value is lesser than or equal to the specified value. | Date, Number |
74-
| between | Checks whether the value is between the two-specific value. | Date, Number |
75-
| notbetween | Checks whether the value is not between the two-specific value. | Date, Number |
76-
| in | Checks whether the value is one of the specific values. | String, Number |
77-
| notin | Checks whether the value is not in the specific values. | String, Number |
72+
| lessthan | Checks whether the value is less than the specified value. | Date, Number |
73+
| lessthanorequal | Checks whether the value is less than or equal to the specified value. | Date, Number |
74+
| between | Checks whether the value is between two specific values. | Date, Number |
75+
| notbetween | Checks whether the value is not between two specific values. | Date, Number |
76+
| in | Checks whether the value is one of the specified values. | String, Number |
77+
| notin | Checks whether the value is not one of the specified values. | String, Number |
7878
| isempty | Checks whether the value is empty. | String |
7979
| isnotempty | Checks whether the value is not empty. | String |
8080
| isnull | Checks whether the value is null. | String, Number |
8181
| isnotnull | Checks whether the value is not null. | String, Number |
8282

8383
## Step
8484

85-
The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows to set the step values to the number fields. It allows to increase or decrease the numeric value with the predefined Step value using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Step) property.
85+
The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows setting step values for number fields. Use the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Step) property to control the increment/decrement applied by the numeric input.
8686

87-
N> By default the Step value is 1.
87+
N> By default, the `Step` value is 1.
8888

8989
```cshtml
9090
@using Syncfusion.Blazor.QueryBuilder
@@ -112,15 +112,15 @@ N> By default the Step value is 1.
112112
113113
```
114114

115-
N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
115+
N> You can also explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to learn how to render and configure the Query Builder.
116116

117117
## Format
118118

119-
The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) formats date and number values. Use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Format) property, to format date and number values.
119+
The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports formatting of date and number values. Use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Format) property to apply date and number formats.
120120

121-
N> From the standard numeric format, you can use the numeric related format specifiers such as n,p, and c in the format property. By using these format specifiers, you can achieve the percentage and currency textbox behavior.
121+
N> Standard numeric format specifiers such as `n`, `p`, and `c` can be used in the `Format` property to display number, percentage, and currency inputs respectively. Formatting is culture-aware.
122122

123-
In the following sample, the date field is formatted as MM/yyyy/dd and the number field is formatted as currency type.
123+
In the following sample, the date field is formatted as `MM-yyyy-dd` and the number field is formatted as currency.
124124

125125
```cshtml
126126
@using Syncfusion.Blazor.QueryBuilder
@@ -161,9 +161,9 @@ N> You can also explore our [Blazor Query Builder example](https://blazor.syncfu
161161

162162
## Validations
163163

164-
Validation allows to validate the conditions and it display errors for invalid fields. To enable validation in the Query Builder, set [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) to true. Column fields are validated after setting the [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) property to true.
164+
Validation enables checking of rule inputs and displays errors for invalid fields. To enable validation, set [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) to `true`. After enabling, fields are validated based on the configured rules and column settings.
165165

166-
N> You can set `Min` and `Max` values for number values.
166+
N> You can set `Min` and `Max` values for numeric fields using `QueryBuilderColumnValidation`.
167167

168168
```cshtml
169169
@using Syncfusion.Blazor.QueryBuilder
@@ -197,4 +197,4 @@ N> You can set `Min` and `Max` values for number values.
197197
198198
```
199199

200-
![Validation in Blazor QueryBuilder](./images/blazor-querybuilder-validation.png)
200+
![Validation in Blazor QueryBuilder](./images/blazor-querybuilder-validation.png)

0 commit comments

Comments
 (0)