React TreeView

  • The TreeView enables user interaction with hierarchical data in a tree structure through mouse or touch events.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
TreeView Header
  • Display Hierarchical Data in a Tree Structure

    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 the 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 the React TreeView Data Binding demo

    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 the React TreeView Expanding Items demo

    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 the React TreeView Selection demo

    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 the React TreeView Checkboxes demo

    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 the React TreeView Dragging and Dropping demo

    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 the React TreeView Persisting Focus demo

    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 the React TreeView Custom Rendering demo

    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 the React TreeView Keyboard Navigation demo

  • Accessibility

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

    See the React TreeView Accessibility demo


All KendoReact Components

Next Steps