KendoReact

React TreeView

  • This versatile React TreeView component enables user interaction (selection, reordering) with hierarchical data in a tree structure through mouse or touch events.
  • 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

The React TreeView displays hierarchical data in a traditional tree structure, supports user interaction through mouse and touch events and allows for reordering nodes by using the built-in drag and drop functionality.

See React TreeView demo

React TreeView - Overview, KendoReact UI Library

Data Binding

Thanks to the ability to map required fields with ease, the KendoReact TreeView can be bound to various types of data.

See React TreeView demo: Data Binding

React TreeView - Data Binding, KendoReact UI Library

Expanding Items

Nodes within the React TreeView can be expanded and collapsed by simply clicking on a node. Expansion state can also be set programmatically, allowing nodes to be expanded upon initial render or dynamically updated.

See React TreeView demo: Expanding Items

React TreeView - Expanding Items, KendoReact UI Library

Selection

With selection enabled, the KendoReact TreeView allows for nodes to be selected by a simple click, or through built-in checkboxes.

See React TreeView demo: Selection

React TreeView - Selection, KendoReact UI Library

Checkboxes

The KendoReact TreeView allows for checkboxes to be rendered next to each node to assist with selecting nodes throughout the entire TreeView.

See React TreeView demo: Checkboxes

React TreeView - Checkboxes, KendoReact UI Library

Dragging & Dropping

The drag-and-drop feature of the KendoReact TreeView enables users to move TreeView items around by dragging and dropping them within a single tree, or across multiple trees.

See React TreeView demo: Dragging & Dropping

React TreeView - Dragging & Dropping, KendoReact UI Library

Persisting Focus on Data Reload

The KendoReact TreeView enables developers to keep the focus on the currently focused item while reloading data.

See React TreeView demo: Persisting Focus

React TreeView - Persisting Focus, KendoReact UI Library

Custom Rendering

Nodes within the React TreeView can be completely customized by providing a custom renderer, giving full control over the content for each node.

See React TreeView demo: Custom Rendering

React TreeView - Custom Rendering, KendoReact UI Library

Keyboard Navigation

The KendoReact TreeView has built-in keyboard navigation to help traverse and interact with all the nodes available within the tree.

See React TreeView demo: Keyboard Navigation

Accessibility

The KendoReact TreeView is compliant with Section 508 and WAI-ARIA standards and is AAA rated with WCAG 2.0.

See React TreeView demo: Accessibility

React TreeView - Accessibility, KendoReact UI Library

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.