Features
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.
Initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize a Tree |
| Initialization of a collapsed Tree | Learn how to initialize a Tree in the collapsed state (Example) |
Loading data into Tree
| Topic | Description |
|---|---|
| Loading data into Tree | Read how to load the initial data into Tree |
| Initialization with config.data | The 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 TreeCollection | The example shows how to load data from external TreeCollection |
| Auto-loading Tree items | Learn how to build a Tree structure while opening items (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Tree with React (Demo) |
| Angular integration | Learn how to use DHTMLX Tree with Angular (Demo) |
| Vue integration | Learn 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.
| Topic | Description |
|---|---|
| Configuring drag-n-drop | Learn how to configure the necessary mode of drag-n-drop of items between trees (Example 1, Example 2) |
| Configuring drop behavior | Learn how to define the behavior of a dragged item (Example) |
| Copying items during drag-n-drop | Learn how to copy an item to a target during drag-n-drop (Example) |
| Enabling/disabling key navigation | Learn how to enable and disable key navigation (Example) |
| Activating inline editing | Learn 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.
| Topic | Description |
|---|---|
| Height of Tree items | Learn how to set the height for Tree items (Example) |
| Setting template for rendering items | Learn how to define a template for rendering items in Tree and add event handlers to HTML elements of the template (Example) |
| Applying custom icons | Learn how to add custom icons to Tree items (Example) |
| Applying custom icons via data set | The example shows how to add custom icons when you prepare a data set |
| Custom toggle icon | The example shows how to customize the toggle icon |
| Styling (custom CSS) | Learn how to customize the appearance of Tree (Example) |
| List of CSS classes | A 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
| Topic | Description |
|---|---|
| Setting / getting Tree state | Learn how to set and get the state of Tree items (Example 1, Example 2) |
| Collapsing / expanding Tree items | Learn how to collapse or expand a certain or all items in Tree (Example 1, Example 2, Example 3) |
| Setting focus on an item | Learn how to set focus on a certain item |
| Editing items | Learn how to enable the editing functionality for Tree item dynamically |
How to use checkboxes of Tree items
| Topic | Description |
|---|---|
| Adding checkboxes to Tree items | Learn how to add checkboxes for Tree items (Example) |
| Checking/unchecking checkboxes | Learn how to mark checkboxes of a Tree item as checked or unchecked (Example) |
| Getting checked items | Learn 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.
| Topic | Description |
|---|---|
| Adding items | Learn how to add new items into Tree (Example) |
| Updating items | Learn how to update config options of a Tree item (for example, to change the value of an item) (Example) |
| Getting item's parent | Learn how to get the parent of an item |
| Removing items | Learn how to remove items from Tree (Example) |
| Filtering data | The example shows how to filter data in Tree |
| Sorting data | The example shows how to sort data in Tree |
| TreeCollection API | Check the list of all available TreeCollection API |
How to work with selection
In this section you may study how to work with selection functionality.
| Topic | Description |
|---|---|
| Using selection functionality | Learn how to enable/disable selection, set selection to items, remove selection, and get the object of a selected item (Example) |
| Disabling selection | Learn 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.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Tree events (Example) |
API reference
In this section you can find out corresponding references of Tree API.
| Topic | Description |
|---|---|
| Tree methods | Check the list of Tree methods |
| Tree events | Check the list of Tree events |
| Tree properties | Check the list of Tree properties |
| TreeCollection API | Check 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.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support (Example) |
| TypeScript support | Learn how to work with TypeScript |
| AwaitRedraw | Learn 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!