Persistance only for resize / column chooser

[Jonathan Payet]

Hello I am from version 17.x, and I had found a way to have user preferences only for the resize / column chooser, by doing the following:
https://stackblitz.com/edit/react-idh16n-ewkvp9?file=index.js

But when migrating to 19.x i can't access to ref in load method. (I also tested in created but my table is in remote, and i don't want to refresh it because it will call api) I'm looking for a solution.

Regards,
Jonathan

[Sujith Kumar Rajkumar]

Hi Jonathan, 

 

Greetings from Syncfusion support. 

 

Based on the provided information we would like to let you know that the Grid reference is not accessible in its load event since it is not yet initialized there. So you can achieve your requirement by accessing the Grid reference and modifying the properties based on the stored preferences in the Grid’s dataBound event handler(triggered once data is loaded in the Grid) and using a global flag variable to ensure that this case is executed only once(since the dataBound event will be triggered each time the Grid data is modified). 

 

This is demonstrated in the below code snippet, 

 

// Grid’s dataBound event handler 

dataBound = () => { 

    // This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render 

    if (this.initialRender) { 

        console.log(this.gridRef ?.current); 

        this.initialRender = false; 

    } 

} 

 

We have modified the shared sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/react-idh16n-moxfm4?file=index.js 

 

Note: Since you are updating the column properties, we suggest you to call the Grid’s refreshColumns method after performing the action in order to refresh the columns properly. 

 

API links: https://ej2.syncfusion.com/react/documentation/api/grid/#databound 

                  https://ej2.syncfusion.com/react/documentation/api/grid/#refreshcolumns 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Jonathan Payet]

Well thank you !

But using refresh method or refreshColumns will always call a second load_data when using it with remote and UrlAdaptor. Their is no way to refresh UI without call api when table is in remote ?  https://stackblitz.com/edit/react-idh16n-2bw6nh?file=index.js

Regards,
Jonathan

[Sujith Kumar Rajkumar]

Hi Jonathan, 

 

Based on the provided information we would like to let you know that when the refresh or refreshColumns method is called, the Grid will be refreshed and server request will automatically be sent(if remote data is bound). This is because when updating the column properties dynamically the changes might include, field updating, foreign key value changes, stacked columns, etc.. So for this case the Grid need to be refreshed in order to fetch the updated data from the server based on the changes and then update the Grid accordingly. That is why the server request is sent on calling this method and it is required when updating the Grid properties dynamically. This is its default behavior and it cannot be prevented 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Jonathan Payet]

Hello thank you for your reply.

So what is the solution?

You have a persistence system. Except that I don't want to persist everything. Only the visible column (from columnChooser ) and the size of the columns (after resize).

Because the previous solution is not really one when remote table is used.

Regards,
Jonathan

[Sujith Kumar Rajkumar]

Hi Jonathan, 

 

Sorry we misunderstood your query mentioned in the previous update. From the modified sample shared we could see that you have reported that the “this.load();” method in the sample is getting called again when the refreshColumns method is invoked. This is because the dataBound event will be triggered each time the Grid data is modified or updated and so we have handled this case using a global flag variable so that the action is only executed once. 

 

The problem in the shared sample is that the global flag variable was not disabled(set as false) in the event function start and this was causing the load condition to be executed again. So you can resolve this problem by disabling the flag variable in the start of the event handler itself as demonstrated in the below code snippet, 

 

dataBound = () => { 

    if (this.initialRender) { 

      this.initialRender = false; 

      this.load(); 

      this.gridRef.current.refreshColumns(); 

    } 

}; 

 

Please find the below modified sample based on this for your reference, 

 

Sample: https://stackblitz.com/edit/react-idh16n-fu6zdn?file=index.js 

 

Note: We also would like to inform you that as mentioned in the previous update when modifying the Grid properties dynamically, the Grid’s refresh or refreshColumns method needs to be called in order to properly update the changes. This is because with remote data the Grid will only have access to the current page data and not the entire data and so for the changes to be refreshed properly, the server request has to be sent in order to fetch the updated data. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R