DataGrid .getPersistData() makes editing broken

[Marko Bezjak]

Hello,

response on git is a bit slow so I'm posting my problems on this forum as well.

Please regard this issue:https://github.com/syncfusion/ej2-angular-ui-components/issues/39

Update: The problem also happens when GRID.setProperties(persistData) is called and there is a column with foreign key data is used.

I updated your example where you can se the error in the console. Recreate by clicking on getPersistData and then setPersistData. You can also see the header texts get broken etc.

Error:

globalErrorHandler.ts:114 TypeError: this.adaptor.processQuery is not a function

    at DataManager.push../node_modules/@syncfusion/ej2-angular-grids/node_modules/@syncfusion/ej2-data/src/manager.js.DataManager.executeLocal (manager.js:116)

    at manager.js:171

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

    at Object.onInvokeTask (core.js:24340)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)

    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498)

    at ZoneTask.invoke (zone.js:487)

    at timer (zone.js:3070)

[Renjith Singh Rajendran]

Hi Marko, 

  

Thanks for contacting Syncfusion support. 

We suspect that the problem is because of duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. So we suggest you to follow the below steps to overcome the reported errors. 

 

1. Delete package.lock.json file from your application.
2. Remove the @syncfusion  package folder from the node_modules.
3. Use same version for all components(Grid, other syncfusion components etc,) in package.json file.
4. Then install the new packages.

  

If you are still facing the reported problem, kindly get back to us with the following details, 

1. Share with us the package.json file to validate further from our end.
2. Share the full Grid code.
3. Share the exact scenario/proper replication procedure to reproduce the problem.

 

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

 

Regards, 

Renjith Singh Rajendran. 

[Marko Bezjak]

Hello,

I did as you said but it is still broken. I updated your example: https://stackblitz.com/edit/angular-3aqxw4-al6zas?file=app.component.ts to show my problem.

To reproduce:
1.) Open console

2.) Press the button "getPersistData"

3.) Now if you press "setPersistData" button you will see the error that I mentioned above.

I hope the example shows my problem in intended way.

Br. Marko.

[Hariharan J V]

Hi Marko, 

Thanks for your update. 

We have validated the provided information and sample. By default, we have used asynchronous process for rendering grid component so when apply all properties(like sort,filter,columns etc,) together in setProperties cause the problem. We suggest you to apply the columns separately in setProperties to resolve the problem. 

Please refer the below code example and updated sample for more information. 

setPersistData(){ 

  console.log('setting persist data', this.persistData); 

  this.grid.setProperties(this.persistData.columns) 

  delete this.persistData.columns; // remove columns  

  this.grid.setProperties(this.persistData); // assign other property 

} 

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

Regards, 

Hariharan 

[Marko Bezjak]

Hello,

Your solution already works a lot better.. but in 'Batch' editing mode there is still an error showing up even tho it doesn't affect any functionality as far as i know.

I modified your example to show you the problem: https://stackblitz.com/edit/angular-3aqxw4-tmy2oy?file=app.component.ts

To reproduce the error: 

1.) drag any column in the area for grouping.

2.) press the button "getPersistData"

3.) clear grouping.

4.) press the button "setPersistData"

You should see this error appear in console:

[Hariharan J V]

Hi Marko, 

Thanks for your update. 

We have validated with our end and we suggest you to use the below way to resolve the reported problem. In the below sample, we have override the getCurrentViewRecords method to resolve the problem. Please refer the below code example and updated sample for more information. 

public ngOnInit(): void { 

    this.grid.getCurrentViewRecords = function () { 

      if (isGroupAdaptive(this)) { 

          return isNullOrUndefined((this.currentViewData as Object[] & { records: Object[] }).records) ? 

              this.currentViewData : (this.currentViewData as Object[] & { records: Object[] }).records; 

      } 

      return (this.allowGrouping && this.groupSettings.columns.length && this.currentViewData.length && (this.currentViewData as Object[] & { records: Object[] }).records) ? 

        (this.currentViewData as Object[] & { records: Object[] }).records : this.currentViewData; 

    } 

} 

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

Regards, 

Hariharan