ejs-grid Error on destroy

[VladimortZA]

Hi,

On the recent version of ej2-angular-grids, I'm noticing that the grid throws an error on destruction i.e when you navigate away from the page for example.

In my case, I've simply just created a grid, whose dataSource is bound to a hardcoded array in the component.ts file.

The grid displays the data without issue, but when the component is being destroyed, it throws as seen in the attached file. Although the attached project doesn't do much, it does have an effect on persisting filters in a larger sample that I've tried. In the attached code, I've got a simple grid, that you can toggle on or off so that you can see the error.

Attachment: grid_error_on_destroy_43009113.zip

[Sujith Kumar Rajkumar]

Hi Vladimort, 

 

Greetings from Syncfusion support. 

 

Your reported problem – “Angular routing with Grid component throwing error” is a known issue from our end and we have logged defect report for the same. The fix for this issue will be included in our patch release scheduled on August 4^th 2021. We appreciate your patience until then. 

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

 

Feedback Link: https://www.syncfusion.com/feedback/27062/angular-routing-with-grid-component-throwing-error 

 

Regards, 

Sujith R 

[VladimortZA]

Hi, 

Thanks for the prompt response. Glad to hear there's a fix on the way.

In the meantime, is there a way to manually trigger the filter persistence logic to localStorage?

Kind regards

[Rajapandi Ravi]

Hi VladimortZA, 

Thanks for the update 

Based on your shared information, we suspect that you want to get the Grid’s persist data. By default, we have option for getPersistdata method used to get persisted data of grid. Using this method, we have fetched persist data and applied to the window.localstorage. 

We have the default property called getPersistData, the following information remain in the local storage window. And, other than the properties below, you have to store them in the local property for recovery purposes.  

  

Reference image:  

 

If we misunderstood anything wrongly, Share us your exact requirement scenario with detailed description. 

 

Regards,
Rajapandi R 

[VladimortZA]

Apologies for the late response.

Thanks for the useful info! With this, I'll manually save the data on the destroy lifecycle hook until the patch is released.

[Rajapandi Ravi]

Hi VladimortZA, 

Thankyou. Currently we are working on it, and we will update you details as we promised. 

Regards, 

Rajapandi R 

[VladimortZA]

Thanks. I also just want to point out that your persistency does not work when upgrading to v19.2.49.

It stores the props in the localstorage, but filtering and sorting column arrays are empty all the time.

Kind regards

[Rajapandi Ravi]

Hi VladimortZA, 

Thanks for the update 

Query#:  your persistency does not work when upgrading to v19.2.49. It stores the props in the localstorage, but filtering and sorting column arrays are empty all the time. 

 

From your update, we could see that you are facing the problem with persistency when upgrading to v19.2.49. Based on your query we have prepared a sample with v19.2.49 and checked your reported problem and try to reproduce the problem. But it was unsuccessful. In local storage the filtering and sorting columns are exist. Please refer the below sample and screenshot for more information. 

Sample: https://stackblitz.com/edit/angular-c8eq6e?file=app.component.ts 

Screenshot: 

 

If you still face the issue, please share the below details that would be helpful for us to provide a better solution.  

1)   Share an issue replication procedure in step by step. 

2)   Please replicate an issue with our above attached sample or share any issue reproducible sample. 

Regards, 

Rajapandi R

[VladimortZA]

Hi,

Please ignore my previous post.

So is the issue that I initially logged in this call resolved? Meaning that when navigating away from the page, the persistency will now work? Or is it for the patch still due the  August 4^th 2021 ​as per your initial response?

Kind regards

[VladimortZA]

Just to follow up on the main issue that I logged this ticket for.

I've forked your stackblitz sample and enabled persistency.

Just to simulate paging, I've added a toggle display button that removes/adds the ej2-grid on the DOM.

When you refresh the page, the filters, sorting is stored as expected, but when clicking on the toggle button, you will see that it does not save filters and sorting.

https://stackblitz.com/edit/angular-c8eq6e-zdqczf?file=app.component.html

Kind regards

[Rajapandi Ravi]

Hi VladimortZA, 

Thanks for the update 

We have checked your shared information and we could see that you are dynamically rendering the Grid by using *ngif true/false. When the *ngif is False the component was destroyed in the DOM. Once the component was destroyed the Grid stored properties are removed. When we click again the toggle button the *ngif is true. So, at the time a Grid component will render newly. So, we cannot get the old properties at that time. This was the default behavior.  

