enablePersistence="true" razor add/remove columns not displayed/removed

[Massimo Giambona]

Info

Syncfusion Version: 16.1.0.32

OS: Windows 10

Platform: ASP.NET Core (.NET Framework)

Browser: Chrome 65

Repro Steps

1. New grid with enablePersistence="true"  with some columns. 
   
2. DisplayGrid
   
3. Add or Remove columns on razor page (even Hidden Columns)
4. Remove from browser local storage gridGrid values (tried also to NOT remove)
5. Refresh page

Expected Result

New Columns are displayed/removed

Actual Result

Same columns are displayed

Note

I Tried also to clean browser cache with no luck

[Dhivya Rajendran]

Hi Massimo, 

Thanks for contacting Syncfusion support, 

We have analyzed your requirement. By, default Grid give more importance for the localStorage while using enablePersistence, We have created a sample as per your requirement, In the below sample we have add column dynamically using razor code and displayed added column while refresh the browser by deleting the columns property from the locaStorage.  Kindly refer the below code snippet and sample for more information. 

 

Index.cshtml 

<script> 

    var value = window.localStorage.getItem('gridGrid'); //"gridGrid" is component name + component id. 

    var model = JSON.parse(value); 

    delete model["columns"];    // remove the column from localStorage 

    window.localStorage.setItem('gridGrid', JSON.stringify(model));  

</script> 

<div> 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

    if (rndnumber % 2 ==0){ 

        foreach (var i in new List<string>() {"OrderID", "CustomerID" }) { 

            col.Field(i).HeaderText(i).Add();                        // add columns dynamically 

        }} 

       col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Format("C2").Add(); 

    col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").Add(); 

}).AllowPaging().EnablePersistence(true).PageSettings(page => page.PageSize(8)).Render() 

</div> 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridwithrazorpersistence-8204397  

 

Documentation: https://ej2.syncfusion.com/16.1.24/aspnet/documentation/grid/state-persistence.html?syntax=razor  

Regards, 

R.Dhivya 

[Massimo Giambona]

DearDhivya Rajendran,

I tried your code with no luck.

I know the doc about the localStorage but I think there are some other location where grid load/save columns, I tried also to:

1. enablePersistence=true

2. Load the page

3. F12 and on tools select the LocalStorage for the page and completely delete the grid* key (by the way there are two of them gridgrid and gridGrid with same props except for the columns props on gridgrid)

4. Edit the razor page and comment or remove or add some cols

5. Refresh the page

6. On the localStorage there are (again) two keys with the columns BEFORE the mods on point 4.

If you set enablePersistence=false and reload sometimes the page the localStorage has the two grid* key with the initial columns (before point 4) but the component correctly render the specified columns on Razor.

I read the docs and I see that grid save the columns on unload, maybe I must navigate on other page, clear the localStorage and return the page ?

If I refresh the code doesn't work....

Attachment: Capture_4c9f0c4.zip

[Dhivya Rajendran]

Hi Massimo, 

Thanks for your update, 

we have validated the provided information and screen shots. Could you please check the below details in your sample and refer the code snippet for more information. 

<script> 

    var value = window.localStorage.getItem('gridGrid');//"gridGrid" is component name + component id. 

    var model = JSON.parse(value); 

    delete model["columns"]; 

    window.localStorage.setItem('gridGrid', JSON.stringify(model));  

</script> 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{    col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").Add(); 

}).AllowPaging().EnablePersistence(true).PageSettings(page => page.PageSize(8)).Render() 

1. Before proceeding the below steps please clear the localStorage.
2. You must specify the above script tag before the Grid render code.
3. Could you please check the id of your grid sample where grid- denoted the component name and Grid denoted the id of the component. I have specified the id as “Grid” in the sample so that I have used “gridGrid” .
4. Are you using dynamic id creation for Grid ?

Please get back to us if you are face the same issue and provide grid sample for our reference, it will be more helpful for us to provide a better solution as early as possible. Here we have attached the video for your reference.  

Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/enablepersistence505302521  

Regards, 

R.Dhivya  

[Massimo Giambona]

Thanks for your patience.

I have solved.

Steps

1. Navigate out of the page (ie Root Page) or close/open the browser
2. Delete localStorage for grid
3. Navigate to the page

When you delete the localStorage and refresh the page the grid on unload event it save current settings again and never refresh the columns.

Thanks

[Dhivya Rajendran]

Hi Massimo, 

Thanks for your update, 

We are glad to hear that your problem has been resolved. Please get back to us if you need further assistance. 

Regards, 

R.Dhivya 

[Bruno F Valli]

How do you "Delete localStorage for grid"?

[Manikandan Nallathambi]

Hi Bruno, 

  

Greetings from Syncfusion support. 

  

Based on your query, we suspect that you need to clear the grid’s persisted data from local storage on refreshing the page. You can achieve this requirement by destroying the grid after disabling the enablePersistence property and clearing the local storage data before the page refresh. 

  

This is demonstrated in the below code snippet and sample where we have cleared the Grid’s persisted data from local storage and refreshed the page on button click, 

  

index.js 

document.getElementById('Delete').onclick = () => { 

             grid.enablePersistence = false; 

            window.localStorage.setItem("Grid", ""); 

            grid.destroy(); 

            location.reload(); 

  

  }   

  

  

We have prepared a sample based on this for your reference. You can find it below, 

  

Sample: https://stackblitz.com/edit/wpxtrq-6ojywh?file=index.ts 

Please get back to us if you need further assistance. 

  

Regards 

Manikandan N