Vue

stateStoring

A configuration object specifying options related to state storing.

Type:

Object

State storing enables the widget to save applied settings and restore them the next time the widget is loaded. Assign true to the stateStoring.enabled option to enable this functionality.

The state is saved with a specified storage key.

State storing saves the following options:
  • area
  • areaIndex
  • filterType
  • filterValues
  • sortBy
  • sortOrder
  • sortBySummaryField
  • sortBySummaryPath
  • expanded
  • summaryType
  • summaryDisplayMode
  • To specify the time in milliseconds between automatic state saves, set the savingTimeout option. To specify the lifetime of the saved state, set the storage type.

    Use the PivotGridDataSource's state method to manage the PivotGrid's state at runtime.

    View Demo

    customLoad

    Specifies a function that is executed on state loading. Applies only if the type is "custom".

    Type:

    Function

    Return Value:

    Promise<Object> (jQuery or native)

    The widget state. As a rule, it is a state that you save within the customSave function.

    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.

    customSave

    Specifies a function that is executed on state saving. Applies only if the type is "custom".

    Type:

    Function

    Function parameters:
    state:

    Object

    The current widget state.

    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:

    jQuery
    JavaScript
    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);
                }
            },
        });
    })
    Angular
    TypeScript
    HTML
    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>

    enabled

    Specifies whether or not a grid saves its state.

    Type:

    Boolean

    Default Value: false

    savingTimeout

    Specifies the delay between the last change of a grid state and the operation of saving this state in milliseconds.

    Type:

    Number

    Default Value: 2000

    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.

    NOTE
    If a long timeout is specified, the grid state may be lost, e.g., if the user closes the browser before the timeout is over. Hence, be mindful when specifying the savingTimeout option.

    storageKey

    Specifies a unique key to be used for storing the grid state.

    Type:

    String

    Default Value: null

    type

    Specifies the type of storage to be used for state storing.

    Type:

    String

    Default Value: 'localStorage'
    Accepted Values: 'custom' | 'localStorage' | 'sessionStorage'

    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.