Configuration stateStoring

    Specifies options of state storing.

    Type: Object

    At runtime, end-users may adjust user interface settings to their needs. By default, these settings disappear when you dispose of the grid; on next loading, the 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 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.

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

    DataGrid provides the state method to operate the grid state in code. Call this method without arguments to obtain the grid state. When you need to set the 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 array or null argument.

    View Demo

    customLoad

    Specifies a callback function that performs specific actions on state loading.

    Type: function()
    Return Value: jQuery.Deferred
    A grid state.

    If you chose the custom state storing type, use the functions assigned to the customSave and customLoad options for handling state changes. The function assigned to the customLoad option is called when a state is restored. This function should return an object representing a grid state. Normally, it is the object saved within the customSave function.

    customSave

    Specifies a callback function that performs specific actions on state saving.

    Type: function(gridState)
    Function parameters:
    gridState: Object
    A current grid state.

    If you chose the custom state storing type, use the functions assigned to the customSave and customLoad options for handling state changes. The function assigned to the customSave option is called every time a grid state is changed. You can access the currently changed grid state using the function's first parameter. The state is represented by an opaque data object.

    To specify a callback function that performs specific actions on state loading, use the customLoad option.

    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 DataGrid 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 must 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: 'localStorage' | 'sessionStorage' | 'custom'

    When state storing is enabled, DataGrid 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 grid settings, such as grouping, sorting, column order, 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.