Free Trial Buy

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. These settings include filtering, sorting, column order and width, selection, grouping, and others. Assign true to the stateStoring.enabled option to enable this functionality.

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 { Http, HttpModule, Headers, RequestOptions, ResponseContentType, RequestMethod  } from '@angular/http';
import { DxDataGridModule } from 'devextreme-angular';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/catch';
// ...
export class AppComponent {
    constructor(private http: Http) { }

    sendStorageRequest = (storageKey, dataType, method, data) => {
        let url  = "https://url/to/your/storage/" + JSON.stringify(storageKey);
        let options: RequestOptions = new RequestOptions({
            headers: new Headers({
                "Accept": "text/html",
                "Content-Type": "text/html"
            }),
            method: method,
            responseType: dataType
        });
        if (data) { 
            options.body = JSON.stringify(data);
        }
        return http.request(url, options)
                    .toPromise()
                    .then(response => {
                        return response.json();
                    })
                    .catch(error => {
                        return Promise.reject(error.message || error)
                    });
    }

    loadState = () => {
        return this.sendStorageRequest('storageKey', ResponseContentType.Json, RequestMethod.Get);
    } 

    saveState = (state) => {
        this.sendStorageRequest('storageKey', ResponseContentType.Text, RequestMethod.Put, state);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        HttpModule
    ],
    // ...
})
<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 local storage and has no expiration time.

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

When using the widget as an ASP.NET MVC Control, specify this option using the StateStoringType enum. This enum accepts the following values: LocalStorage, SessionStorage, and Custom.