React DropDownTree

Overview

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.

See React DropDownTree demo

React DropDownTree Component

Data Binding

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.

Filtering

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.

See React DropDownTree Filtering demo

React DropDownTree Filtering

Custom Rendering

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.

See React DropDownTree Custom Rendering demo

React DropDownTree Component Custom Rendering

Forms Support

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.

See React DropDownTree Forms Support demo

Keyboard Navigation

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.

See React DropDownTree Keyboard Navigation demo

Accessibility

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.

See React DropDownTree Accessibility demo

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.