JavaScript Programming Example of Loading Big Datasets in TreeTable

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