Vue PivotGrid - stateStoring

At runtime, end-users may adjust pivot grid settings to their needs. By default, these settings disappear when the pivot grid disposes (for example, on page reload) and the pivot grid appears in its original configuration. If user settings need to be saved and then restored, enable client-side state storing for the grid by setting the stateStoring.enabled option to true. The pivot grid state will be saved under a specified storage key. The saving operation is conducted after a certain amount of time has passed since the last change of the state. To specify the amount of time in milliseconds, use the savingTimeout option.

PivotGrid supports various types of state storing. The type of storage that will suit your needs best depends on the supposed lifetime of user-specified pivot grid settings. For more information about state storing types, refer to the type option description.

The PivotGridDataSource provides the state method. Use it to get or change the pivot grid state at runtime. Call this method without arguments to obtain the pivot grid state. When you need to set the pivot grid state, call this method with the state object as its argument. You can also return the widget to its default state by calling the state method with the empty object or null argument.

View Demo

Use the customSave and customLoad functions to manually implement state storing: in customSave, save the state to a custom storage; in customLoad, load it. You can also adjust the state in both functions. See an example in the customSave topic.

Use the customSave and customLoad functions to manually implement state storing: in customSave, save the state to a custom storage; in customLoad, load it. You can also adjust the state in both functions.

In the following code, the state is saved and loaded from a remote storage:

function sendStorageRequest (storageKey, dataType, method, data) {
    var deferred = new $.Deferred;
    var storageRequestSettings = {
        url: "https://url/to/your/storage/" + JSON.stringify(storageKey),
        headers: {
            "Accept" : "text/html",
            "Content-Type" : "text/html"
        },
        method: method,
        dataType: dataType,
        success: function (data) {
            deferred.resolve(data);
        },
        fail: function (error) {
            deferred.reject();
        }
    };
    if (data) {
        storageRequestSettings.data = JSON.stringify(data);
    }
    $.ajax(storageRequestSettings);
    return deferred.promise();
}
$(function() {
    $("#pivotGridContainer").dxPivotGrid({
        // ...
        stateStoring: {
            enabled: true,
            type: "custom",
            customLoad: function () {
                return sendStorageRequest("storageKey", "json", "GET");;
            },
            customSave: function (state) {
                sendStorageRequest("storageKey", "text", "PUT", state);
            }
        },
    });
})

import { HttpClient, HttpClientModule, HttpHeaders, HttpRequest } from "@angular/common/http";
import { DxPivotGridModule } from "devextreme-angular";
import "rxjs/add/operator/toPromise";
import "rxjs/add/operator/catch";
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { }

    sendStorageRequest = (storageKey, dataType, method, data) => {
        let url  = "https://url/to/your/storage/" + JSON.stringify(storageKey);
        let req: HttpRequest = new HttpRequest(method, url, {
            headers: new HttpHeaders({
                "Accept": "text/html",
                "Content-Type": "text/html"
            }),
            responseType: dataType
        });
        if (data) {
            req.body = JSON.stringify(data);
        }
        return httpClient.request(req)
            .toPromise();
    }

    loadState = () => {
        return this.sendStorageRequest("storageKey", "json", "Get");
    } 

    saveState = (state) => {
        this.sendStorageRequest("storageKey", "text", "Put", state);
    }
}
@NgModule({
    imports: [
        // ...
        DxPivotGridModule,
        HttpClientModule
    ],
    // ...
})

<dx-pivot-grid ...>
    <dxo-state-storing 
        [enabled]="true" 
        type="custom" 
        [customLoad]="loadState"
        [customSave]="saveState">
    </dxo-state-storing>
</dx-pivot-grid>

When using the PivotGrid widget, a number of settings may be changed at runtime. When these changes are being made one after another, there is no need to save the grid state after each change. Instead, specify the savingTimeout option, which dictates how much time should pass between the last change of the state and the operation of saving this state.

When state storing is enabled, PivotGrid stores data about its state on the client side. The type of storage that will suit your needs best depends on the supposed lifetime of user-specified pivot grid settings, such as fiends configuration, sorting, filters, expanded headers, etc. If these settings should be destroyed after a browser session ends, use a session storage. If it is important to keep them for a longer time, choose a local storage.

If you want to define specific actions on saving and loading a state, use a custom type of storage. For this purpose, specify the customSave and customLoad callback functions.