We have achieved your requirement by storing the grid properties in the toggle button click event. When the Grid is going to destroyed, we have stored the Grid properties and when the Grid re-rendered, we have set the old properties to the Grid. Please refer the below code example and sample for more information. 

 

toggleDisplay() {    if (!this.display == false) {      this.storedproperties = JSON.parse(this.grid.getPersistData());// get grid’s persist data      this.display = !this.display;    } else {      this.display = !this.display;      setTimeout(        function() {            this.grid.setProperties(this.storedproperties); //set the save properties to the Grid by using setProperties        }.bind(this),50      );    }  }

Sample: https://stackblitz.com/edit/angular-c8eq6e-8sxnbe?file=app.component.ts 

 

API :  https://ej2.syncfusion.com/angular/documentation/api/grid/#getpersistdata 

 

Regards, 

Rajapandi R 

[VladimortZA]

Hi,

I think there might be some misunderstanding. The previous stackblitz sample was to indicate that it does not persist data when destroyed (simulating navigating to another route).

Let me rather number the questions:

1. When enabling persistency in the grid with [enablePersistence]="true", the grid should automatically store the filtering, sorting and paging in the localstorage, without really needing extra coding logic in the component. I'm I right on this one?
2. If so, then why does it not work in this very basic app in the link below. What you will find is a simple app with 2 pages, namely grid-page and other-page routes. You will see the 2 links. The grid-page shows a page with the syncfusion grid (with [enablePersistence]="true") and the other page just returns some markup. What I'm seeing is that when I apply some filtering and some sorting and then navigate to other-page, it does not persist the filters and sorting in localstorage. Is this the intended functionality for [enablePersistence]="true"? I could have sworn I had no such issues in an earlier version when I tried out the grid.
3. So changing the route does not persist data, but when I refresh the in app stackblitz browser after applying some filters, only then does it persist all the filters and sorting in local storage. Why does it only persist data when you refresh the page but not when navigating to another route?

https://stackblitz.com/edit/angular-ivy-y5ydwe?file=src/app/grid-page/grid-page.component.html

I hope this makes sense.

Kind regards

[Rajapandi Ravi]

Hi VladimortZA, 

Thanks for your update.  

Currently we are validating the reported scenario with our internal team, and we will update the further details by tomorrow Friday Aug 13^th, 2021. Until then we appreciate our patience. 

Regards, 

Rajapandi R 

[VladimortZA]

Thanks. I'll be eagerly awaiting your feedback since this is one of the best features of the grid.

Just for extra proof, here's the exact same sample, but with version @~18 instead of 19 which shows that it works.

https://stackblitz.com/edit/angular-ivy-7rh8vg?file=src/app/app.component.ts

[Rajapandi Ravi]

Hi VladimortZA, 

Thanks for your patience 

After validating further with the source, we have confirmed and logged this as a bug in the component. So, we have considered “Enablepersistence was not maintained filter setting when routing to another page” as a defect and logged a report for the same. We will include the defect fix in our upcoming Sep 1^st , 2021 patch release. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

Feedback link : https://www.syncfusion.com/feedback/27908/enablepersistence-was-not-maintained-filter-setting-when-routing-to-another-page 

Regards,  

Rajapandi R

[VladimortZA]

Many thanks for the response. I'll be awaiting the fix.

Kind regards

[Rajapandi Ravi]

Hi VladimortZA,  

Thanks for the update and we will update you details as we promised.  

Regards,  

Rajapandi R 

[Rajapandi Ravi]

Hi VladimortZA, 

We are glad to announce that our Essential JavaScript2 patch release (v19.2.59) has been rolled out successfully. In this release we have added the fix for “Enablepersistence was not maintained Filter,group and Sort settings when routing to another page” issue. So please update your package to this version to include the fix. 

Feedback Link: https://www.syncfusion.com/feedback/27908/enablepersistence-was-not-maintained-filter-setting-when-routing-to-another-page 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 

Rajapandi R 

[VladimortZA]

Thanks for the update! 

Can't wait to test it out. I'll revert back once I've tested this.

Kind regards

[Rajapandi Ravi]

Hi VladimortZA, 

Thanks for the update. 

We will wait to hear from you. 

Regards, 

Rajapandi R