A combination of a TreeView and a DropDown component, the KendoReact DropDownTree is perfect for forms that need to display complex data concisely. When users interact with this simple input element, the dropdown opens up to reveal a built-in TreeView with a hierarchical structure. Users can then pick a node and the selected value will appear in the input of the component.
The React DropDownTree can be data-bound to various forms of data, making it a breeze to populate the component with options that users can select from. Whether the data comes from a collection generated on the client-side or from a database somewhere on the server-side—the React DropDownTree can be easily bound to any data collection.
When filtering is enabled, the React DropDownTree will display an additional search box at the top of the item collection. This filtering mechanism allows end-users to reduce the amount of information displayed within the component and helps them find the specific items they’re searching for quickly and efficiently.
The KendoReact DropDownTree provides several ways for React developers to customize the look-and-feel of the React component. How each node within the built-in TreeView gets rendered can be controlled by its own custom renderer, and the way the selected items are displayed within the input element can also be customized. Combined, these approaches give you enough flexibility to fit the React DropDownTree into any application design.
As the React DropDownTree is an advanced version of the select HTML element, the component will often be used as part of a larger collection of form components. Thankfully, the KendoReact DropDownTree provides a native KendoReact implementation of HTML form validation to ensure a natural fit within any form.
The KendoReact DropDownTree has built-in keyboard support to help interact with the React component using just a keyboard. This enables users to open and close the dropdown, switch between items, select items and more—all via keyboard interactions.
One of the core aspects of KendoReact is accessibility. The KendoReact team understands how important accessibility is for the web and this drives the team to make every component accessible to all audiences. The KendoReact DropDownTree supports Section 508 guidelines, keyboard navigation and WCAG 2.0 compliance with an AAA rating.