Tree Data Binding, programming examples of Tree Data Binding

Tree Data Binding, programming examples of Tree Data Binding

Check out the programming example for data binding in Tree. Don't hesitate to use our free coding samples or a snippet tool below to accelerate and facilitate your web development projects.

JS Code

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

var tree2 = {
  view:"form",
  id:"form",
  elements:[
    { view:"text", name:"value" },
    { view:"button", value:"Save", click:function(){ this.getFormView().save(); }},
    {}
  ]
};

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

webix.ui({
  rows:[
     {template:"<strong>Data Binding</strong>", height:50},
     {cols:[
      { header:"Master Tree", body:tree1 },
      { header:"Linked Grid", body:grid1 },
      { header:"Linked Tree", body:tree2 }
    ]},
    { rows:[
        { view:"button", value:"Add to Top", click:addToTop, inputWidth:150},
        { view:"button", value:"Add to Selected Parent", click:addToParent, inputWidth:200},            
        { view:"button", value:"Add as 2nd Child of Shawshank Redemption", click:addAsChild, inputWidth:320},    
        { view:"button", value:"Remove Selected Node", click:removeSelected, inputWidth:200}      
    ]} 
  ]
})

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

$$("grid").bind( $$("tree"), "$level");
$$("form").bind( $$("tree") );

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

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

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

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

HTML Code

<script>
var smalltreedata = [
    {id:"root", value:"Films data", open:true, data:[
		{ id:"1", open:true, value:"The Shawshank Redemption", data:[
			{ id:"1.1", value:"Part 1" },
			{ id:"1.2", value:"Part 2", data:[
				{ 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:"1.3", value:"Part 3" }
		]},
		{ id:"2", open:true, value:"The Godfather", data:[
			{ id:"2.1", value:"Part 1" },
			{ id:"2.2", value:"Part 2" }
		]}
	]}
];
</script>