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

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

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