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 functionality as well:

Saving Datatable State

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

The state object will contain information about the current datatable state:

  • column IDs;
  • column sizes (where -1 means fillspace is set for the column);
  • the IDs of currently selected items (each ID is an object with row, column and id properties);
  • scroll position;
  • the order of columns;
  • settings for sorting;
  • values of built-in filters;
  • IDs of currently hidden columns.
{
    "ids":["title","year","votes"],
    "size":[-1,80,100],
    "select":[{ "row":5,"column":"title","id":5}],
    "scroll":{"x":0,"y":77},
    "order":["rank","title","year","votes"],
    "sort":{"id":"votes","dir":"asc"},
    "filter":{"title":"o","year":"19"},
    "hidden":["rank"]
}
  • To get the current datatable state call the getState method:
var state = grid.getState();
// you can save it to the local storage 
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 treetable to cookie, local or session storage.

The state object will contain information about the current treetable state:

  • the Column IDs;
  • column sizes (-1 means that fillspace was set).
  • IDs of currently selected items (each ID is an object with row, column and value properties);
  • the scroll position;
  • the order of columns;
  • the serrings for sorting;
  • values of built-in filters;
  • IDs of currently hidden data items;
  • open treetable nodes.
{
    "ids":["value","type"],
    "size":[-1,80],
    "select":[{"row":"v_0_1","column":"value","id":"v_0_1"}],
    "scroll":{"x":0,"y":51},
    "order":["id","value","type"],
    "sort":{"id":"value","dir":"desc"},
    "filter":{"value":"e","type":"f"},
    "hidden":["id"],
    "open":["3","m_3","v_0"]
}
  • To save the current treetable 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 session 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