Tree allows you to filter nodes on the client side.
Filtering in Tree can be invoked by calling the filter method. The method can be called on some event or action, e.g. button click or page load.
Sorting Tree on a button click
<input type='button' onkeypress='tree.filter("#value#", this.value);'>
<script type="text/javascript" charset="utf-8"> tree = webix.ui({ view:'tree', ...})
</script>
Related sample: Filtering in Tree
The library provides special property filterMode to define how the tree items will be filtered.
The filterMode property is an object that can contain 3 attributes:
Using the filterMode parameter
webix.ui({
view:"tree",
filterMode:{
showSubItems:false,
level:2
}
});
Related sample: Filtering in Tree
For example, we have three trees presented in the image below. Let's apply different filtering modes for each of them.
Thus, we will use the following settings for each tree:
1) default - filtering on all levels, children are displayed
2) filtering on all levels, children aren't displayed (strict mode)
3) filtering items on the second levels only, children aren't displayed
Now, let's filter the tree by the Skoda item. The result is given in the image below:
For example, if you add an input and a button to the page and want to filter Tree by clicking on it, your code may look like this:
Custom filtering function
<input type="text"><input type="button" value='filter' onclick='filterText(this);'>
<script> function filterText(node){
var text = node.previousSibling.value;
if (!text) return tree.filter();
tree.filter(function(obj){ // tree is a Tree instance
return obj.year == text;
})
}
</script>
Back to top