enablePersistence Throwing Type errors

[austinthedeveloper]

I'm having a hard time getting enablePersistence working on ej-grid (EJS-1). Here's the grid code:

<ej-grid id="Grid"

          #changeGrid

[enablePersistence]="true"

                    [dataSource]="data"

                    [allowResizing]="true"

                    [allowResizeToFit]="true"

                    [isResponsive]="true"

                    [enableResponsiveRow]="true"

                    (rowSelected)="navigate($event)"

                    [allowFiltering]="true"

                    [filterSettings]="filterType"

                    [allowSorting]="true"

                    selectionType="multiple"

                    [selectionSettings]="selectionMode"

                    [allowPaging]="true"                    

                    [pageSettings]="{'pageSize':15}">

....COLUMNS

</ej-grid>

When I load the page for the first time, it normally works. That's the last time it works though. After page change or refresh, it will throw console errors and the table will not load:

• "TypeError: Cannot read property 'nodeType' of undefined"
  
• "TypeError: Cannot read property 'model' of undefined"
  

When I remove [enablePersistence]="true" from the above grid, it immediately starts working again. I've tried this same setup on multiple grids.

I upgraded the EJ packages to see if that would fix the problem but there are no changes so far:

"@types/ej.web.all": "^16.1.1",

"ej-angular2": "^16.1.26",

"syncfusion-javascript": "^16.1.32",

Is there an example showing persistence working while pages change?

[Kuralarasan Muthusamy]

Hi Customer, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we are not able to reproduce the reported issue. So we have prepared the sample with your requirement. 

Please refer the following link to sample: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/enablePersistence-1897147970.zip 

If you face same issue till now, Please share the following details, 

1. Share the full grid Grid code example.
2. If possible replicate the issue in the above sample and send us back. 
3. Share the stack trace of browser console.
4. Share your Essential Studio version.
5. Share screenshot or video demonstration of your issue.

Regards, 

Kuralarasan M. 

[austinthedeveloper]

The demo works but doesn't show what happens when the data isn't set when it initializes. I used the code below to replicate the same errors.

• grid.component.ts
• Wrap this.gridData = [...]; in a setTimeout function

constructor() {

  setTimeout(() => {

    this.gridData = [...data];

  }, 5000); //delays 5 seconds

}

We're calling to the server while on the page (No resolves in this scenario) so the table exists without data in the beginning.

[Kuralarasan Muthusamy]

Hi customer, 

From the given code example we found that you were used the time delay for dataSource rendering to the grid. EnablePersistence is used to save the current state of the grid. If you set enablePersistance as  true and select any rows from the grid at that time selected rows also saved in enablePersistance. After grid refreshing you can see that selected rows also in the grid. Because enablePersistance is saved the selected rows by using index of the row and when you refresh the grid at that time it will take the rows by row index. So when you use time delay for the dataSource rendering at that time also enablePersistance search the selected rows in the dataSource. But when it searching in the dataSource at that time dataSource not rendering to grid because of the time delay. So it will throw the error to the console window. 

So please share the following information to provide the respective solution for your requirement.  

1. Why you need the time delay for dataSource rendering to the Grid.

Regards, 

Kuralarasan M.