Issue with persistence and new or removed columns

[Michael Mairegger]

Hello,

I want to use persistence with grid and have the following issue. If I add a new column in codebehind to the grid that has persistence enabled then this column is not shown. I assume that the column definition is loaded from the stored json. The same happens if I remove a column in codebehind from the grid. The removed column stays there.

Is there a way to reload the column definition from code? I have tried to all refreshXXX methods from GridComponent.

Reproduction step:

1. Create a grid with some columns
2. Enable persistence
3. Add a column
4. Ensure that grid settings are stored
5. Confirm that the newly added column is not there

1. Create a grid with some columns
2. Enable persistence
3. Remove a column
4. Ensure that grid settings are stored.
5. Confirm that the prior removed column still is there

Kind Regards,

Michael

[Vignesh Sivagnanam]

Hi Michael 

Greetings From Syncfusion support 

Based on your query you try to add or remove the columns in the Grid when enablePersistence is true.  

State persistence refers to the Grid’s state maintained in the browser’s localStorage even if the browser is refreshed or if you move to the next page within the browser. If you are doing changes by using dom elements it was not effected to the Grid. It was not the correct behavior. You can do your new changes by using our Grid inbuilt methods.  

From your query you like the add the columns when the enablePersistance property as true. If you would like to add the columns dynamically we suggest you to use the Grid inbuilt methods and call the refreshColumns() method for UI changes. Please refer the below code example and sample for more information.  

In this below sample we have add the new column by using button click event.  

Code Example: 

app.component.html: 

<input class="form-control" 

type="text" name="userQuestion" id="userQuestions"> 

  <button (click)="AddColumns()">Add columns</button> 

  <ejs-grid #grid [dataSource]='data' [enablePersistence]='false' allowPaging='true' [pageSettings]='pageOptions' 

    allowSorting='true'> 

    <e-columns> 

      ………………. 

      ………………. 

    </e-columns> 

  </ejs-grid> 

 

app.component.ts: 

AddColumns() { 

    var colName = (document.getElementsByClassName("form-control")[0] as any) 

      .value; 

    var obj = { field: colName, headerText: colName }; 

    this.grid.columns.push(obj as any); //you can add the columns by using the Grid columns method 

    this.grid.refreshColumns(); 

  } 

 

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

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

1. In your query you have mentioned that changes not effected to the Grid. Please share the details about what type of changes you are doing in the Grid. 

2. If possible reproduce your problem with our above attached sample. 

Regards, 

Vignesh Sivagnanam 

[Michael Mairegger]

Hi Vignesh,

https://stackblitz.com/edit/angular-ws2fqv-4rhvep?file=app.component.html

Reproduction step:

1. Click "Open in new Window"
2. After the exernal window opened refresh the browser to force a serialization to json.
3. After refreshing remove the column Freight in html code
4. Force refreshing the external window
5. Validate that the Freight column is still present

The issue is because during development the requirements change and I have to add additional column (or remove obsolte ones) and these are defined within the HTML file-

Regards,

Michael

[Vignesh Sivagnanam]

Hi Michael 

Based on your update you have mentioned that you are removing the column Freight in HTML Code. In previous update we mentioned that when we doing changes in DOM elements (HTML Code) it will not affected to the Grid and it was not correct behavior of persistence. 

State persistence refers to the Grid’s state maintained in the browser’s localStorage even if the browser is refreshed or if you move to the next page within the browse. So, we suggest you to add or remove the columns by using our Grid inbuilt methods. 

Let us know if you have any concerns. 

Regards, 

Vignesh Sivagnanam 

[Jason Delladecimas]

Hi Vignesh Sivagnanam,

I am trying to find the angular methods to remove columns but the online documentation does not seem to reference them. Please note I do not mean hide but if the local storage has a column which no longer exists I want to remove it.

Also your stackblitz example does seem to work.

[Rajapandi Ravi]

Hi Jason,

Thanks for your update

We have checked your shared information; we could see that you are like to add/remove the column dynamically after the Grid initialization. Once the Grid is rendered with initial settings when the EnablePersistence is true, we can add the column to the Grid by using only the Grid inbuilt methods. To reflect our changes in the Grid, first we need to notify the Grid model. To notify the Grid model and reflect our changes properly in Grid, we can use only our Grid inbuilt methods. This was the default behavior of our Grid.

Regards,

Rajapandi R

[Jason Delladecimas]

This is still an issue for us.
Are you planning on being able to enable persistency and also include new columns.

Otherwise what you are saying is, we cannot have persistency on unless column never change - which is not a great for us.
Or are you saying, this is a how the grid works, you are not going to change it, and we need to work around the issue, thanks.

Really, if you have a feature like persistency it should handle new columns being added even when they are not in the object stored in local storage.

[Michael Mairegger]

This is a problem that affects our clients. When I set up some columns and turn on persistence, everything works as expected. However, there is no way to add a new column in a new application version and make it visible to the client without erasing the entire saved value. This is a serious limitation

[Rajapandi Ravi]

Hi Customers,

When the enablePersistence property is set to true in the Syncfusion Grid component, column configurations are persisted. If you need to add new columns to the existing persisted state, you can achieve this by using the Grid’s built-in methods like column.push, and then call the refreshColumns method to update the UI with the new columns. This is the default behavior based on our current architecture. We have already discussed about your requirement in our documentation which can be accessed from the below link,

Documenation: https://ej2.syncfusion.com/angular/documentation/grid/state-management#add-a-new-column-in-persisted-columns-list

Regards,

Rajapandi R