JavaScript Programming Example of Loading Big Datasets in TreeTable

Home
Examples
Loading Big Datasets in TreeTable

JavaScript Loading Big datasets in TreeTable

Get the programming example for loading big datasets in a TreeTable. A big number of files and folders can impede data management. The coding sample below allows hiding and opening the folders' contents. This option significantly facilitates the process of information search and analysis. Feel free to use our code samples for creating your own great web apps.

JS Code

var tpl = {
  template:"<b>Loading big datasets</b><br><br>Just big",
  height:70
};

var test_columns = [
  { id:"id", header:"", css:{"text-align":"right"}, width:50 },
  { id:"value", sort:"string",	header:"Title",	width:250, template:"{common.treetable()} #value#" }
];

for (var i=1; i<50; i++)
  test_columns.push({ id:"data"+i, width:100, sort:"string" });

var test_data = [];
for (var i=1; i<101; i++){
  var obj = { id:i, value:"Item at "+i }
  var data = [];
  for (var j=1; j<101; j++){
    var sub = { id:i+"."+j,  value:"Sub-item at "+j };
    for (var z = 1; z<50; z++)
      sub["data"+z] = Math.floor(Math.random()*1000);
    data.push(sub);
  }
  obj.data = data;
  test_data.push(obj);
};

var grid = {
  view:"treetable",
  id:"grid",
  leftSplit:2,
  columns: test_columns,
  scroll:"y",
  data: test_data
};

var buttons = {
  cols:[
    { view:"button", width:100, value:"Open all", click:function(){ $$("grid").openAll(); } },
    { view:"button", width:100, value:"Close all", click:function(){ $$("grid").closeAll(); } }
  ]
};

webix.ready(function(){
  webix.ui({
    padding:10, rows:[
      tpl,
      grid,
      buttons
    ]
  });
});

How to load big datasets in a TreeTable with Webix?

Download Webix UI Framework

Study TreeTable Documentation

Check out TreeTable Widget Features