docs(DropDownTree): New component documentation

_contentTemplates/dropdowntree/general.md

@@ -0,0 +1,3 @@
+#data-binding-basics-link
+Before continuing, make sure you are familiar with the [DropDownTree data binding basics](slug:dropdowntree-data-binding-overview).
+#end

_contentTemplates/treeview/basic-example.md

@@ -100,6 +100,5 @@ Sample treeview bound to self-referencing flat data. Also uses the built-in icon
 #end
 
 #data-binding-basics-link
-Before continuing, make sure you are familiar with the [treeview data binding basics](slug:components/treeview/data-binding/overview).
+Before continuing, make sure you are familiar with the [TreeView data binding basics](slug:components/treeview/data-binding/overview).
 #end
-

accessibility/compliance.md

@@ -66,6 +66,7 @@ Also check the [notes below the table](#accessibility-compliance-notes).
 | Drawer | AA | [Enhanced](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation) | [Documentation](slug:drawer-wai-aria-support) |
 | DropDownButton | AA | [Enhanced](https://demos.telerik.com/blazor-ui/dropdownbutton/keyboard-navigation) | [Documentation](slug:dropdownbutton-wai-aria-support) |
 | DropDownList | AA | [Enhanced](https://demos.telerik.com/blazor-ui/dropdownlist/keyboard-navigation) | [Documentation](slug:dropdownlist-wai-aria-support) |
+| DropDownTree | AA | [Enhanced](https://demos.telerik.com/blazor-ui/dropdowntree/keyboard-navigation) | [Documentation](slug:dropdowntree-wai-aria-support) |
 | DropZone | N/A | N/A | N/A |
 | Editor | AA | [Enhanced](https://demos.telerik.com/blazor-ui/editor/keyboard-navigation) | [Documentation](slug:editor-wai-aria-support) |
 | FileManager | AA |[Enhanced](https://demos.telerik.com/blazor-ui/filemanager/overview) <br /> Also see [Grid](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation), [ListView](https://demos.telerik.com/blazor-ui/listview/keyboard-navigation), [Splitter](https://demos.telerik.com/blazor-ui/splitter/keyboard-navigation), [ToolBar](https://demos.telerik.com/blazor-ui/toolbar/keyboard-navigation), [TreeView](https://demos.telerik.com/blazor-ui/treeview/keyboard-navigation) | [Documentation](slug:filemanager-wai-aria-support) |

common-features/adaptive-rendering.md

@@ -31,6 +31,7 @@ The adaptive rendering functionality is supported by the following components:
 * [DateRangePicker](slug:daterangepicker-overview)
 * [DateTimePicker](slug:components/datetimepicker/overview)
 * [DropDownList](slug:components/dropdownlist/overview)
+* [DropDownTree](slug:dropdowntree-overview)
 * [MultiColumnComboBox](slug:multicolumncombobox-overview)
 * [MultiSelect](slug:multiselect-overview)
 * [TimePicker](slug:components/timepicker/overview)
@@ -46,8 +47,7 @@ Optionally, you may set the `Title` and `Subtitle` parameters to provide custom
 
 >caption Enable the adaptive rendering
 
-<div class="skip-repl"></div>
-````RAZOR
+````RAZOR.skip-repl
 // NOTE: The configurations below includes only the DropDownList, but it is applicable to all of the above listed components
 
 // Adapts to the screen size to use the appropriate rendering.
@@ -84,8 +84,7 @@ You can customize the [above-listed default adaptive breakpoints](#rendering-spe
 
 >caption Customize the default adaptive breakpoints
 
-<div class="skip-repl"></div>
-````RAZOR
+````RAZOR.skip-repl
 @* The below configuration sets the following thresholds:
 - Small: 0 to 400px
 - Medium: 401px to 900px
@@ -114,6 +113,7 @@ Some of the [supported components](#supported-components) allow custom values, f
 * [Live Demo: DateRangePicker](https://demos.telerik.com/blazor-ui/daterangepicker/adaptive)
 * [Live Demo: DateTimePicker](https://demos.telerik.com/blazor-ui/datetimepicker/adaptive)
 * [Live Demo: DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/adaptive)
+* [Live Demo: DropDownTree](https://demos.telerik.com/blazor-ui/dropdowntree/overview)
 * [Live Demo: MultiColumnComboBox](https://demos.telerik.com/blazor-ui/multicolumncombobox/adaptive)
 * [Live Demo: MultiSelect](https://demos.telerik.com/blazor-ui/multiselect/adaptive)
 * [Live Demo: TimePicker](https://demos.telerik.com/blazor-ui/timepicker/adaptive)

components/dropdowntree/accessibility/wai-aria-support.md

@@ -0,0 +1,110 @@
+---
+title: Wai-Aria Support
+page_title: Telerik UI for Blazor DropDownTree Documentation | DropDownTree Accessibility
+description: "Get started with the Telerik UI for Blazor DropDownTree and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+tags: telerik,blazor,accessibility,wai-aria,wcag
+slug: dropdowntree-wai-aria-support 
+position: 50 
+---
+
+# Blazor DropDownTree Accessibility
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+
+
+Out of the box, the Telerik UI for Blazor DropDownTree provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+
+
+The DropDownTree is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
+
+## WAI-ARIA
+
+
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+### DropDownTree Wrapping Element
+
+
+The following table summarizes the selectors and attributes supported by the DropDownTree wrapper element:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-dropdowntree` | `role=combobox` | Announces the drop-down element of the button. |
+|  | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
+|  | `aria-haspopup=tree` | Indicates the presence of a popup with a tree navigation. |
+|  | `aria-expanded=true/false` | Announces the state of the popup visibility. |
+|  | `aria-controls=.k-treeview id` | Points to the `treeview` element. Signifies that the `combobox` element controls the `treeview` one. |
+|  | `aria-describedby=.k-input-inner id` | Announces the selected value of the drop-down. |
+|  | `aria-readonly=true` | The attribute is rendered only when the drop-down is read-only. |
+|  | `aria-autocomplete=list` | The attribute is rendered and the value is set to `list` when the filtering feature is enabled. |
+|  | `aria-invalid=true` | The attribute is rendered only when the drop-down is in a form and announces the valid state of the component. |
+|  | `aria-busy=true` | The attribute is rendered only when the drop-down is loading data. |
+|  | `tabindex=0` | The element must be focusable. |
+| `.k-dropdowntree.k-disabled` | `aria-disabled=true` | The attribute is rendered only when the drop-down is disabled. |
+| `.k-input-button` | `role=button` or `nodeName=button` | The element must either be a `<button>` element or must have `role="button"` assigned. |
+|  | `aria-label` | The button requires an accessible name that will be assigned to it. |
+|  | `tabindex=-1` | The `button` element must not be focusable. |
+
+### Popup Listbox
+
+
+The popup element of the DropDownTree has to implement the WAI-ARIA specification for a Popup List component. The following table summarizes the selectors and attributes supported by the listbox popup of the DropDownTree:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-animation-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it requires you to assign a `landmark` role to it. Otherwise, it must be appended to an element with an appropriate `landmark` role. |
+|  | `aria-label` or `aria-labelledby` | Provides a label when the container has a `region` role assigned. |
+
+### TreeView
+
+
+The tree that is placed in the `popup` element of the component must implement the specification for a TreeView component.
+
+[TreeView accessibility specification]({{treeview_a11y_link}})
+
+### Adaptive Mode
+
+
+When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
+
+[ActionSheet accessibility specification]({{actionsheet_a11y_link}})
+
+## Resources
+
+[WAI-ARIA Authoring Practices: TreeView Example](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)
+
+[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
+
+## Section 508
+
+
+The DropDownTree is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
+
+## Testing
+
+
+The DropDownTree has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+
+The DropDownTree has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+
+
+## Keyboard Navigation
+
+For details on how the DropDownTree keyboard navigation works, refer to the [Blazor DropDownTree Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/dropdowntree/keyboard-navigation).
+
+## See Also
+
+* [Accessibility in Telerik UI for Blazor](slug:accessibility-overview)

components/dropdowntree/data-binding/flat-data.md

@@ -0,0 +1,98 @@
+---
+title: Flat Data
+page_title: DropDownTree - Data Binding to Flat Data
+description: Learn how to bind the Telerik DropDownTree for Blazor to flat self-referencing data collections.
+slug: dropdowntree-data-binding-flat-data
+tags: telerik,blazor,dropdowntree,databinding
+components: ["dropdowntree"]
+published: True
+position: 5
+---
+
+# DropDownTree Binding to Flat Data
+
+This article explains how to bind the DropDownTree for Blazor to flat self-referencing data.
+@[template](/_contentTemplates/dropdowntree/general.md#data-binding-basics-link)
+
+Flat data means that all DropDownTree items are available at one level in a single collection, for example, `List<MyTreeItem>`. The parent-child relationships are defined through properties in the model. For example, the `ParentId` property value of one item points to the `Id` property value of another parent item. The root level items have `null` values for `ParentId`. There must be at least one node with a `null` value so that the TreeView in the DropDownTree popup renders.
+
+You must also provide the correct value for the `HasChildren` property of each item, so that expand arrows display where needed.
+
+When using [multiple level bindings](slug:dropdowntree-data-binding-overview#multiple-level-bindings), define the same `ParentIdField` for all levels for better performance.
+
+>caption Bind DropDownTree to flat data
+
+````RAZOR
+<TelerikDropDownTree Data="@DropDownTreeData"
+                     @bind-Value="@DropDownTreeValue"
+                     @bind-ExpandedItems="@DropDownTreeExpandedItems"
+                     Width="300px">
+</TelerikDropDownTree>
+
+@code {
+    private List<TreeItem> DropDownTreeData { get; set; } = new();
+
+    private int DropDownTreeValue { get; set; } = 3;
+
+    private IEnumerable<object> DropDownTreeExpandedItems { get; set; } = new List<TreeItem>();
+
+    protected override void OnInitialized()
+    {
+        DropDownTreeData = LoadFlatData();
+
+        DropDownTreeExpandedItems = DropDownTreeData.Where(x => x.ParentId is null && x.HasChildren);
+    }
+
+    private int TreeLevels { get; set; } = 3;
+    private int RootItems { get; set; } = 2;
+    private int ItemsPerLevel { get; set; } = 2;
+    private int IdCounter { get; set; }
+
+    private List<TreeItem> LoadFlatData()
+    {
+        List<TreeItem> items = new List<TreeItem>();
+
+        PopulateChildren(items, null, 1);
+
+        return items;
+    }
+
+    private void PopulateChildren(List<TreeItem> items, int? parentId, int level)
+    {
+        var itemCount = level == 1 ? RootItems : ItemsPerLevel;
+        for (int i = 1; i <= itemCount; i++)
+        {
+            var itemId = ++IdCounter;
+            items.Add(new TreeItem()
+            {
+                Id = itemId,
+                ParentId = parentId,
+                HasChildren = level < TreeLevels,
+                Text = $"Level {level} Item {i} Id {itemId}",
+                Value = itemId
+            });
+
+            if (level < TreeLevels)
+            {
+                PopulateChildren(items, itemId, level + 1);
+            }
+        }
+    }
+
+    public class TreeItem
+    {
+        public int Id { get; set; }
+        public int? ParentId { get; set; }
+        public bool HasChildren { get; set; }
+        public string Text { get; set; } = string.Empty;
+        public int Value { get; set; }
+    }
+}
+````
+
+## See Also
+
+* [DropDownTree Data Binding Basics](slug:dropdowntree-data-binding-overview)
+* [Live Demo: DropDownTree Flat Data](https://demos.telerik.com/blazor-ui/dropdowntree/flat-data)
+* [DropDownTree Binding to Hierarchical Data](slug:dropdowntree-data-binding-hierarchical-data)
+* [Loading DropDownTree Items on Demand](slug:dropdowntree-data-binding-load-on-demand)