We have functionality that persists the grid state in the DB per user so that each user can have their own set of columns, column order, widths etc.
But, getOptions() returns absolutely everything, including foreign-key value lists, datasource(including the URL)...a bunch of stuff you wouldn't actually ever want to persist but are legitimately part of the current options setup. So, it us up to you to selectively choose what you really want from getOptions().
This is what I do to keep only what I want to persist and ignore the rest.
gridState: function () {
// Get the current grid state, extract only the options we want to persist.
var state = this.kGrid.getOptions(),
fields = state.dataSource.fields;
// Remove the values attribute from every field so that new values can be added to the enumeration
// without the grid state throwing them away when restored due to the new values not being in the
// originally persisted state.
for (var i = 0; i < fields.length; i++) {
delete fields[i].values;
}
return kendo.stringify({
columns: state.columns,
dataSource: {
fields: fields,
filter: state.dataSource.filter,
group: state.dataSource.group,
sort: state.dataSource.sort,
pageSize: state.dataSource.pageSize
},
// If the column widths are less than the grid width, they will always stretch to fill the grid...
//...and then all column sizing from that point on is messed up.
// So, we persist and restore the underlying <table> element width manually, which circumvents this behaviour.
tableWidth: this.kGrid.table.width()
});
}
This returns the string I persist in the database which only has want I want, which is then restored with:
if (this.state) {
state = JSON.parse(this.state);
}
this.kGrid.setOptions(state);
if (state.tableWidth) {
// Restore the underlying table width to allow for the column widths to be less than the grid width
// without odd behaviour.
this.kGrid.wrapper.find("table").width(state.tableWidth);
}
this.kGrid.dataSource.read();
I use this all over the place and it is working well for me. Hope it helps.