Bryntum Support Forums

Hi,

We are trying to save and load the grid state from local storage. This works when we are using buttons to save, load and reset the state (using this example (viewtopic.php?f=43&t=16130).

How can we automate the process of saving and reloading the state? For instance the grid is loaded with data, the user filters the grid and then navigates to a different page. When returning to the grid, the entered filter should be reloaded automatically.

We have tried using the useEffect in the link above and the saved state is loaded, but it's loaded before the grid is finished initializing, so the config overwrites the saved state. Is there an onLoad listener or something?

Can you give some clues how to handle the auto save (onStateChange listener or something) and reload of the grid state within React?

To apply state try this:
https://bryntum.com/docs/grid/api/Grid/view/Grid#event-paint

Regarding to save state, there is no tracking for that since we do not update state object automatically, it collects when you call getSate(), you can listen to events that you want and save state then. As example on filter change https://bryntum.com/docs/grid/api/Core/data/mixin/StoreFilter#event-filter
etc.

Hi Alex,

Thank you for the info. Can you please provide an example of how to add the listeners in react? I've tried this:

<BryntumGrid
  ref={props.grid}
  data={props.data}
  onSelectionChange={props.setSelectedRows}
  onPaint={() => console.log('paint')}
  {...config}
  {...rowHeightConfig}
/>

but when I add the onPaint the sorting doesn't work anymore (I click on the column header and nothing happens) and the filter imputes disappear.

We are on v4.3.6 btw.

Looks like a bug, we will have a look in it, thank's for notifying, here is a ticket: https://github.com/bryntum/support/issues/4074

This notation works as expected, try it:

<BryntumGrid
  ref={props.grid}
  data={props.data}
  onSelectionChange={props.setSelectedRows}
  listeners={{ paint : () => { console.log('paint'); } }}

Hi Alex,

It works as you said for 'paint'. How can we also add listeners for 'sort' and 'filter'? We tried with:

listeners: {
  paint : () => { console.log('paint') },
  filter : () => { console.log('filter') },
  sort : () => { console.log('sort') }
},

but it doesn't work.

There are no filter and sort events available for a Grid component. These events triggered by its store, so subscribe on store's events.

            <BryntumGrid
                ref={grid}
                {...useGridConfig(handleCellButtonClick)}
                rowHeight={rowHeight}
                onSelectionChange={handleSelectionChange}
                store = {{ listeners : { sort : () => { console.log('sort') }} }}
            />

https://bryntum.com/docs/grid/api/Core/data/Store#event-filter
https://bryntum.com/docs/grid/api/Core/data/Store#event-sort

Hi Alex,

This works! Thank you.

Hi Alex,

We have encountered a problem related to saving/loading the grid state when the column type is date.

After the state is loaded, the value displayed by the column's filter input is wrong:

Applying the filter (input shows correct value and table filters properly):

Loading the state (input shows wrong value, but the table is filtered properly):

Value saved in the state:

What version are you using?

Hi Mats,

We are using Grid version 4.3.6.