I tried setting up Grid state for localStorage but the expand/collapse state of each record are not saved. What is the best way to save the state of expand/collapse of each row?
I have the following code. The StateProvider.saveState() does not return any error. But how to load the saved stated on load of grid? I tried invoking StateProvider.loadState('mainGrid',true) inside renderRows event but it throws error.
It uses the setup function you shared in the first post.
if ((new URL(window.location)).searchParams.get('state') === 'remote') { // if ('?state=remote' in URL)
// For server-side state, initialize the page widgets after the state is loaded from the server.
(new BackendState(StateProvider.setup('memory'))).init().then(launch);
}
else {
// To use localStorage instead of a backend for state, the launch process is simply this:
StateProvider.setup('local');
launch();
}
Re: [REACT] Expand/collapse state
Posted: Mon Jun 05, 2023 10:00 am
by rodel.ocfemia
Hi Marcio,
Yes I initiated this code StateProvider.setup('local').
Please see attached runnable code.
class MyModel extends GridRowModel {
static get fields() {
return [
{ name : 'expanded', persist : true }
]
}
[...]
const store = new AjaxStore({
modelClass : MyModel
});
});
Re: [REACT] Expand/collapse state
Posted: Mon Jun 05, 2023 1:53 pm
by rodel.ocfemia
Hi Alex,
Right now, we can only save user preference including expand/collapse in the user's browser. So I created a custom StateHelper class that saves the expand/collapse to localStorage. See attached rerunnable code.
On rendering, I'm invoking it on renderRow. It also works fine. It renders whatever I saved on localStorage.
The issue is that I am unable to trigger the collapse anymore. Please advise how can I fix the issue.
The issue is that I am unable to trigger the collapse anymore. Please advise how can I fix the issue.
Could you please explain what did you mean here? Unable to collapse node programmatically? Unable to catch node collapse action?
I would try in your case to manipulate with data and set expanded field value before you load (apply) data to the store instead of manipulate already loaded and rendered data.
Re: [REACT] Expand/collapse state
Posted: Tue Jun 06, 2023 6:58 am
by rodel.ocfemia
Hi Alex,
To recreate the issue:
Run the code I attached in the previous post (grid-state-react-typescript2.zip)
On load, try to expand one row, then refresh the page using Reload button in the browser.
After refresh of the page, the expanded row will remain expanded. This works as expected.
Try to click collapse icon on the expanded row. It will not work anymore. This is the issue.
All the saving and loading of state are placed inside the following code.
Note: If I comment the code inside renderRow, clicking expand or collapse icon works. But on load, the saved state is not reflected. The code in renderRow is the one that applies the expand/collapse on load.
Hi, the solution is not valid. You are changing node state while rendering that causes collisions. It won't be working this way.
There are 2 options:
Change data before load to store.
You need to get state from localStore, change expanded field value for all required records and load/set data to store after that. You can add your code into useGridConfig method above return object.
Change state after render complete.
You need to subscribe on event that triggers when rendering finished (as example https://bryntum.com/products/grid/docs/api/Core/widget/Widget#event-paint ) and apply state to records after rendering. Of course, in this case nodes will "jump" because original state and applied state will be different.
In 2 words, expanded/collapse state of nodes - is data layer level. So I suggest you to work with it on data level. I am not sure if you used static data in your real app, but in any case there is a way to apply state on data before rendering.