Tree Data Binding, programming examples of Tree Data Binding

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

var grid1 = {
  view:"datatable",
  id:"grid1",
  columns:[
    { id:"id" },
    { id:"value", fillspace:1, editor:"text" }
  ], editable:true,
  on:{
    onAfterEditStop:function(state, editor){
      $$("tree1").updateItem(editor.row, this.getItem(editor.row));
    }
  }
};

webix.ui({
  rows:[
     {cols:[
      { header:"Master Tree", body:tree1 },
      { header:"Linked Datatable", body:grid1 }
    ]},
    {
      cols: [
        {
          rows: [
            { view:"button", value:"Add to Top", click:addToTop, width: 150},
            { view:"button", value:"Add to Selected Parent", click:addToParent, width: 200},
          ]
        },
        {
          rows: [
            { view:"button", value:"Add as 2nd Child of Shawshank Redemption", width: 350},    
        	{ view:"button", value:"Remove Selected Node", click:removeSelected, width: 200}
          ]
        }
      ]},        
  ]
})

$$("tree1").filter(function(obj){
  return !!obj.$count;
});

$$("grid1").bind($$("tree1"), "$level");

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