[Solved] Problem with saved states

[Elliot]

I am saving the state of a grid as per the docs:

var grid = $("#deficiencyGrid").data("kendoGrid");
vm.grid.state = kendo.stringify(grid.getOptions());

However, it is saving the datasource with the state.  If I then add a new item and come back to the grid and restore the state any new items dont appear.  I have tried setting the datasource like:

var grid = $("#deficiencyGrid").data("kendoGrid");
var options = JSON.parse(vm.gridViews[i].state);
options.dataSource = vm.deficiencies;
options.dataBound = onDataBound;
grid.setOptions(options);

but this then seems to overwrite the entire state as none of the filters are applied etc..

How do I achieve what I am looking for?

[Stephen]

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.

 

 

 

[Elliot]

Thanks for the post.  It lead me to a simple solution.  I ended up setting the data property of the datasource (options.dataSource.data = dataArray). This kept all the other settings.