Filtering in TreeTable
Programming Example of Filtering in TreeTable

JavaScript Filtering in TreeTable

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.

JS Code

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"      
      }
    ]
  }
});