JavaScript DataTree widget is the widget to visualize structured data in the form of hierarchically organized tree list. This way of data visualization allows to save work space and render more information due to grouping and an opportunity to collapse and unfold branches with data. Webix offers a ready-made and smart solution with plenty of features, support of hot keys, Javascript Drag ang drop, filters and other improvements. Elaborate Webix ecosystem allows to easily integrate JS tree, fill it with data and set the required design. Study the demo below. Download the UI Webix library to try the Tree widget in practice.
live demo
Webix Tree is the widget to render the data in the form of tree lists. Our team have developed many features and UI controls that you can use in your work. Use the Webix framework to create business applications with loads of data, save your work time with the ready-to-use design and Webix widgets.
Functionality
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
Webix Data Tree 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
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).
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
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.
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
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 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.
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.
Related Articles
Create rich user interfaces with Webix UI library
