Expand/collapse by click
Webix Tree JS nodes containing child nodes can be easily expanded or collapsed with a single click in order to keep the screen clear of superfluous information.
Click on the 'plus' icon to see the whole tree
Dynamic Data loading
Click on the 'plus' icon to load the branch
Two/Three state checkboxes
The sample demonstrates use of 3-state (the 1st tree) and standard 2-state checkboxes (the 2nd tree).
Click on any item and use arrows keys to navigate via keyboard
The widget allows making a great number of CRUD operations with data: adding, deleting, copying and pasting and even in-line editing.
Click on any item to edit it.
The design of Webix widget is entirely defined with CSS which makes working on apps quicker and simpler. You can use a set of icons to decorate the Webix Tree JS.
Select multiple items (Ctrl+click) and start to drag. The tooltip will display the total number of the items being dragged
This widget allows you to save the state of the Tree to cookie, local or session storage to restore it later. The state object contains data concerning open and selected nodes. The functionality can be used to prevent end users from loosing the state of their Tree during page reload.
Click on 'Save state', collapse, expand and select items. Then click 'Restore state'
You can use clipboard while working with this component. This feature can be used in several modes: after you have copied the contents of a selected item with the Ctrl+C action, you can either paste the text to another node directly, or create its child item with the copied text. Besides, you can specify a custom logic for the paste operation.
Click on any item and press Ctrl+C to copy it. Set the cursor into the textarea and press Ctrl+V to paste the copied text.
The widget nodes can be sorted. You can define custom sorting logic to meet your particular requirements. For example, it's possible to sort only parent nodes while keeping the children as they are.