DataTree State Object, JavaScript Programming Example of DataTree State Object

DataTree State Object, JavaScript Programming Example of DataTree State Object

Meet the programming example of DataTree state object. This piece of code allows you to save and then restore the state of your tree with ease. Pay attention that you are welcome to use coding samples by Webix for accelerating your web development projects.

JS Code

//loading from file
var tree = {
  view:"tree",
  id:"tree",
  data:tree_data,
  height:500,
  select:true
};

var buttons = {
  padding:10, rows:[
    { view:"button", width:150, value:"Save state", click:save_state },
    { view:"button", width:150, value:"Restore state", click:restore_state }
  ]
};

webix.ready(function(){
  webix.ui({
     rows:[
      {
        height:70,
        template:"<b>DataTree state object</b><br><br>"+
         "Click 'Save state', collapse/expand and select items, and then click 'Restore state'."
      },
      {
        cols:[
          tree,
          buttons
      	]
      }
    ]
  });
});

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

function restore_state(){
  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?