Tree: Tree: Big Data, programming examples of loading big data from a JSON data source to DataTree

webix.ready(function(){
  // title & controls
  webix.ui({
    height:100,
    width:300,
    type:"clean", rows:[
      { template:"<strong>Loading Big data from a JSON</strong>", height:40 },
      {
        margin:10, cols:[
          { view:"label", label:"5000 items", align:"right", width:95 },
          { view:"button", value:"Expand All", click:openAll, inputWidth:130 }
        ]
      }
    ] 
  });
  
  // data
  var first = { id:"-1", value:"Records", open:true, data:[] };
  var data = [first];
  var count = 1;
  for (var i=0; i<99; i++){
    var obj = { value:"l1 - "+count, id:"x"+i, data:[], open:false };
    first.data.push(obj); count++;
    for (var j = 0; j < 9; j++) {
      sub = { value:"l2 - "+count, id:"x"+i+"-"+j, data:[], open:true };
      obj.data.push(sub); count++;
      for (var k = 0; k < 5; k++) {
        child = { value:"l3 - "+count, id:"x"+i+"-"+j+"-"+k };
        sub.data.push(child); count++;
      }
    }
  }

  // timer
  var d1 = new Date();

  // loading data in the tree
  // initialized apart to catch the time of init
  webix.ui({
    view:"tree",
    id:"tree",
    width:300,
    height:500,
    data: data
  });	

  webix.delay(function(){
    webix.message($$("tree").count() + " items rendered in " + Math.round((new Date())-d1) + "ms");
  });

  function openAll(){
    d1 = new Date();
    $$("tree").openAll()
    webix.delay(function(){
      webix.message($$("tree").count() + " items rendered in " + Math.round((new Date())-d1) + "ms");
    });
  }  
});