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

Home
Examples
Tree Data Binding: Subdata

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

Get the programming example for data binding in Tree. The format of bound data presentation can be set via a function or a string. Don't hesitate to use our free coding samples or a snippet tool below to facilitate the process of web development.

JS Code

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

HTML Code

<script>
var tree_data = [
  {id:"root", value:"Films data", open:true,
   records:[ { id:"1.1", value:"Films 1" }, { id:"1.2", value:"Films 2" } ],
   data:[
     { id:"1", open:true, value:"The Shawshank Redemption",
      records:[ { id:"x.2", value:"Shawshank" } ],
      data:[
        { id:"1.2", value:"Part 2", records:[
          { id:"1.2.1", value:"Page 1" },
          { id:"1.2.2", value:"Page 2" },
          { id:"1.2.3", value:"Page 3" },
          { id:"1.2.4", value:"Page 4" },
          { id:"1.2.5", value:"Page 5" }
        ]},
      ]},
     { id:"2", open:true, value:"The Godfather", records:[
       { id:"2.1", value:"Part 1" },
       { id:"2.2", value:"Part 2" }
     ]}
   ]}
];
</script>

How to bind data in Tree?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features