Our blazing fast Grid component built with pure JavaScript


Post by dev_man_44 »

I use 5.2 version of Grid. Trying to implement state save and after reload keep apply the saved state.
I checked this topic also but StateProvider.setup('local') is not working. https://bryntum.com/products/grid/examples/state/

My Vue 2 code implementation:

<bryntum-grid
        ref="grid"
        v-bind="gridConfig"
        :data="filteredItems"
        class="flex-1"
        @cellclick="cellClick"
        @selectionchange="selectionChange"
      />

data have variables: gridInstance: null, gridStateId: 'grid.state-id'.

mounted() {
    this.gridInstance = this.$refs.grid.instance
    if (this.gridInstance) {
      const savedState = localStorage.getItem(this.gridStateId)
      if (savedState && this.gridInstance) {
        const parsedState = JSON.parse(savedState)
        this.gridInstance.applyState(parsedState)
      }
    }
  },
methods: {
    saveState() {
      localStorage.setItem(this.gridStateId, JSON.stringify(this.gridInstance.state))
    },
    resetState() {
      localStorage.removeItem(this.gridStateId)
    },
  }

I call saveState method on column filtering and I checked the localStorage and the actual state saved there. And tested that state got from localStorage on mounted hook and passed to applyState function correctly. Attached image about localStorage.

Attachments
grid_demo.png
grid_demo.png (46.32 KiB) Viewed 1684 times

Post by alex.l »

The code you posted looks correct. Could you please attach a runnable app, the problem might be in something different. Maybe the grid updated twice?

All the best,
Alex


Post by dev_man_44 »

I created a demo project on my git repo:
https://github.com/Abdulla1995/bryntum-vue2-state
I call saveState function but also added some comments there. Please answer it also why state not updating on this method?


Post by alex.l »

I tried your demo, all works fine to me. Please see video attached.
What's the actual problem?

Attachments
Screen Recording 2022-12-09 at 13.33.37.mov
(5.56 MiB) Downloaded 60 times

All the best,
Alex


Post by dev_man_44 »

I checked your video but I need the deleted (hidden) column not appear after refresh. Can you please try it and see the result ?


Post by alex.l »

Please see video attached. I still don't see any problems.

Attachments
Screen Recording 2022-12-14 at 20.35.05.mov
(6.57 MiB) Downloaded 25 times

All the best,
Alex


Post by dev_man_44 »

I watched your video and see that it works. I tested it now it works. I really curious about what was wrong :/ . For the last video try to hide Phone filed and save then reload. Seems it does not get saved. Then added field: '' into that phone column in the colums section and it also started working and saved if hidden. May be this causes the bug.


Post by alex.l »

Then added field: '' into that phone column in the colums section

Sorry, I don't follow. Could you please re-phrase this part?

All the best,
Alex


Post Reply