Update fields with enablePersistence

[Rafael]

Hello,

I am using [enablePersistence]="true" but when I need add some new field or remove a field, or when the user add a field(Because in our software the user have option to add additional fields), I need to manual delete the local storage of the user.

I wrote a code to check if there's any new field that is not in local storage fields, and tried some different ways like use "mergePersistGridData()" follow by refreshColumns() but I had problems with some columns with header in different order.

Maybe I am doing it wrong. Do you know if there's a right way to do that?

Thank you very much

[Rajapandi Ravi]

Hi Sabina, 

By default the actionFailure event gets triggered when the dataManipulation gets failed and also triggered if the error occurs at the time of Grid rendering. For example if you have invalid dateFormat in your date column. While running the application, the grid cannot bind the invalid date format, so at the time it throws the error and triggers the actionFailure event.  

And if any error occurs at the server side and if you create any custom exception and throws the error it will triggers actionFailure event and send the http error message in the arguments. In your query you are defining invalid properties in toolbar for this case it will not triggered the actionFailure event. It was the default behavior. 

API: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionfailure 

Regards, 

Rajapandi R

[Rafael]

Hi Rajapandi,

Thank you for the help, but I don't know if I'm explaining it well. What is happening is:

• I have a feature in our software to add or remove custom fields for register suppliers or clients, for example.
• So, I wrote a code to update the columns of the grid based on these custom fields. This is working fine if [enablePersistence]="false"
• The problem is when I turn on [enablePersistence]="true", because when the user remove some field, I got problems like this:

So, in my example, this is happening a lot because users sometimes disable custom fields, but could happening too when the programmer for any reason needs to remove some column.

Ps. I am using Angular.

Thank you

[Shalini Maragathavel]

Hi Rafael, 

Thanks for your update. 

Based on your query we suspect that you are facing some issue while updating the columns with enablePersistence. To find out the root cause of an issue, we need the following details  

1.  Share your complete Grid rendering code. 

2.  Video demonstration of the issue / pictorial representation of the requirement. 

3.  Syncfusion Package Version. 

4.  Share the code example of updating the columns. 

 

Let us know if you have any concerns. 

Regards, 

Shalini M. 

[Rafael]

Hi Shalini,

I forked one sample on stackblitz to demonstrate the problem: https://stackblitz.com/edit/angular-yuxbhe-g9kxy1?file=app.component.html

To reproduce the problem, you need: refresh the browser inside stackblitz one time(to save the columns in localstorage), and after try to remove or add any column in app.component.ts:

Thank you very much

[Shalini Maragathavel]

Hi Rafael, 

Thanks for your update. 

We have analyzed your query and we could see that you like to add/remove the columns dynamically. When you add/remove the columns dynamically by using the Grid’s inbuilt methods only. You cannot add/remove the columns dynamically by using the dom elements.  

So, If you like to add/remove the columns dynamically we suggest you to apply your changes (add new column or remove old column) in the Grid column model . Then, you need to call the refreshColumns() method for update the column model.  Please refer the below code example for more information. 

App.component.ts 

ngOnInit(): void { 

    this.columsGrid = [ 

      ... 

    ]; 

  } 

  AddColumn() { 

      var obj = { field: "Status", headerText: 'Status', width: 120 } 

      this.grid.columns.push(obj as any); 

      this.grid.refreshColumns(); 

    } 

    RemoveColumn() { 

    this.grid.columns.pop();                  

    this.grid.refreshColumns(); 

  } 

 

} 

App.component.html 

 

<div class="col-lg-12 control-section"> 

<button (click)="AddColumn()">AddColumn</button> 

  <button (click)="RemoveColumn()">RemoveColumn</button> 

</div> 

 

<div class="content-wrapper"> 

              <ejs-grid id="Grid" #grid [dataSource]="gridDataSource" [allowSelection]="true" [allowPaging]="true" 

                             [pageSettings]="pageSettings" width="100%"  [columns]="this.columsGrid" 

                             [enablePersistence]="true"> 

              </ejs-grid> 

</div> 

In the above code example we add/remove the column using external button click.

Please refer the below sample for more information,

Sample: https://stackblitz.com/edit/angular-yuxbhe-wqefxw?file=app.component.html 

Regards, 

Shalini M. 

[Rafael]

Hi Shalini,

It works!

Thank you very very much! :D

[Shalini Maragathavel]

Hi Rafael,

Thanks for your update. 

We are happy to hear that our suggested solution was worked fine at your end. 

Please get back to us if you need further assistance.  

Regards,  

Shalini M.