You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/treegrid/accessibility.md
+23-23Lines changed: 23 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
1
---
2
2
layout: post
3
3
title: Accessibility in Blazor TreeGrid Component | Syncfusion
4
-
description: Checkout and learn here all about accessibility in Syncfusion Blazor TreeGrid component and much more.
4
+
description: Learn how the Syncfusion Blazor TreeGrid component complies with accessibility standards, including keyboard navigation and ARIA support.
5
5
platform: Blazor
6
-
control: Tree Grid
6
+
control: TreeGrid
7
7
documentation: ug
8
8
---
9
9
10
-
# Accessibility in Blazor TreeGrid Component
10
+
# Accessibility in Syncfusion Blazor TreeGrid Component
11
11
12
-
The Blazor Tree Grid 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 TreeGrid component adheres to widely recognized 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). These standards are commonly used to evaluate accessibility compliance.
13
13
14
-
The accessibility compliance for the Blazor Tree Grid component is outlined below.
14
+
The accessibility compliance for the Blazor TreeGrid component is outlined below.
15
15
16
16
| Accessibility Criteria | Compatibility |
17
17
| -- | -- |
@@ -38,23 +38,23 @@ The accessibility compliance for the Blazor Tree Grid component is outlined belo
38
38
39
39
## WAI-ARIA
40
40
41
-
The Blazor Tree Grid component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Tree Grid component:
41
+
The Blazor TreeGrid component follows [WAI-ARIA]([https://www.w3.orgpg/patterns/treegrid/](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)) patterns to ensure accessibility. The following ARIA attributes are used:
42
42
43
-
|Attributes| Purpose |
44
-
|---|---|
45
-
|`role=treegrid`|Used to convey a significant and contextual message to the user. |
46
-
|`aria-selected`|Accurately reflect the selection state, whether it's single-select or multi-select. |
47
-
|`aria-expanded`|It can be used to show whether a node is expanded or collapsed, making it easier for screen reader users to navigate and understand the hierarchy. |
48
-
|`aria-sort`|Indicate the current sorting order of a table column for users with disabilities, facilitating accessible data presentation and interaction. |
49
-
|`aria-busy`| Loading state to improve accessibility for users, particularly those relying on screen readers. |
50
-
|`aria-invalid`|To indicate whether the user's input in a form field is valid or invalid, aiding users, including those with disabilities, in understanding and correcting their input. |
51
-
|`aria-grabbed`| Provides accessibility information for users interacting with draggable elements |
52
-
|`aria-owns`|Establishing relationships between an element and the elements it owns or controls. |
53
-
|`aria-label`| Provides an accessible name for the close icon. |
43
+
|Attribute| Purpose |
44
+
|----------|---------|
45
+
|`role=treegrid`|Conveys a contextual message to the user. |
46
+
|`aria-selected`|Reflects the selection state (single or multi-select). |
47
+
|`aria-expanded`|Indicates whether a node is expanded or collapsed. |
48
+
|`aria-sort`|Shows the current sorting order of a column. |
49
+
|`aria-busy`|Indicates loading state for screen reader users. |
50
+
|`aria-invalid`|Highlights invalid input in form fields. |
51
+
|`aria-grabbed`| Provides accessibility for draggable elements.|
52
+
|`aria-owns`|Establishes relationships between elements. |
53
+
|`aria-label`| Provides an accessible name for icons or controls. |
54
54
55
-
## Keyboard interaction
55
+
## Keyboard Interaction
56
56
57
-
The Blazor Tree Grid component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)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 Tree Grid component.
57
+
The Blazor TreeGrid component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)guidelines, enabling efficient navigation for users relying on assistive technologies (AT) or keyboard-only input. The following keyboard shortcuts are supported by the Blazor TreeGrid component.
58
58
59
59
| Windows | Mac | Description |
60
60
| ----- | ----- | ---- |
@@ -91,13 +91,13 @@ The Blazor Tree Grid component followed the [keyboard interaction](https://www.w
91
91
|<kbd>Ctrl + DownArrow</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Expands all the visible groups.|
|<kbd>Ctrl + UpArrow</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Collapses all the visible groups.|
94
-
|<kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Tree Grid.|
94
+
|<kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the TreeGrid.|
95
95
96
-
## Ensuring accessibility
96
+
## Ensuring Accessibility
97
97
98
-
The Blazor Tree Grid component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
98
+
Accessibility levels in the Blazor TreeGrid component are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. The accessibility compliance can be evaluated using the following sample:
99
99
100
-
The accessibility compliance of the Blazor Tree Grid component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/treegrid) in a new window to evaluate the accessibility of the Blazor Tree Grid component with accessibility tools.
100
+
Open the [sample](https://syncfusion.com/accessibility/treegrid) in a new window to test accessibility features.
Copy file name to clipboardExpand all lines: blazor/treegrid/adaptive-layout.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,19 +1,19 @@
1
1
---
2
2
layout: post
3
3
title: Adaptive Layout in Blazor TreeGrid Component | Syncfusion
4
-
description: The Blazor TreeGrid will render the adaptive UI filter, sort, and edit dialogs in full screen for a better user experience.
4
+
description: The Blazor TreeGrid renders adaptive UI filter, sort, and edit dialogs in full screen for improved user experience.
5
5
platform: Blazor
6
-
control: Tree Grid
6
+
control: TreeGrid
7
7
documentation: ug
8
8
---
9
9
10
-
# Adaptive UI Layout in Blazor Tree Grid Component
10
+
# Adaptive UI Layout in Syncfusion Blazor TreeGrid Component
11
11
12
-
The Tree Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, and edit dialogs adaptively and have an option to render the Tree Grid row elements in the vertical direction.
12
+
The TreeGrid user interface (UI) is designed to provide an optimal viewing experience and enhance usability on small screens. It renders filter, sort, and edit dialogs adaptively and includes an option to display TreeGrid row elements in a vertical layout.
13
13
14
-
## Render adaptive dialog
14
+
## Render Adaptive Dialog
15
15
16
-
To render adaptive dialog UI in the Tree Grid, set the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableAdaptiveUI) property to true. The Tree Grid will render the filter, sort, and edit dialogs in full screen for a better user experience.
16
+
To enable adaptive dialog UI in the TreeGrid, set the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableAdaptiveUI) property to `true`.renders the filter, sort, and edit dialogs in full screen for improved accessibility and interaction.
17
17
18
18
```csharp
19
19
@@ -56,4 +56,4 @@ To render adaptive dialog UI in the Tree Grid, set the [EnableAdaptiveUI](https:
Copy file name to clipboardExpand all lines: blazor/treegrid/aggregate.md
+20-21Lines changed: 20 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,39 +1,38 @@
1
1
---
2
2
layout: post
3
3
title: Aggregate in Blazor TreeGrid Component | Syncfusion
4
-
description: Checkout and learn here all about aggregate in Syncfusion Blazor TreeGrid component and much more details.
4
+
description: Learn how to use aggregate functionality in the Syncfusion Blazor TreeGrid component, including sum, average, min, max, and custom aggregates.
5
5
platform: Blazor
6
-
control: Tree Grid
6
+
control: TreeGrid
7
7
documentation: ug
8
8
---
9
9
10
-
# Aggregate in Blazor TreeGrid Component
10
+
# Aggregate in Syncfusion Blazor TreeGrid Component
11
11
12
-
To know about Aggregate in Blazor tree grid Component, you can check this video.
12
+
To learn about aggregate functionality in the Blazor TreeGrid component, refer to this video:
Aggregate values are displayed in the Tree Grid footer and in parent row footer for child row aggregate values. It can be configured through [TreeGridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html) property. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_Type) are the minimum properties required to represent an aggregate column.
17
+
Aggregate values are displayed in the TreeGrid footer and in parent row footers for child row aggregate values. This can be configured using the [TreeGridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html) property. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_Type) are the minimum required properties to define an aggregate column.
18
18
19
-
By default, the aggregate value can be displayed in the Tree Grid footer, and footer of child rows. To show the aggregate value in one of the cells, use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_FooterTemplate).
19
+
To display aggregate values in a specific cell, use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_FooterTemplate).
20
20
21
-
## Built-in aggregate types
21
+
## Built-in Aggregate Types
22
22
23
-
The aggregate type should be specified in the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_Type) property to configure an aggregate column.
23
+
Specify the aggregate type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_Type) property. Supported types include:
24
24
25
-
The built-in aggregates are,
26
-
* Sum
27
-
* Average
28
-
* Min
29
-
* Max
30
-
* Count
31
-
* Truecount
32
-
* Falsecount
25
+
- Sum
26
+
- Average
27
+
- Min
28
+
- Max
29
+
- Count
30
+
- TrueCount
31
+
- FalseCount
33
32
34
-
## Footer aggregate
33
+
## Footer Aggregate
35
34
36
-
Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_FooterTemplate) to render the aggregate value in footer cells.
35
+
Footer aggregate values are calculated across all rows and displayed in the footer cells. Use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_FooterTemplate) to render these values.
N> The aggregate values must be accessed inside the template using their corresponding `AggregateType`.
133
132
134
-
## How to format aggregate value
133
+
## How to Format Aggregate Value
135
134
136
-
The aggregate value result can be formatted by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_Format) property.
135
+
Aggregate results can be formatted using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridAggregateColumn_Format) property.
137
136
138
137
{% tabs %}
139
138
@@ -229,4 +228,4 @@ To calculate the aggregate value with your own aggregate functions, use the cust
229
228
230
229
## Limitations
231
230
232
-
* By default, Footer Aggregate or total aggregate will be shown only for the current page records and not for the dataSource. To aggregate for all page records, set adaptor in **SfDataManager**.
231
+
* By default, Footer Aggregates are calculated only for the current page records. To aggregate across all pages, configure the adaptor in **SfDataManager**.
0 commit comments