React TreeView

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.

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.

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.

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.

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.

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.

React TreeView - Dragging & Dropping, KendoReact UI Library

Persisting Focus

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

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.

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.

Accessibility

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

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.