DataTree Saving, JavaScript Programming Example of DataTree Saving

DataTree Saving, JavaScript Programming Example of DataTree Saving

Use a DataTree saving sample to be able to add new items to a tree and keep all the changes. It is also possible to change parent elements by means of drag-and-drop. Note that we allow free use of our programming examples.

JS Code

webix.protoUI({
  name:"edittree"
}, webix.EditAbility, webix.ui.tree);

var tree = {
  id: "datatree1",
  view:"edittree",
  template:"{common.icon()} {common.folder()} <span>#title#</span>",
  editable:true,
  editaction:"dblclick",
  editor:"text",
  editValue:"title",
  select:"multiselect",
  drag:true,

  url: "//docs.webix.com/samples/server/pages",
  save: "rest->//docs.webix.com/samples/server/pages"
};

var buttons = {
  view:"toolbar", elements:[
    { view:"button", value:"Add Row", click:function(){
      var tree = $$("datatree1");
      var parent = tree.getSelectedId()||0;
      tree.add({ title:""}, 0, parent);
      tree.open(parent);
    }},
    { view:"button", value:"Delete Row", click:function(){
      var tree = $$("datatree1");
      var id = tree.getSelectedId();
      if (id)
        tree.remove(id);
    }},
    {}
  ]
};

webix.ui({
  rows:[
    {template:"<strong>Tree Saving</strong><br><br>The sample demonstrates saving tree after changes: add/update/delete items, changing the parent using drag-n-drop.", height:80},
    buttons, tree
  ]
});

$$("datatree1").attachEvent("onAfterDrop", function(details){
  this.updateItem(details.start);
});