Skip to main content


This page contains structured information that will help you to start working with DHTMLX Tree and go into deep dive on its functionality.

How to start with DHTMLX Tree

In this section you can find out how to initialize Tree, how to load data into the component and how to integrate Tree into your applications.


Basic initializationLearn how to initialize a Tree
Initialization of a collapsed TreeLearn how to initialize a Tree in the collapsed state (Example)

Loading data into Tree

Loading data into TreeRead how to load the initial data into Tree
Initialization with config.dataThe example shows how to load data into Tree on the initialization stage
Initialization with data.load()The example shows how to load data from an external file
Initialization with data.parse()The example shows how to load data from a local data source
Initialization with external TreeCollectionThe example shows how to load data from external TreeCollection
Auto-loading Tree itemsLearn how to build a Tree structure while opening items (Example)


Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Tree with React (Demo)
Angular integrationLearn how to use DHTMLX Tree with Angular (Demo)
Vue integrationLearn how to use DHTMLX Tree with Vue.js (Demo)

How to configure Tree

In this section you can find out how to configure drag-n-drop in Tree, how to enable or disable key navigation, how to let users to edit items by double-click.

Configuring drag-n-dropLearn how to configure the necessary mode of drag-n-drop of items between trees (Example 1, Example 2)
Configuring drop behaviorLearn how to define the behavior of a dragged item (Example)
Copying items during drag-n-dropLearn how to copy an item to a target during drag-n-drop (Example)
Enabling/disabling key navigationLearn how to enable and disable key navigation (Example)
Activating inline editingLearn how to activate inline editing on Tree initialization (Example)

How to customize Tree and change its size

In this section you can learn how to customize a Tree, its icons, and configure the height of Tree items.

Height of Tree itemsLearn how to set the height for Tree items (Example)
Setting template for rendering itemsLearn how to define a template for rendering items in Tree and add event handlers to HTML elements of the template (Example)
Applying custom iconsLearn how to add custom icons to Tree items (Example)
Applying custom icons via data setThe example shows how to add custom icons when you prepare a data set
Custom toggle iconThe example shows how to customize the toggle icon
Styling (custom CSS)Learn how to customize the appearance of Tree (Example)
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with Tree

In this section you may study how to expand or collapse Tree items, how to work with their state, and more.

How to work with Tree items

Setting / getting Tree stateLearn how to set and get the state of Tree items
(Example 1, Example 2)
Collapsing / expanding Tree itemsLearn how to collapse or expand a certain or all items in Tree
(Example 1, Example 2, Example 3)
Setting focus on an itemLearn how to set focus on a certain item
Editing itemsLearn how to enable the editing functionality for Tree item dynamically

How to use checkboxes of Tree items

Adding checkboxes to Tree itemsLearn how to add checkboxes for Tree items (Example)
Checking/unchecking checkboxesLearn how to mark checkboxes of a Tree item as checked or unchecked (Example)
Getting checked itemsLearn how to get the list of all checked items in a tree (Example)

How to work with data in Tree

This section will tell you how to use TreeCollection API for working with data of Tree, i.e. add, update, remove, filter, sort items, etc.

Adding itemsLearn how to add new items into Tree (Example)
Updating itemsLearn how to update config options of a Tree item (for example, to change the value of an item) (Example)
Getting item's parentLearn how to get the parent of an item
Removing itemsLearn how to remove items from Tree (Example)
Filtering dataThe example shows how to filter data in Tree
Sorting dataThe example shows how to sort data in Tree
TreeCollection APICheck the list of all available TreeCollection API

How to work with selection

In this section you may study how to work with selection functionality.

Using selection functionalityLearn how to enable/disable selection, set selection to items, remove selection, and get the object of a selected item (Example)
Disabling selectionLearn how to disable the ability to select items in Tree on its initialization (Example)

How to work with Tree events

This section explains how to work with Tree events.

Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Tree events (Example)

API reference

In this section you can find out corresponding references of Tree API.

Tree methodsCheck the list of Tree methods
Tree eventsCheck the list of Tree events
Tree propertiesCheck the list of Tree properties
TreeCollection APICheck the API of TreeCollection to work with Tree data

Common functionality

In this section you will learn about common functionality of the library which can be useful while working with Tree.

Touch supportLearn how to work with touch support (Example)
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


Do you need more functionality? Feel free to share your suggestions in the comments below!