In this chapter we will talk about checkboxes in tree nodes: how to add, customize them or provide the 3-state behaviour.
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
In addition to standard 2-state behaviour, Tree supports 3-state checkboxes.
Behaviour | Description |
---|---|
2-state (standard) |
|
3-state |
|
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
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.
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