Documentation

Checkboxes in the tree

In this chapter we will talk about checkboxes in tree nodes: how to add, customize them or provide the 3-state behaviour.

Adding checkboxes to nodes

Tree provides a predefined template for check boxes, which is - {common.checkbox()}
(read more about templates in chapter Node templates).

So, to add checkboxes to tree nodes you should specify the template property like this:

Adding checkboxes to tree nodes

tree = new webix.ui({
    view:"tree",
    template:"{common.icon()} {common.checkbox()} {common.folder()} #value#"
    ...
});

{common.icon()} template adds '+'/'-' icons to the nodes, {common.folder()} - adds folder icons.

Related sample:  2-state Checkboxes

3-state checkboxes

In addition to standard 2-state behaviour, Tree supports 3-state checkboxes.

Table 1 Types of checkbox behaviour
Behaviour Description
2-state (standard)
  • When the user checks/unchecks a parent node - this only node is checked/unchecked
  • When the user checks/unchecks a child node - this only node is checked/unchecked
3-state
  • When the user checks/unchecks a parent node - this parent node and all its child nodes (of each nesting level) are checked/unchecked
  • When the user checks/unchecks a child node - this only node is checked/unchecked


To provide 3-state behaviour for tree checkboxes you should set the threeState property to true:

Activating 3-state behaviour for checkboxes

tree = new webix.ui({
    view:"tree",
    template:"{common.icon()} {common.checkbox()} {common.folder()} #value#",
    threeState: true
    ...
});

Related sample:  3-state Checkboxes

Manipulations with checkboxes

Checkboxes can be programmatically checked and unchecked as well as it is possible to get checked items and define, whether the item is currently checked or not.

  • checkItem(id)/ uncheckItem(id) - checks/unchecks tree node with the specified ID;
  • getChecked() - returns an array of IDs of the checked items;
  • isChecked(id) - helps find out whether the specified node is checked at the moment.
tree.checkItem(tree.getSelectedId());
 
tree.uncheckItem(tree.getSelectedId());

Checkboxes can be used for component refreshing just from browser.

Generally, components are refreshed by applying the refresh() method to them, yet it can be called each time tree checkbox changes. The item wth this checkbox will be refreshed:

webix.ui({
    view:"datatable",
    checkboxRefresh:true
});
Back to top