Premium support for our pure JavaScript UI components


Post by Nualis »

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?


Post by alex.l »

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.

All the best,
Alex


Post by Nualis »

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.


Post by alex.l »

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'); } }}

All the best,
Alex


Post by Nualis »

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.


Post by alex.l »

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

All the best,
Alex


Post by Nualis »

Hi Alex,

This works! Thank you.


Post by Nualis »

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):

IMAGE 1.png
IMAGE 1.png (5.54 KiB) Viewed 1115 times

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

IMAGE 2.png
IMAGE 2.png (5.5 KiB) Viewed 1115 times

Value saved in the state:

IMAGE 3.png
IMAGE 3.png (13.09 KiB) Viewed 1115 times

Post by mats »

What version are you using?


Post by Nualis »

Hi Mats,

We are using Grid version 4.3.6.


Post Reply