Functionality
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
Dynamic data loading allows for asynchronous JavaScript tree level loading. Initially only first-level items can be loaded. Afterwards, when you open the tree branch, its ID is sent to the server and the related data is dynamically loaded.
Click on the 'plus' icon to load the branch
Two/Three state checkboxes
The widget features two- and three-state checkbox modes. The latter mode provides the additional checkbox state - the indeterminate checkbox. It allows checking all JavaScript tree subitems by clicking the parent checkbox while indicating whether some of the nested checkboxes are not selected.
The sample demonstrates use of 3-state (the 1st tree) and standard 2-state checkboxes (the 2nd tree).
Keyboard navigation
This JavaScript Tree provides you with keyboard navigation and hotkey management, which allows you to make fewer mouse manipulations while working with the widget.
Click on any item and use arrows keys to navigate via keyboard
CRUD operations
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.
Icons
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.
Drag-and-drop
Advanced JavaScript drag-and-drop properties enable you to drag tree items not only within the same Tree or between Trees, but even between Tree and Datatable, List, Dataview and TreeTable.
Select multiple items (Ctrl+click) and start to drag. The tooltip will display the total number of the items being dragged
Saving the JavaScript Tree state
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'
Clipboard
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.
Filtering
The JavaScript Tree component supports different filtering modes. You can define whether children of the filtered items should be displayed. Also, you can specify that the parents of the filtered items should be expanded. Finally, you can set the nesting level for filtering. Combining these three options, you can define filtering rules that suit you in the best way.
Sorting
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.