Our blazing fast Grid component built with pure JavaScript


Post by kkruger »

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?


Post by alex.l »

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


Post by kkruger »

Thanks Alex, I think those will help. I still need a way to differentiate when an event is a user changing the column setting vs. the grid state changing because the settings where changed by something else. Is there an event specifically for when the state is changed by the user?


Post by alex.l »

There is no way to detect if it was a user or state change actually, but if you will suspend events during state apply, I think it will be doable.

All the best,
Alex


Post by kkruger »

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!


Post by kkruger »

this.$watch(
    () => {
        return this.$refs.grid.gridInstance;
    },
    (val: any) => {
        console.log('grid changed');
    }, {
        deep: true
    }
)

This was one of my attempts to try for a "when the grid is created" event, unfortunately it gives maximum call stack size exceeded :-(


Post by alex.l »

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


Post by kkruger »

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.


Post by pmiklashevich »

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


Post by pmiklashevich »

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


Post Reply