Persisting the State

You can save the customizations and settings of the user and then restore them when the user logs back later on.

The Kendo UI Grid wrapper for Vue enables you to save and restore the settings that were previously applied to its structure by using the getOptions() and setOptions() methods from its API. These methods allow you to serialize the current state of the Grid when needed and recover it at a certain point in time. The following example demonstrates how to use the localStorage key/value pair to save and load the Kendo UI Data Grid wrapper for Vue settings.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
                      :page-size='20'>
    </kendo-datasource>

    <a href="#" class="k-button" v-on:click="saveState">Save State</a>
    <a href="#" class="k-button" v-on:click="loadState">Load State</a>

    <kendo-grid ref="grid"
                :height="600"
                :data-source-ref="'datasource1'"
                :groupable="true"
                :sortable="true"
                :reorderable="true"
                :resizable="true"
                :column-menu="true"
                :filterable-mode="'row'"
                :pageable-refresh="true"
                :pageable-page-sizes="true"
                :pageable-button-count="5">
        <kendo-grid-column :field="'ContactName'"
                           :title="'Contact Name'"
                           :width="250"
                           :locked="true"></kendo-grid-column>
        <kendo-grid-column :field="'ContactTitle'"
                           :title="'Contact Title'"
                           :width="350"></kendo-grid-column>
        <kendo-grid-column :field="'CompanyName'"
                           :title="'Company Name'"
                           :width="350"></kendo-grid-column>
        <kendo-grid-column :field="'Country'"
                           :width="450"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            schemaModelFields: {
                UnitsInStock: { type: "number" },
                ProductName: { type: "string" },
                UnitPrice: { type: "number" },
                UnitsOnOrder: { type: "number" },
                UnitsInStock: { type: "number" }
            },
            groupDefinition: {
                field: "UnitsInStock",
                aggregates: [
                    { field: "ProductName", aggregate: "count" },
                    { field: "UnitPrice", aggregate: "sum"},
                    { field: "UnitsOnOrder", aggregate: "average" },
                    { field: "UnitsInStock", aggregate: "count" }
                ]
            },
            aggregateDefinition: [
                { field: "ProductName", aggregate: "count" },
                { field: "UnitPrice", aggregate: "sum" },
                { field: "UnitsOnOrder", aggregate: "average" },
                { field: "UnitsInStock", aggregate: "min" },
                { field: "UnitsInStock", aggregate: "max" }
            ]
        }
    },
    methods: {
        saveState: function(e) {
            e.preventDefault();

            var grid = this.$refs.grid.kendoWidget();

            localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
        },
        loadState: function(e) {
            e.preventDefault();

            var options = localStorage["kendo-grid-options"];
            var grid = this.$refs.grid.kendoWidget();

            if (options) {
                grid.setOptions(JSON.parse(options));
            }
        }
    }
})

In this article