23 days to give it a try before you buy! Download now. The best deals on licenses are coming soon Download now. The best deals on licenses are coming soon

Static and Dynamic Loading in TreeTable
Programming Example of TreeTable Static and Dynamic Loading

TreeTable Static and Dynamic Loading JavaScript code

You can choose the way data is displayed in a TreeTable. When a TreeTable loads statically, a column width adapts to the text width. Dynamic loading allows you to change the column width. Feel free to use our code samples below.

JS Code

/*
  In the upper treetable data is loaded initially. 
  In the lower table the first level is loaded initially and 
  its child elements are loaded upon opening the parent branch.
*/

webix.ui({
  view: "scrollview",
  scroll: "y",
  body: {
    rows:[
      { template:"<br><b>Static</b>", height:54 }, 
      {
        view:"treetable",
        columns:[
          { id:"id",	header:"", css:{"text-align":"right"},  	width:50},
          { id:"value",	header:"Title",	width:250,
           template:"{common.treetable()} #value#" },
          { id:"state",	header:"State",	width:100},
          { id:"hours",	header:"Hours",	width:100}
        ],
        autoheight:true,
        autowidth:true,    
        url: "https://docs.webix.com/samples/server/projects"
      },    

      { template:"<br><b>Dynamic</b>", height:54 }, 

      {
        view:"treetable",
        columns:[
          { id:"id",	header:"", css:{"text-align":"right"}, 	width:50},
          { id:"value",	header:"Film title", width:250,
           template:"{common.treetable()} #value#" },
          { id:"state",	header:"State"},
          { id:"hours",	header:"Hours"}
        ],
        autoheight:true,
        autowidth:true,    
        url: "https://docs.webix.com/samples/server/projects_dynamic"
      }
    ]
  }
});

How to ensure static and dynamic loading with the Webix TreeTable widget?