1. Home
  2. Forum
  3. ASP.NET MVC
  4. Remove Grid's persisted data

Remove Grid's persisted data

Hi!

On log off, I am clearing localStorage, sessionStorage and cookies. Still, it seems it is not enough, on login, the data in the grid is still persisted (it has EnablePersistence(true))

I am missing some JS code, I believe.
Here is my existing code:

            localStorage.clear();
            sessionStorage.clear();

            // remove cookies
            var cookies = document.cookie;
            for (var i = 0; i < cookies.split(";").length; ++i)
            {
                var myCookie = cookies[i];
                var pos = myCookie.indexOf("=");
                var name = pos > -1 ? myCookie.substr(0, pos) : myCookie;
                document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
            }

7 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team June 30, 2020 07:19 AM UTC

Hi Catalin, 
 
Greetings from syncfusion support. 
 
Query :  Remove Grid's persisted data 
 
Based on your query, we can understand that you wish to clear the Grid’s persisted data from local storage. You can achieve this requirement by destroying the grid after disabling the enablePersistence property and clearing the local storage data. This is demonstrated in the below code snippet,  
 
 
function myfunction2(args) { 
// use the below code to remove the persisted data in the grid before you log off 
        var gridObj = document.getElementById("Grid").ej2_instances[0]; 
        gridObj.enablePersistence = false; 
        window.localStorage.setItem("gridGrid", ""); 
        gridObj.destroy(); 
//reloads the page 
   //     location.reload(); 
    } 
 
 
 
Please get back to us if you require any further assistance.   
 
Regards, 
Rajapandiyan S 


CR Catalin Radoi June 30, 2020 10:56 AM UTC

Damn, I got into the wrong forum, I have EJ1 (ASP.NET MVC)

but it still doesn't seem to work :(

        var grid = $("#ResourcesGrid0").ejGrid("instance");
        grid.enablePersistence = false;
        window.localStorage.setItem("ResourcesGrid0", "");
        grid.destroy();


there is no "ResourcesGrid0" in localStorage.
also, localStorage.Clear works, but on refresh, all grid's properties are back into local storage


for (var i = 0; i < localStorage.length; i++){
 console.log(localStorage.getItem(localStorage.key(i)) + "\n\n");
}



and what if I am not on the page that has the grid? $("#ResourcesGrid0") doesn't exist on another page, right?



So my question remains, bot for EJ, not EJ2 :( sorry

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 1, 2020 01:11 PM UTC

Hi Catalin, 

Query#:- Remove Grid's persisted data 
 
From your query we suspect that you need to reset the Grid settings and remove the persisted data from Grid model. In order to achieve this requirement we have store the Grid model on initial Rendering of the Grid using Load event and after performing action we have reset the GridModel again after destroying the Grid using destroy method of the Grid on button click.  

Refer to the code example:- 

<button type="button" onclick="refreshData()">Restore Grid</button> 
 
@(Html.EJ().Grid<OrdersView>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        .EnablePersistence() 
         
 
        .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Type("Number").TextAlign(TextAlign.Right).Width(75).Add(); 
            .    .    . 
       }) 
) 
    } 
 
<script> 
    function load(args) { 
        this.model.initGrid = JSON.stringify(this.model); 
    } 
    function refreshData() { 
             
            var obj = $("#FlatGrid").ejGrid("instance"); 
            var gridModel = ej.parseJSON(obj.model.initGrid); 
            obj.model.enablePersistence = false; 
            obj.destroy(); 
            gridModel.query = ej.Query(); 
            gridModel.enablePersistence = true; 
            $("#FlatGrid").ejGrid(gridModel);   //apply the Gridmodel again 
         
    } 
 
</script> 

Refer to the API Link:- 

Please get back to us with further details if your requirement is different from above. 

Regards, 
Farveen sulthana T 


CR Catalin Radoi July 1, 2020 03:44 PM UTC

I don't think that I understand your proposed solution.

Here is my scenario:

The grid is on page1.cshtml and has EnablePersistence()


I am on page2.cshtml - no grid here. And I click a button (e.g. Log Off) - HERE I want to delete all grid's persisted data.

I guessed that the grid saves its state in localStorage or sessionStorage, I have called both localStorage.clear() and sessionStorage.clear() here but after login, the grid still has the filters set on (data is persisted).


I don't want to restore anything and I am not on the page where the grid is.



Best regards,
Cătălin.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 2, 2020 03:02 PM UTC

Hi Catalin, 

Query#:- I don't want to restore anything and I am not on the page where the grid is 

To achieve this, we suggest you to use the ej.persistStateVersion in Grid which is used to remove previous localStorage grid model value and update the new model value on page reload. Refer to the below KB for more information. 

Please get back to us if you have faced any difficulties on this. 

Regards, 
Farveen sulthana T 


EM Emiliano July 15, 2020 03:30 PM UTC

Here's you problem: when you clear the localStorage, you really delete all data in there.
But when you change url or do 'refresh' in a page with grids or other components, in the destroy event of them, it puts the persistance data of the component again in localStorage.

Where i had an help: https://www.syncfusion.com/forums/148167/how-to-disable-persistence-from-javascript

The trick is to go to all elements (my case is Grids and PivotViews) that are displaying in the page you are (even if it's hidden in a tab or something else, but it's generated), put enablePersistance= false, destroy the grid and only then do the localStorage.clear().

Check this javascript function i created to clear all persistance data from all grids and pivotviews, with the bonus that you can pass a specific grid as a parameter and only clear the persisante data of that grid:

View.cshtml:
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add(new { text = "Clear", id = "ClearPersistanceData", align = "Left" });
    toolbarItems.Add("Search");
    toolbarItems.Add("ColumnChooser");
    ...
     (Grid)
         .Toolbar(toolbarItems)
         .ToolbarClick("ToolbarClick")

<script>
     function ToolbarClick(args) {
         var gridObj = this.element.ej2_instances[0];
         if (args.item.id === "GlobalLimparGrids") {
              ClearPersistanceData(gridObj);
         }
     }
</script>



_Layout.cshtml:

function ClearPersistanceData(gridObj) {
    if (gridObj) {
        gridObj.persistance = false;
        gridObj.destroy();
        localStorage.removeItem("grid" + gridObj.element.id);
    }
    else {
        var arr = Array.from(document.getElementsByClassName("e-control e-grid"));
        arr.forEach(function (gridObj) {
            gridObj.ej2_instances[0].persistance = false;
            gridObj.ej2_instances[0].destroy();
        });

        //PivotViews
        var arr = Array.from(document.getElementsByClassName("e-control e-pivotview"));
        arr.forEach(function (obj) {
            obj.ej2_instances[0].persistance = false;
            obj.ej2_instances[0].destroy();
        });

        localStorage.clear();
    }

     location.reload();
}

Marked as answer
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 16, 2020 03:32 PM UTC

Hi Emiliano, 

Thanks for your update. We have discussed for the queries which is in EJ1 (ASP.NET MVC) in the previous updates. The solution you have provided applicable for EJ2(asp.net Mvc).  

If you are facing any difficulties related to this solution, please get back to us with further details. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon