Tree Feature Details

Here we described the functionality of our Tree widget. You can download it as a standalone component or use it as a part of DHTMLX Suite UI library.

Items Drag-n-Drop
DHTMLX Tree provides an advanced drag-n-drop functionality. Users are able to reorder tree items, drag them between two widgets, and copy dragged elements. You can configure drag-n-drop behavior and define relations between tree nodes.
Inline Editing
You can empower your users to manipulate with Tree data and edit the text of its items directly from the UI with a double-click.
Sorting and Filtering
With the Tree widget, you may sort items in ascending or descending order. Moreover, the filtering functionality allows displaying tree items according to the specified parameters. For example, the tree list can be configured to display only items that contain the letter A, as you may see on this code snippet.
Templates for Items
Having set a custom template with HTML content for Tree nodes, you can also add events to any of its elements. The example below demonstrates the ability to delete a tree item by clicking a corresponding icon.
Two-State and Three-State Checkboxes
With DHTMLX Tree you can attach checkboxes for tree items and also get an array of all checked items. In addition to standard two-state controls that allow checking and unchecking items, it includes three-state checkboxes. They have an intermediate state when just some children of a parent item are checked.
Items Selection
By default, the widget allows highlighting a tree item. However, you are free to disable the selection feature by setting the corresponding configuration property.
Wide Customization Abilities
You're free to modify the Tree look and feel according to your project requirements. You can apply custom styling and change, for example, text and background colors by adding new CSS classes with preferable settings. Plus, DHTMLX Tree allows changing the default icons to any other icon font pack.

Estimate All UI Widgets

Create functional and easy-to-use web apps and interfaces, as well as save up to 40% by downloading the whole Suite UI library. You can benefit from:

Full toolkit of 20+ widgets

30 days of free trial

PRO features

Official technical support