Make filtering in TreeTable easy. With the help of our programming examples, you'll be able to filter folders according to their levels. The snippet shows the creation of the following filtering options: first level, second level, all levels, all levels (always show children of the match). Feel free to use our coding samples for creating your own web apps.
webix.ui({
view:"scrollview",
body:{
rows:[
{ template:"Default - First level", height:30 },
{
view:"treetable",
columns:[
{ id:"id", header:"", css:{"text-align":"right"}, width:50},
{ id:"value", header:["Title",{content:"textFilter"}], width:250,
template:"{common.treetable()} #value#" },
{ id:"state", header:["State",{content:"selectFilter"}], width:100},
{ id:"hours", header:"Hours", width:100}
],
filterMode:{
level:1
},
autoheight:true,
autowidth:true,
url: "https://docs.webix.com/samples/15_datatable/30_treetable/data/treedata.php", datatype:"xml"
},
{ template:"Second level", height:30 },
{
view:"treetable",
columns:[
{ id:"id", header:"", css:{"text-align":"right"}, width:50},
{ id:"value", header:["Title",{content:"textFilter"}], width:250,
template:"{common.treetable()} #value#" },
{ id:"state", header:["State",{content:"selectFilter"}], width:100},
{ id:"hours", header:"Hours", width:100}
],
filterMode:{
level:2
},
autoheight:true,
autowidth:true,
url: "https://docs.webix.com/samples/15_datatable/30_treetable/data/treedata.php", datatype:"xml"
},
{ template:"All levels", height:30 },
{
view:"treetable",
columns:[
{ id:"id", header:"", css:{"text-align":"right"}, width:50},
{ id:"value", header:["Title",{content:"textFilter"}], width:250,
template:"{common.treetable()} #value#" },
{ id:"state", header:["State",{content:"selectFilter"}], width:100},
{ id:"hours", header:"Hours", width:100}
],
filterMode:{
level:false,
showSubItems:false
},
autoheight:true,
autowidth:true,
url: "https://docs.webix.com/samples/15_datatable/30_treetable/data/treedata.php", datatype:"xml"
},
{ template:"All levels, always show children of match", height:30 },
{
view:"treetable",
columns:[
{ id:"id", header:"", css:{"text-align":"right"}, width:50},
{ id:"value", header:["Title",{content:"textFilter"}], width:250,
template:"{common.treetable()} #value#" },
{ id:"state", header:["State",{content:"selectFilter"}], width:100},
{ id:"hours", header:"Hours", width:100}
],
autoheight:true,
autowidth:true,
url: "https://docs.webix.com/samples/15_datatable/30_treetable/data/treedata.php", datatype:"xml"
}
]
}
});