Update the grid as soon as the state used as DataSource changes

[Manuel Pölzl]

Hi,

I would like to know how to refresh the grid when the state used as DataSource changes.

My scenario is the following, I have an array as state - this state is initially specified as DataSource. Via a button the array is changed, in my case some items are filtered out, and then the state is set again, but the data in the grid does not change in any way. Also no DataSourceChanged event is called.

I haven't found anything in the docs that could help me in this case, so I'm hoping someone here can point me in the right direction.

Thanks in advance!

Best Regards

[Sujith Kumar Rajkumar]

Hi Manuel, 

Greetings from Syncfusion support. 

From the provided information we could understand that you are using react state to modify the Grid data dynamically and facing problems with that. We created similar Grid sample to update data using state but unfortunately were unable to reproduce the problem from our end. You can check the below sample for reference, 

Sample: https://stackblitz.com/edit/react-mk4tu1 

So please share us the following information to identify your problem case and validate further, 

• Let us know how you are modifying the Grid data using react state.
• Are any console errors thrown? If so please share it.
• Share us the Grid code file.

• If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample. This would be helpful to identify your exact problem case and validate further based on that.

We could also see that you have mentioned that the ‘DataSourceChanged’ event is not getting triggered for your case. Since you have bound the Grid data array directly to the data source(using react state), the dataSourceChanged event will not be triggered for this case as the Grid will consider it as local data and all the actions will be performed by the Grid itself. The dataSourceChanged event will be triggered if you are using custom binding approach to bind data to the Grid. 

More details on custom binding approach with online preview sample can be checked from the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding 

So if you are using local data binding and need to access an event on data change, then you can use the dataBound event which will be triggered on each data change. 

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

Regards, 

Sujith R 

[Manuel Pölzl]

Hi

Thanks for your quick response.

I´ve tried to reproduce the scenario via codesandbox.io and stackblitz, but it seems to work there.

So i assume this has something to do with our local environment. However i can provide you some screenshots and explanation!. Please take a look at the attached zip file - it also contains the code of our grid.

Additionally, i can confirm that the requried state is changing correctly - the state is getting updated, but the grid is not refreshing.

if you have any further questions, I am always at your disposal!

Attachment: Grid_73b1419f.zip

[Sujith Kumar Rajkumar]

Hi Manuel, 

 

Since you have mentioned that the same case is working for you in stackblitz and codesandbox we suspect that you might be facing problem due to older Syncfusion packages or duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. This might be invoking different package version files causing the reported problem. So please follow the steps provided below to overcome this and install the latest packages, 

 

• Delete package.lock.json file from your application.  
• Remove the @syncfusion package folder from the node_modules.
• Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
• Then install the NPM packages.

 

Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 

 

If problem still persists then please share us the following information to validate further on this, 

 

• Share us the sample data bound to the Grid.
• Share us the package.json file of your application.
• If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.

 

Regards, 

Sujith R