Saving and Restoring Components State

UIManager can 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)
  • object of the currently selected items (each object contains row, column, and id field)
  • 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)
  • objects of currently selected items (each objects contains the row, column, and value fields)
  • the scroll position
  • the order of columns
  • the settings 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: Saving and Restoring State

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: Saving State

Back to top