To customize data presented in the nodes' titles, you can use templates. Data template for the tree is set by property template.
With templates, you can present almost any content in the tree: images, links, numbers, strings, dates etc.
By default, Tree uses the following template for its items:
Default tree template
webix.ui({
view:"tree",
template:"{common.icon()} {common.folder()} <span>#value#<span>"
});
It means that each item features:
More about Webix pattern of data interpolation you can find in the Data templates article.
Webix tree and treetable offers a set of predefined helpers that aid in item rendering and contain tree-specific elements like item icons, expand/collapse icons and checkboxes.
All of them are the methods of a common object that is accessible by all of the tree items and defined within tree/treetable Type mixin.
If you set a template by a string, you can include the tree-specific helpers via string:
Specifying the template parameter as a string
webix.ui({
view:"tree",
template:"{common.icon()} {common.checkbox()} {common.folder()}" +
"<span>#value#</span>"
});
Related sample: 2-state Checkboxes
The tree above will render items featuring an expand-collapse icon, checkbox and file/folder icon.
If you set a template via a function, you can include the tree-specific helpers via functions, and they are functions in essence:
Specifying the template parameter as a function
webix.ui({
view:"tree",
template:function(obj, common){
return common.icon(obj, common) + common.checkbox(obj, common)
+common.folder(obj, common)+"<span>"+obj.value+"</span>",
}
});
The input parameters of the helpers function are:
Benefits of function definition
Template function add more freedom in item template definition as numerous conditions can be taken into an account.
Let's assume, you want to show items that have the nesting level greater than 2 in italic font. In this case you can specify the data template as in:
webix.ui({
view:"tree",
template: function(obj, common){
if (obj.$level>2) {
return common.icon(obj,common)+common.folder(obj,common)+"<i>"+obj.value+"</i>";
} else {
return common.icon(obj,common)+common.folder(obj,common)+obj.value;
}
}
});
You can also define additional common elements within the component type.
webix.ui({
view:"tree",
template:"{common.icon()} #value#"
})
webix.ui({
view:"tree",
template:"{common.folder()} #value#"
});
webix.ui({
view:"tree",
template:"{common.checkbox()} #value#"
});
webix.ui({
view:"tree",
template:"{common.icon()}{common.checkbox()} #value#"
});
webix.ui({
view:"tree",
template:"{common.icon()}{common.folder()} #value#"
});
The same for treetable can be rendered via:
webix.ui({
view:"treetable",
columns:[
{ id:"value",
template:"{common.treetable()} #value#"
},
{...}
]
});
webix.ui({
view:"tree",
template:"{common.icon()}{common.folder()}{common.checkbox()} #value#"
});
The above mentioned template methods are parts of the tree type, a set of methods used for rendering tree items.
Tree type can be extended or altered:
webix.ui({
view:"tree",
type:{
folder:function(obj){
if(obj.$level == 1)
return "<span class='webix_icon mdi mdi-folder-open'></span>";
if (obj.$level == 2)
return "<span class='webix_icon mdi mdi-video'></span>";
return "<span class='webix_icon mdi mdi-file-video'></span>";
}
}
});
webix.ui({
view:"tree",
type:{
my_folder:function(obj){
//code
}
}
});
If you need to apply this type to several trees, you can define the type object separately and then refer to it by its name:
webix.type(webix.ui.tree, {
name:"awesome",
folder:function(obj){
//code
}
});
var tree2 = webix.ui({
view:"tree",
type:"awesome",
});
More about type implementation for data components can be found in the Type implementation article.
Back to top