Documentation

Available only in PRO Edition

Saving and Restoring Component State

UIManager helps save and restore only the outer view parameters while inner ones like selection and scrolling direction are saved within the DataState module.

Webix components that use this module feature the saving and restoring functionaluty as well:

Saving Datatable State

Webix datatable provides a possibility to store/restore the state of the tree to cookie, local or session storage.

The state object will contain information about current datatable state:

  • properties (keys) of each data item;
  • column sizes;
  • IDs of currently selected items (each ID is an object with row, column and id properties);
  • scroll position;
  • values of built-in filters;
  • IDs of currently hidden data items.
{
    ids: ["id", "value", "chapter"],
    size:[50, 250, 200], 
    select:[{"row":217,"column":"title","id":"217_title"}],
    scroll:{ x:0, y:0},
    filter:{"year":"1924"},
    hidden:["votes"]
}
  • To save the current tree state to the local storage you should call the getState method as in:
var state = grid.getState();
webix.storage.local.put("state", state);
  • To restore the saved state you should call the setState method:
var state = webix.storage.local.get("state");
if (state)
    grid.setState(state);

Related sample:  DataTable state object::Session

Saving Treetable State

Webix treetable provides a possibility to store/restore the state of the tree to cookie, local or session storage.

The state object will contain information about current treetable state:

  • IDs of currently hidden data items;
  • properties (keys) of each data item;
  • open treetable nodes;
  • scroll position;
  • IDs of currently selected items (each ID is an object with row, column and value properties);
  • column sizes.
{
    hidden:[], 
    ids: ["id", "value", "chapter"], 
    open:["1", "1.2"],
    scroll:{ x:0, y:0},
    select:[{"row":"1.2","column":"value","id":"1.2"}],
    size:[50, 250, 200]
}
  • To save the current tree state to the local storage you should call the getState method as in:
var state = grid.getState();
webix.storage.local.put("treetable_state", state);
  • To restore the saved state you should call the setState method:
var state = webix.storage.local.get("treetable_state");
if (state)
    grid.setState(state);

Related sample:  TreeTable state object

Saving Tree State

Webix tree provides a possibility to store/restore the state of the tree to cookie, local or seccion storage.

The tree state object will contain information about opened and selected nodes:

{
    open:['1', '2', 'root'],
    select: ['1.3']
}

where '1', '2', 'root' and '1.3' are the ids of the related nodes.

  • To save the current tree state to the local storage you should call the getState method as in:

Saving the tree state to the local storage

var state = $$("tree").getState();
webix.storage.local.put("state", state);
  • To restore the saved state you should call the setState method:

Restoring the tree state from the local storage

var state = webix.storage.local.get("state");
if (state)
    $$("tree").setState(state);

Related sample:  Tree State Object::Session

Back to top