Tree Data Binding: Subdata, programming examples of Tree Data Binding: Subdata

var tree1 = {
  view:"tree",
  id:"tree1",
  select:true,
  template:"{common.icon()} {common.folder()} <span>#value#</span>",
  data: tree_data,
  ready:function(){
  	this.select(this.getFirstId());
  }
};

var grid1 = {
  view:"datatable",
  id:"grid1",
  columns:[
    { id:"id" },
    { id:"value", fillspace:1, editor:"text" }
  ], editable:true
};

var grid2 = {
  view:"datatable",
  id:"grid2",
  columns:[
    { id:"id" },
    { id:"value", fillspace:1, editor:"text" }
  ], editable:true
};

webix.ui({
  rows:[
     {template:"<strong>Data Binding: Subdata</strong>", height:50, type:"header", css:"webix_dark"},
     {cols:[
       { header:"Master Tree", body:tree1 },
       { header:"Data", body:grid1 },
       { header:"Childs and Data", body:grid2 }
    ]},
    { rows:[
        { view:"button", value:"Add to Top", click:addToTop},
        { view:"button", value:"Add to Selected Parent", click:addToParent},            
        { view:"button", value:"Add as 2nd Child of Shawshank Redemption", click:addAsChild},    
        { view:"button", value:"Remove Selected Node", click:removeSelected}      
    ]} 
  ]
})

$$("grid1").bind($$("tree1"), "$data", "records");
$$("grid2").bind($$("tree1"), "$data", function(obj, source){
  if (!obj) return this.clearAll();
  var fulldata = [].concat(source.data.getBranch(obj.id)).concat(obj.records);
  this.data.importData(fulldata, true);
}); 

function addToTop(){
  $$("tree1").add({value:"New item"}, 0);
}

function addToParent(){
  var parentId= $$("tree1").getSelectedId();
  if(parentId)
    $$("tree1").add({value:"New item"}, 0, parentId);
  else
    webix.alert("Select node");
}

function addAsChild(){
  $$("tree1").select("1");
  var parentId = $$("tree1").getSelectedId();
  var pos = $$("tree1").getBranchIndex("1.2"); // "1.2" is the "Part2" item's id
  $$("tree1").add({value:"New item"}, pos, parentId);
}

function removeSelected(){
  var nodeId = $$("tree1").getSelectedId();
  $$("tree1").remove(nodeId);
}