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.
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?
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?
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.
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.
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.