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.
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
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
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
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
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
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
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
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
All KendoReact Components
Animation
Common Utilities
Conversational UI
Data Grid
Data Query
Date Math
Drawing
Editor
Excel Export
File Manager
File Saver
Gantt Chart
Inputs
Layout
ListBox
ListView
Map
Notification
PDF Processing
PivotGrid
Popup
Progress Bars
Ripple
Scheduler
ScrollView
Sortable
Taskboard
TreeList
TreeView
Upload
Next Steps
See KendoReact in action and check out how much it can do out-of-the-box.
Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.
Try KendoReact with dedicated technical support.
