Angular TreeList - stateStoring

Configures state storing.

Selector: dxo-state-storing
Type:

StateStoring

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

State storing saves the following properties:

  1. expandedRowKeys are not saved if autoExpandAll is true.

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 UI component 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 storage; in customLoad, load it. You can also modify the state in both functions.

View on GitHub

If you need to save and load the state from a remote storage, use the following code:

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,
        data: data ? JSON.stringify(data) : null,
        dataType: dataType,
        success: function (data) {
            deferred.resolve(data);
        },
        fail: function (error) {
            deferred.reject();
        }
    };
    $.ajax(storageRequestSettings);
    return deferred.promise();
}
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        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 { DxTreeListModule } from "devextreme-angular";
import { lastValueFrom } from 'rxjs';
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<any> = new HttpRequest(method, url, {
            headers: new HttpHeaders({
                "Accept": "text/html",
                "Content-Type": "text/html"
            }),
            responseType: dataType,
            body: data ? JSON.stringify(data) : null
        });
        return lastValueFrom(httpClient.request(req));
    }

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

    saveState = (state) => {
        this.sendStorageRequest("storageKey", "text", "Put", state);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule,
        HttpClientModule
    ],
    // ...
})
<dx-tree-list ...>
    <dxo-state-storing 
        [enabled]="true" 
        type="custom" 
        [customLoad]="loadState"
        [customSave]="saveState">
    </dxo-state-storing>
</dx-tree-list>
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxStateStoring 
            :enabled="true" 
            type="custom" 
            :custom-load="loadState"
            :custom-save="saveState"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxStateStoring
} from 'devextreme-vue/tree-list';
import 'whatwg-fetch';

function sendStorageRequest (storageKey, method, data) {
    const url = "https://url/to/your/storage/" + JSON.stringify(storageKey);
    const requestOptions = {
        method: method,
        headers: {
            "Accept": "text/html",
            "Content-Type": "text/html"
        },
        body: data ? JSON.stringify(data) : null
    };
    return fetch(url, requestOptions)
            .then(response => response.json())
            .catch(() => { throw 'Data Loading Error'; });
}

export default {
    components: {
        DxTreeList,
        DxStateStoring
    },
    // ...
    methods: {
        loadState () {
            return sendStorageRequest("storageKey", "GET");
        },
        saveState (state) {
            sendStorageRequest("storageKey", "PUT", state);
        }
    }
}
</script>
React
App.js
import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    StateStoring
} from 'devextreme-react/tree-list';
import 'whatwg-fetch';

function sendStorageRequest (storageKey, method, data) {
    const url = "https://url/to/your/storage/" + JSON.stringify(storageKey);
    const requestOptions = {
        method: method,
        headers: {
            "Accept": "text/html",
            "Content-Type": "text/html"
        },
        body: data ? JSON.stringify(data) : null
    };
    return fetch(url, requestOptions)
            .then(response => response.json())
            .catch(() => { throw 'Data Loading Error'; });
}

export default function App() {
    const loadState = useCallback(() => {
        return sendStorageRequest("storageKey", "GET");
    }, []);

    const saveState = useCallback((state) => {
        sendStorageRequest("storageKey", "PUT", state);
    }, []);

    return (
        <TreeList ... >
            <StateStoring 
                enabled={true}
                type="custom"
                customLoad={loadState}
                customSave={saveState}
            />
        </TreeList>
    );
}
See Also

customSave

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

Type:

Function

Function parameters:
gridState:

Object

The current UI component state.

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

View on GitHub

If you need to save and load the state from a remote storage, use the following code:

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,
        data: data ? JSON.stringify(data) : null,
        dataType: dataType,
        success: function (data) {
            deferred.resolve(data);
        },
        fail: function (error) {
            deferred.reject();
        }
    };
    $.ajax(storageRequestSettings);
    return deferred.promise();
}
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        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 { DxTreeListModule } from "devextreme-angular";
import { lastValueFrom } from 'rxjs';
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<any> = new HttpRequest(method, url, {
            headers: new HttpHeaders({
                "Accept": "text/html",
                "Content-Type": "text/html"
            }),
            responseType: dataType,
            body: data ? JSON.stringify(data) : null
        });
        return lastValueFrom(httpClient.request(req));
    }

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

    saveState = (state) => {
        this.sendStorageRequest("storageKey", "text", "Put", state);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule,
        HttpClientModule
    ],
    // ...
})
<dx-tree-list ...>
    <dxo-state-storing 
        [enabled]="true" 
        type="custom" 
        [customLoad]="loadState"
        [customSave]="saveState">
    </dxo-state-storing>
</dx-tree-list>
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxStateStoring 
            :enabled="true" 
            type="custom" 
            :custom-load="loadState"
            :custom-save="saveState"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxStateStoring
} from 'devextreme-vue/tree-list';
import 'whatwg-fetch';

function sendStorageRequest (storageKey, method, data) {
    const url = "https://url/to/your/storage/" + JSON.stringify(storageKey);
    const requestOptions = {
        method: method,
        headers: {
            "Accept": "text/html",
            "Content-Type": "text/html"
        },
        body: data ? JSON.stringify(data) : null
    };
    return fetch(url, requestOptions)
            .then(response => response.json())
            .catch(() => { throw 'Data Loading Error'; });
}

export default {
    components: {
        DxTreeList,
        DxStateStoring
    },
    // ...
    methods: {
        loadState () {
            return sendStorageRequest("storageKey", "GET");
        },
        saveState (state) {
            sendStorageRequest("storageKey", "PUT", state);
        }
    }
}
</script>
React
App.js
import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    StateStoring
} from 'devextreme-react/tree-list';
import 'whatwg-fetch';

function sendStorageRequest (storageKey, method, data) {
    const url = "https://url/to/your/storage/" + JSON.stringify(storageKey);
    const requestOptions = {
        method: method,
        headers: {
            "Accept": "text/html",
            "Content-Type": "text/html"
        },
        body: data ? JSON.stringify(data) : null
    };
    return fetch(url, requestOptions)
            .then(response => response.json())
            .catch(() => { throw 'Data Loading Error'; });
}

export default function App() {
    const loadState = useCallback(() => {
        return sendStorageRequest("storageKey", "GET");
    }, []);

    const saveState = useCallback((state) => {
        sendStorageRequest("storageKey", "PUT", state);
    }, []);

    return (
        <TreeList ... >
            <StateStoring 
                enabled={true}
                type="custom"
                customLoad={loadState}
                customSave={saveState}
            />
        </TreeList>
    );
}
See Also

enabled

Enables state storing.

Type:

Boolean

Default Value: false

View Demo

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 UI component state.

Type:

String

Default Value: null

View Demo

type

Specifies the type of storage where the state is saved.

Type:

StateStoreType

Default Value: 'localStorage'

This property 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.

    View Demo

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