stateStoring

Configures 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.

State storing saves the following options:
  • selectionFilter
  • focusedRowKey
  • filterValue
  • selectedRowKeys
  • searchPanel.text
  • filterPanel.filterEnabled
  • paging.pageSize
  • paging.pageIndex
  • columns.visibleIndex
  • columns.dataField
  • columns.name
  • columns.dataType
  • columns.width
  • columns.visible
  • columns.sortOrder
  • columns.sortIndex
  • columns.filterValue
  • columns.selectedFilterOperation
  • columns.filterValues
  • columns.filterType
  • columns.fixed
  • columns.fixedPosition
  • columns.groupIndex
  • View Demo

    See Also

    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:
    gridState:

    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() {
        $("#dataGridContainer").dxDataGrid({
            // ...
            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 { DxDataGridModule } 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: [
            // ...
            DxDataGridModule,
            HttpClientModule
        ],
        // ...
    })
    <dx-data-grid ...>
        <dxo-state-storing 
            [enabled]="true" 
            type="custom" 
            [customLoad]="loadState"
            [customSave]="saveState">
        </dxo-state-storing>
    </dx-data-grid>

    enabled

    Enables state storing.

    Type:

    Boolean

    Default Value: false

    savingTimeout

    Specifies the delay in milliseconds between when a user makes a change and when this change is saved.

    Type:

    Number

    Default Value: 2000

    storageKey

    Specifies the key for storing the widget state.

    Type:

    String

    Default Value: null

    type

    Specifies the type of storage where the state is saved.

    Type:

    String

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

    This option accepts the following values:

    • "sessionStorage"
      The state is stored for the duration of the browser's session.

    • "localStorage"
      The state is stored in the window.localStorage object and has no expiration time.

    • "custom"
      Puts state storing into manual mode. You need to implement the customSave and customLoad functions.

    Use the StateStoringType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: LocalStorage, SessionStorage, and Custom.