We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


The tree view component allows you to represent hierarchical data in a tree-like structure. It has great performance combined with advanced features like load on demand, check box support, drag and drop, inline editing, and template support.

Tree view data binding in JavaScript

Data binding

The tree view can be populated from any valid data source, such as XML, JSON, and JSONP. The data can be local or in any remote service and fetched using different kinds of adaptors like OData, OData V4, URL, JSON, and Web API.

Load on demand

The tree view renders nodes on demand, so child nodes are loaded when their parent node is expanded, which improves performance when large amounts of data are used.

Child nodes can also be fetched from any service or dynamically inserted.

Tree node with icons

Supports displaying nodes with labels and icons to present content in a more readable format.

Check box support

Provides built-in support for check boxes, allowing users to select more than one item.

Drag and drop

Tree view node drag-and-drop in JavaScript

Inside the tree

The tree nodes can be dragged and dropped from one parent to another with the same level or different levels.

Tree view node drag-and-drop to another tree view in JavaScript

To an outside tree

The drop behavior can be extendable to drop nodes from one tree to another.

Tree view node drag-and-drop to an external container in JavaScript

To an external container

The tree nodes can be dropped to any external component or container.

Multiple node selection

The tree view component allows users to select multiple nodes. All selected nodes can be dragged and dropped at the same time.

Multiple node selection in JavaScript tree view

Drag and drop multiple tree node in JavaScript

Inline node editing

The tree nodes can be edited inline by double-clicking on them.


Tree nodes can be sorted in ascending or descending order, offering users improved readability in the application.

Node template

Template support allows the entire tree node to be customized. The customization can be done specifically for parent and child nodes,and can include images and any custom element structure.

Expand and collapse icon

The tree view expand and collapse icons can be customized based on the application requirements.

Right-to-left (RTL)

Supports right to left (RTL) direction for users working in right-to-left languages like Hebrew, Arabic or Persian.


  • Fully supports WAI-ARIA accessibility to work with screen readers and assistive devices.
  • Follows WAI-ARIA best practices for implementing keyboard interaction.
  • The UI element visuals such as foreground color, background color, line spacing, text, and images are designed based on WCAG 2.0.
  • Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Developer-friendly APIs

You have control over all UI elements and behaviors in the tree view through its rich set of developer-friendly APIs to provide the best experience to your end users.


Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon