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/chart/category-axis.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -198,3 +198,4 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla
198
198
*[Data Label](./data-labels)
199
199
*[Tooltip](./tool-tip)
200
200
*[Marker](./data-markers)
201
+
*[Sort Series Points on Category Axis](https://support.syncfusion.com/kb/article/21383/how-to-sort-series-points-on-category-axis-in-blazor-chart-component)
Copy file name to clipboardExpand all lines: blazor/chart/legend.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -668,3 +668,4 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla
668
668
669
669
*[Data label](./data-labels)
670
670
*[Marker](./data-markers)
671
+
*[Toggle Series Visibility Using Legend](https://support.syncfusion.com/kb/article/20966/how-to-toggle-series-visibility-using-legend-in-live-blazor-chart)
Copy file name to clipboardExpand all lines: blazor/dropdown-tree/accessibility.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Accessibility in Blazor Dropdown Tree Component
11
11
12
-
The [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree) component has been designed, keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, and applied the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
12
+
The [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree) component is designed with a strong commitment to accessibility, adhering to the [WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications. It automatically applies appropriate WAI-ARIA roles, states, and properties, alongside comprehensive keyboard support, to ensure seamless navigation and interaction for users relying on assistive technologies (AT) or keyboard-only navigation.
13
13
14
-
The Blazor Dropdown Tree 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.
14
+
The component follows established accessibility guidelines and standards, including the [ADA (Americans with Disabilities Act)](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2 (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG22/) standards. It also incorporates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used in evaluating accessibility features.
15
15
16
16
The accessibility compliance for the Blazor Dropdown Tree component is outlined below.
17
17
@@ -51,9 +51,9 @@ The Blazor Dropdown Tree component followed the [WAI-ARIA](https://www.w3.org/WA
51
51
|`aria-disabled`| Indicates whether the Dropdown Tree component is in a disabled state or not. |
52
52
|`aria-controls`| This attribute contains the ID of the popup list to indicate this element is controlled by the popup list element |
53
53
54
-
## Keyboard interaction
54
+
## Keyboard Interaction
55
55
56
-
You can use the following key shortcuts to access the Dropdown Tree without interruptions:
56
+
The Blazor Dropdown Tree component offers comprehensive keyboard support, allowing users to navigate and interact with the component without a mouse. The following key shortcuts are available:
57
57
58
58
| Windows | Mac | Actions |
59
59
| --- | --- | --- |
@@ -64,23 +64,23 @@ You can use the following key shortcuts to access the Dropdown Tree without inte
64
64
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
65
65
|**Popup Navigation**|||
66
66
| <kbd>Esc(Escape)</kbd> | <kbd>Esc</kbd> | Closes the popup when it is in an open state. |
67
-
| <kbd>↑</kbd> | <kbd>↑</kbd> |Goes to the previous item in the popup. |
68
-
| <kbd>↓</kbd> | <kbd>↓</kbd> |Goes to the next item in the popup. |
67
+
| <kbd>↑</kbd> | <kbd>↑</kbd> |Navigates to the previous item in the popup. |
68
+
| <kbd>↓</kbd> | <kbd>↓</kbd> |Navigates to the next item in the popup. |
69
69
| <kbd>→</kbd> | <kbd>→</kbd> | Expands the current item. |
70
70
| <kbd>←</kbd> | <kbd>←</kbd> | Collapses the current item in the popup. |
71
-
| <kbd>Home</kbd> | <kbd>Home</kbd> |Goes to the first item in the popup. |
72
-
| <kbd>End</kbd> | <kbd>End</kbd> |Goes to the last item in the popup. |
71
+
| <kbd>Home</kbd> | <kbd>Home</kbd> |Navigates to the first item in the popup. |
72
+
| <kbd>End</kbd> | <kbd>End</kbd> |Navigates to the last item in the popup. |
73
73
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item in the popup. |
74
74
| <kbd>Space</kbd> | <kbd>Space</kbd> | Checks the current item in the popup. |
75
75
|**Over All Checkbox**|||
76
76
| <kbd>Space</kbd> | <kbd>Space</kbd> | Checks all the items in popup |
77
77
78
-
## Ensuring accessibility
78
+
## Ensuring Accessibility
79
79
80
-
The Blazor Dropdown Tree component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
80
+
The accessibility levels of the Blazor Dropdown Tree componentare continuously validated through automated testing using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool.
81
81
82
-
The accessibility compliance of the Dropdown Tree component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/dropdowntree) in a new window to evaluate the accessibility of the Dropdown Tree component with accessibility tools.
82
+
A sample demonstrating the accessibility compliance of the Dropdown Tree component is available. Open the [sample](https://blazor.syncfusion.com/accessibility/dropdowntree) in a new window to evaluate its accessibility using various tools.
83
83
84
-
## See also
84
+
## See Also
85
85
86
86
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
Copy file name to clipboardExpand all lines: blazor/dropdown-tree/checkbox.md
+15-13Lines changed: 15 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,25 +1,25 @@
1
1
---
2
2
layout: post
3
-
title: Checkbox in Blazor Dropdown Tree Component | Syncfusion
3
+
title: Checkbox Functionality in Blazor Dropdown Tree Component | Syncfusion
4
4
description: Checkout and learn here all about Checkbox in Syncfusion Blazor Dropdown Tree component and much more.
5
5
platform: Blazor
6
6
control: Dropdown Tree
7
7
documentation: ug
8
8
---
9
9
10
-
# Checkbox in Blazor Dropdown Tree Component
10
+
# Checkbox Functionality in Blazor Dropdown Tree Component
11
11
12
-
The Dropdown Tree component allows you to check more than one item from the tree without affecting the UI’s appearance by enabling the [ShowCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowCheckBox) property. When this property is enabled, checkbox appears before each item text in the popup.
12
+
The Dropdown Tree component allows users to select multiple items from the tree structure using checkboxes. This functionality is enabled via the [`ShowCheckBox`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowCheckBox) property. When `ShowCheckBox`is set to `true`, a checkbox appears before each item's text within the popup.
13
13
14
14
## Auto Check
15
15
16
-
By default, the checkbox state of the parent and child items in the Dropdown Tree will not be dependent over each other. If you need dependent checked state, then enable the [AutoUpdateCheckState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AutoUpdateCheckState) property.
16
+
By default, the checkbox state of parent and child items in the Dropdown Tree `TreeView` is independent. To establish a dependent relationship, enable the [`AutoUpdateCheckState`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AutoUpdateCheckState) property.
17
17
18
-
* If one or more child items are not in the checked state, then the parent item will be in the intermediate state.
18
+
When `AutoUpdateCheckState` is enabled:
19
19
20
-
* If all the child items are checked, then the parent item will also be in the checked state.
21
-
22
-
*If a parent item is checked, then all the child items will also be changed to the checked state.
20
+
*If one or more child items are unchecked, the parent item will display an intermediate (partially checked) state.
21
+
* If all child items are checked, the parent item will also transition to the checked state.
22
+
* Checking a parent item will automatically check all its child items.
23
23
24
24
In the following example, the [AutoUpdateCheckState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AutoUpdateCheckState) property is enabled.
25
25
@@ -56,16 +56,18 @@ In the following example, the [AutoUpdateCheckState](https://help.syncfusion.com
56
56
}
57
57
}
58
58
```
59
+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLIXahnAAXFBirf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/auto-check.png)" %}
59
60
60
61
## Select/Unselect All
61
62
62
-
The Dropdown Tree component has built-in support to select all the tree items using the checkbox in the header.
63
+
The Dropdown Tree component offers built-in support to select or unselect all tree items using a single checkbox in the header.
63
64
64
-
When the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowSelectAll) property is set to true, a checkbox will be displayed in the popup header that allows you to select or unselect all the tree items in the popup.
65
+
Setting the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowSelectAll) property to `true` displays a "Select All" checkbox in the popup header. This checkbox allows users to toggle the checked state of all visible tree items.
65
66
66
-
Also we can select all the tree items programmatically using the [SelectAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_SelectAllAsync_System_Boolean_) method.
67
+
Additionally, programmatic control over the "Select All" functionality is available:
67
68
68
-
We can unselect all the tree items programmatically using the [SelectAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_SelectAllAsync_System_Boolean_) method by passing the parameter as false.
69
+
* Use the [`SelectAllAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_SelectAllAsync_System_Boolean_) method without parameters (or with `true`) to programmatically check all tree items.
70
+
* Use the `SelectAllAsync(false)` method to programmatically uncheck all tree items.
69
71
70
72
In the following example, the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowSelectAll) property is enabled and [SelectAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_SelectAllAsync_System_Boolean_) method is used.
71
73
@@ -121,5 +123,5 @@ In the following example, the [ShowSelectAll](https://help.syncfusion.com/cr/bla
0 commit comments