Our blazing fast Grid component built with pure JavaScript


Post by rodel.ocfemia »

Hi,

Question for option 1 "Change data before load to store."
Is there a way to manipulate the data retrieved if we use store autoLoad feature?
In our project code, we pull data similar to the following.

const gridConfig = {
      store: new AjaxStore({
        readUrl: 'http://localhost/project/projectgrid/data',
        autoLoad: true,
      }),
}

Post by marcio »

Hey,

Yes, you can use the following event https://bryntum.com/products/grid/docs/api/Core/data/Store#event-change
and check if the action is dataset, that's the one that is triggered when you pull the data.

Best regards,
Márcio


Post by rodel.ocfemia »

Hi,

If I want to expand a selected node in store change event, how can I do that?
I tried record.toggleCollapse or source.grid.toggleCollapse, but returns undefined.
Please see the code below.

store: new AjaxStore({
        readUrl: 'http://localhost/project/projectgrid/data',
        autoLoad: true,
        listeners: {
          change: (props: any) => {
            const { source, record, action } = props;
            if (action === 'dataset') {
              source.data.forEach((row: any) => {
                  record.toggleCollapse(row, false); // toggleCollapse undefined
		  source.grid.toggleCollapse(row, false); //grid is undefined
              });
            }
          },
        },
      }),

Additional updates:
I tried to change the expanded property of the data store, but it did not reflect in the grid.

store: new AjaxStore({
        readUrl: 'http://localhost/project/projectgrid/data',
        autoLoad: true,
        listeners: {
          change: (props: any) => {
            const { source, record, action } = props;
            if (action === 'dataset') {
              source.data.forEach((row: any) => {
                  record.expanded = true //this has changed the data in store, but did not reflect in grid
              });
            }
          },
        },

}),

Right now, the requirement for us is to save the expand/collapse state to browser only, so I'm looking for ways to implement it.


Post by rodel.ocfemia »

alex.l wrote: Tue Jun 06, 2023 4:44 pm

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:

  1. 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.
  2. 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.

I tried the paint event, but it works only on the first item of the state. Succeeding states are not applied to grid.

Sample state:

[
    {id: 2, expanded: true}, //only this is applied to grid
    {id: 3, expanded: true}  //not applied to grid
]

see attached code to reproduce.

grid-state-react-typescript3.zip
(1.7 MiB) Downloaded 20 times

Post by alex.l »

Yes, it works only for first record that you change state in a loop.

In your first solution using change event, you are trying to do same as on paint event - call toggleCollapse, but the idea was to change data before in loaded into the store on data level. So nothing new in that solution.

Solution in "additional updates" section contains not valid code.
First, you set record.expanded in a loop, but record is a property of a method and never change in a loop. So you might be was about row.expanded = true. But it also not valid, expanded field is readOnly.

The only possible solution I see here is change data !before! load into the store. All other solutions won't be working.
Try https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#event-afterRequest method.

I've opened a Feature Request to add opportunity to apply full state at once, as you wanted https://github.com/bryntum/support/issues/6942

All the best,
Alex


Post Reply