React DropDownTree

  • Display complex data in a DropDown efficiently by using a hierarchical structure. This React DropDownTree comes with built-in forms support and filtering.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • 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

All KendoReact Components

waves bg

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.