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.