GridState
Mixin

Mixin for Grid that handles state. It serializes the following grid properties:

rowHeight
selectedCell
selectedRecords
columns (order, widths, visibility)
store (sorters, groupers, filters)
scroll position
collapsed group records
tree group levels

See State for more information on state.

targetElement.innerHTML = '<p>Click the first button to store grids state, rearrange the grid, then click the second one to restore</p>'; // button to store state const storeButton = new Button({ appendTo : targetElement, text : 'Store', onClick : () => { // grid.state fetches the grids current state localStorage.setItem('docs-grid-state', JSON.stringify(grid.state)); Toast.show('State stored'); } }); // button to restore state const restoreButton = new Button({ appendTo : targetElement, text : 'Restore', onClick : () => { const state = JSON.parse(localStorage.getItem('docs-grid-state')); // assigning to grid.state applies a state to the grid if (state) grid.state = state; Toast.show('State restored'); } }); // grid with cell editing const grid = new Grid({ appendTo : targetElement, // makes grid as high as it needs to be to fit rows autoHeight : true, data : DataGenerator.generateData(5), columns : [ // We strongly recommend using id on columns when storing Grid state, to be // certain that the state is applied to the correct column { field : 'name', id : 'name', text : 'Name', flex : 1 }, { field : 'city', id : 'city', text : 'City', width : 150 }, { field : 'color', id : 'color', text : 'Color', width : 150 } ] });

Configs

Configs are options you supply in a configuration object when creating an instance of this class

stateSettings : Object
The properties of this settings object controls how grid is restored from state data.

To disable state restoration for unconfigured columns:
```
const grid = new Grid({
    stateSettings : {
        restoreUnconfiguredColumns : false
    }
});
```
- restoreUnconfiguredColumns : Booleantrue
  
  Determines whether to restore columns from the state that are not explicitly defined in the grid configuration.
Has a corresponding runtime stateSettings property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isGridState : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of GridState class, or subclass thereof.

stateSettings : Object
The properties of this settings object controls how grid is restored from state data.

To disable state restoration for unconfigured columns:
```
const grid = new Grid({
    stateSettings : {
        restoreUnconfiguredColumns : false
    }
});
```
- restoreUnconfiguredColumns : Booleantrue
  
  Determines whether to restore columns from the state that are not explicitly defined in the grid configuration.
Has a corresponding stateSettings config.
isGridState : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of GridState class, or subclass thereof.
state : GridStateInfo

Gets or sets grid's state. Check out GridState mixin for details.

Functions

Functions are methods available for calling on the class

applyState( state )

private

Apply previously stored state.
getState( )
: Object

private

Get grid's current state for serialization. State includes rowHeight, headerHeight, selectedCell, selectedRecordId, column states and store state etc.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeStateApply

PREVENTABLE

Fired before state is applied to the source. Allows editing the state object or preventing the operation.
beforeStateSave

PREVENTABLE

Fired before state is saved by the StateProvider. Allows editing the state object or preventing the operation.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeStateApply

PREVENTABLE

Called before state is applied to the source. Allows editing the state object or preventing the operation.
onBeforeStateSave

PREVENTABLE

Called before state is saved by the StateProvider. Allows editing the state object or preventing the operation.

Type definitions

ColumnState
An object which encapsulates a column's saved state.
Properties
- id : String
  
  The column's id.
- type : String
  
  The column's type.
- hidden : Boolean
  
  Whether the column is hidden.
- region : String
  
  The region of the column.
- locked : String
  
  The locked state of the column.
- text : String
  
  The header text of the column.
- field : String
  
  The field name of the column.
- parentId : String
  
  The id of the parent column, if this column is a child of another.
- width : Number
  
  The width of the column.
- flex : Number
  
  The flex of the column.
- collapsed : Boolean
  
  Whether the column is collapsed.
SubGridState
An object which encapsulates a SubGrid's saved state.
Properties
- width : Number
  
  The width of the sub grid.
- flex : Number
  
  The flex of the sub grid.
- collapsed : Boolean
  
  Whether the sub grid is collapsed.
GridStateInfo
An object which encapsulates a Grid's saved state.
Properties
- columns : ColumnState[]
  Columns
- rowHeight : Number
  Row height
- scroll : Object
  Scroll
- scrollLeft : Number
  Scroll left
- scrollTop : Number
  Scroll top
- selectedRecords : String[]/Number[]
  Selected records
- style : String
  Style
- selectedCell : String
  Selected cell
- treeGroupLevels : String[]
  Tree group levels
- store : Object
  Store
- sorters : Sorter[]
  Sorters
- groupers : Grouper[]
  Groupers
- filters : CollectionFilterConfig[]
  Filters
- collapsedGroups : String[]
  Collapsed groups
- subGrids : Object<String, SubGridState>
  Sub grids

Source path

Grid/view/mixin/GridState.js

Demo

examples/state

Inheritance tree1

GridState

GridState
Mixin

See also

Configs

Properties

Functions

Events

Event handlers

Type definitions

Properties

Properties

Properties

Source path

Demo

Inheritance tree1

Contents

GridState Mixin

See also

Configs

Properties

Functions

Events

Event handlers

Type definitions

Properties

Properties

Properties

Source path

Demo

Inheritance tree1

Contents

GridState
Mixin