Bryntum Support Forums

Hello,

with the 5.x version now the StateManager was introduced, how would it be used in Vue?
I found the JS-version of it but it seems I can't access the state and some methods like it is in there.

As reference I used the example downloaded and the module of it: https://bryntum.com/examples/grid/state/app.module.js?462681

I currently try to autosave a modified state and restore it on mount (if that is the event/time which it's intended to load the grid state).

Sometimes there is also the issue that the instance isn't available hence the question on which events you want it used/loaded.

Example:

const grid = ref(null)

onMounted(() => {
  if (grid.value) {
    const gridInstance = grid.value?.instance?.value
    // do stuff  

  }
})

// template
<BryntumGrid ref="grid" v-bind="gridConfig" />

Regards,
Doki

Hi Doki,

There is no difference in using StateManager if it's vanilla app or Vue/React/Angular application.
API is the same https://bryntum.com/docs/grid/api/Core/mixin/State

I found the JS-version of it but it seems I can't access the state and some methods like it is in there.

What exactly is not working for you and how did you use that?

Sometimes there is also the issue that the instance isn't available

We use onMounted in almost all our applications and getting instance inside. Could you please share us the code where you have problem with an instance?

You could also try to use https://bryntum.com/docs/grid/api/Grid/view/Grid#event-paint event to apply state.

Hello,

sorry for the late response.
It seems I just had a few thought-issues of understanding it and making it more complex than it's necessary.

The following code does work now:

<script setup lang="ts">
import { BryntumGrid } from '@bryntum/grid-vue-3'
import { useGridConfig } from './GridConfig'
const { t } = useI18n()

const grid = ref(null)
let gridInstance = ref(null)
const gridConfig = reactive(useGridConfig({ t, gridInstance }))

onMounted(() => {
  if (grid.value) {
    gridInstance = grid.value?.instance.value
    const savedState = localStorage.getItem('pois.grid_dev')
    if (savedState && gridInstance)
      gridInstance.applyState(JSON.parse(savedState))
  }
})

function saveState() {
  // gridInstance.saveState()
  localStorage.setItem('pois.grid_dev', JSON.stringify(gridInstance.state))
}

function resetState() {
  // gridInstance.resetDefaultState()
  localStorage.removeItem('pois.grid_dev')
}
</script>

<template>
    <BaseButton variant="primary" @click="saveState()">
      Save state
    </BaseButton>
    <BaseButton variant="primary" @click="resetState()">
      Reset to default state
    </BaseButton>
  <BryntumGrid ref="grid" v-bind="gridConfig" :min-height="500" />
</template>

Is there any way to make it cleaner? Or is it more efficient/performant if I use the StateProvider instead?

The State will be later saved in the database & local storage and synced accordingly. So that might be an issue with this approach and not using the GridInstance methods?

Thanks!
Doki

Hi doki,

Is there any way to make it cleaner?

Not sure I got it. Cleaner than calling get state and apply state methods?

Or is it more efficient/performant if I use the StateProvider instead?

It depends on your needs. StateProvider can manage saving and triggering events, if you want to sync it with database. If want to save state by yourself, better to do it the way you did.

So that might be an issue with this approach and not using the GridInstance methods?

It should be working well if you will update state in state provider.

Hello,

since this issue is also about the StateManager I add it here. If it's wrong, please let me know and I'll create a new topic for it.

We encountered the issue that when using the Grid in combination with a nested child route - it does not apply the State or Localization but goes back to the default settings.
We had this issue also with the previous 4.x version and hence updated to 5.x for the new StateManager.

I added a demo as an attachment with a reproduction of the issue.
I added all methods and the ways we configure and handle the grid & state. So it might be a good possibility that it's on us and how we do it.

We tried things like different life cycle hooks and wrapping it in <KeepAlive> but nothing worked for us yet.

Steps to reproduce:

• Reordering a column per drag'n'drop
• After 1sec it will be automatically saved (console log output)
• Per Refresh/F5 the saved state will be loaded
• Per swap between the tabs/grids the default state will be loaded

Would be incredible if we can get this fixed since it's one of the most important features for us.

Regards,
Doki

Thanks for the report and clean test case! I've opened a ticket to fix that https://github.com/bryntum/support/issues/5638

alex.l wrote: ↑Thu Nov 10, 2022 4:49 pm

There is no difference in using StateManager if it's vanilla app or Vue/React/Angular application.
API is the same https://bryntum.com/docs/grid/api/Core/mixin/State

Pretty sure that this relates to what is described here: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#exposing-components-public-interface

So you a defineExpose would be needed.

Sorry for the previous malformatted post. The problem is that the Bryntum components are incompatible with the nice new Vue 3 setup tags because they do not use defineExpose to expose "instance".

Vite can make it work in local dev but in production it breaks. Until Bryntum solves this the solution is to avoid the new Vue 3 setup tags.

For Bryntum, see more or simply use defineExpose on your Vue components: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#exposing-components-public-interface

Hi jk@datapult.dk,

Thank you for the information! I've added that into the ticket. Our team will check that when starts work on the ticket.

Thanks, may they expose the instance property to all the Vue components!