DataTree State Object: Session, JavaScript Programming Example of DataTree State Object: Session

Home
Examples
DataTree State Object: Session

JavaScript Programming Example of DataTree State Object: Session

Do you want a tree to look the exact way you left it when you enter a web app next time? Get our programming example to tackle the problem. Press "save state" before leaving a web page, and a tree state survives till the next session. Feel free to use our coding samples and enjoy the benefits.

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

Want to stop worrying about restoring tree state and other stuff related to DataTree?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features