I am trying to save the state of bryntum columns, whether they have been hidden or the order of them has changed. I am able to save the this.$refs.grid.gridInstance.state on pages that have one bryntum grid fine but when I have two bryntum grids on one page and I change the state of one of the brytnum grids I need to update the other bryntum grids state accordingly. If I watch the this.$refs.grid.gridInstance.state I get infinite loops because there are several events that modify that object. I need a way to only trigger an save/update when the column settings have been changed?
Support Forum
Hi kkruger,
This may help you to not trigger events while you apply the state for all your grids:
https://bryntum.com/docs/grid/#Core/mixin/Events#function-suspendEvents
https://bryntum.com/docs/grid/#Core/mixin/Events#function-resumeEvents
All the best,
Alex
All the best,
Alex
I think its doable as well the only issue is in the mounted function the gridInstance in vue is null. So I need an event for when the grid instance is loading in to do the state apply. Something where I can pass in a function after the grid has been created. Hope that makes sense. Thanks again for the help!
Hi kkruger,
Please, try this event https://bryntum.com/docs/grid/#Grid/view/Grid#event-paint
Here is how to add event listeners: https://bryntum.com/docs/grid/#guides/integration/vue.md#using-the-grid-component
<grid
ref = "grid"
:columns = "columns"
:data = "data"
@paint = "onPaint" // <-- this is
:searchFeature = true
</grid>
All the best,
Alex
private onPaint(params: any): void {
const storedSettings: string = localStorage.getItem(
'projectBudget-bryntum-settings')
if (storedSettings) {
const parsedStoredSettings: any = JSON.parse(storedSettings);
params.source.state = parsedStoredSettings;
}
window.onbeforeunload = () => {
if (this.$refs?.grid?.gridInstance) {
localStorage.setItem('projectBudget-bryntum-settings', JSON
.stringify(this.$refs.grid.gridInstance.state))
}
}
}
I think this is really close to what is needed to apply the state on the paint. My only issue is that I apply the state and then it does not apply.
I think this is really close to what is needed to apply the state on the paint
Well, it looks correct. You apply the state which you have saved in advance when the grid is rendered. And you save the state to the localStorage when you leave the page.
My only issue is that I apply the state and then it does not apply.
Could you please provide more details on that? Please submit a small runnable testcase. You can create one by modifying one of our shipped examples. Please apply minimal changes to reproduce. You can even start from vanilla demos, excluding vue/typescript if it's not related to the issue you faced with. Also please provide steps to reproduce. A short video/gif might be helpful too. Here is our forum support guidelines: viewtopic.php?f=35&t=772
Pavlo Miklashevych
Sr. Frontend Developer
Here is resources that might be useful:
Docs: https://bryntum.com/docs/gantt/#Grid/view/mixin/GridState
Demo: https://bryntum.com/examples/grid/state/
Please note, there is a ticket to save changes automatically: https://github.com/bryntum/support/issues/758
Pavlo Miklashevych
Sr. Frontend Developer