DataTree Saving, JavaScript Programming Example of DataTree Saving

Home
Examples
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

var tree = {
  view:"tree",
  id:"tree",
  data:tree_data,
  select: true,
  height:300,
  ready:function(){
    var state = webix.storage.local.get("state");
    if (state)
      this.setState(state);
  }
};

function save_state(){
  webix.storage.local.put("state", $$("tree").getState());
};

var buttons = {
  rows:[
    { view:"button", width:100, value:"Save state", click:save_state }
  ]
};

webix.ready(function(){
  if (!webix.env.touch && webix.env.scrollSize)
      webix.CustomScroll.init();
  
  webix.ui({
    rows:[
      tree,
      buttons
    ]
  });
  webix.attachEvent('unload', function(){
    var state = webix.storage.local.get("state");
    if (state)
      $$("tree").setState(state);
  });
});

How to ensure painless DataTree saving?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features