EnablePersistence is preventing the grid from being rendered, among other issues.

[Hatem Muhsen]

This is a continuation of my previous post: https://www.syncfusion.com/forums/147464/save-column-positioning-with-grid-state

The original issue was that when I was saving the grid state and then applying the saved view back to the grid, it was only keeping the sort, group, and filter settings. I also need the save state to apply to column visibility and position as well. I then applied the 'columns' setting which brought back the saved columns/position but made the data disappear! And it also caused the grid headers to change to their database format (no spaces). To circumvent this issue, I added a page reloader at the end of the "Restore Grid" function which would apply the saved state of the grid and then refresh the page so the data comes back.

Suddenly, 'EnablePersistence' no longer works for me. Every time I add it to the grid, it causes the data to disappear. I've added screenshots of the console errors and also what happens to the grid when I enable persistence on the grid. 

Here is my code:

@Html.AntiForgeryToken()

@using System.Web.Script.Serialization;

@using Syncfusion.EJ2;

@using Web.TBS.Models;

@Html.EJS().ScriptManager()

@model IEnumerable<FullProjectViewModel>

@{

    Layout = "~/Views/Shared/UpdatedManagementLayout.cshtml";

    Page.Title = "Project Summary";

}

<div class="padding-10-px" style="width: 100%;">

    <div>

        <h1>

            Project Summary

        </h1>

    </div>

    <div style="margin-top: 25px; margin-bottom: 25px; display: flex; justify-content:space-between;">

        <div>

            <button title="Save your current view" id="btn-save-grid-state" class="btn btn-primary">Save View</button>

            <button title="Restore view to your last custom saved view" id="btn-restore-grid-state" class="btn btn-success">Restore View</button>

            <button title="Reset view to the default settings" id="btn-reset-grid-state" class="btn btn-danger">Reset to Default View</button>

        </div>

        <div>

            @{ if (ViewBag.Permission == 1)

                {

                    @Html.Raw("<button id='btn-add-project' class='btn btn-info'>Add Project</button>");

                }

                else

                {

                    @Html.Raw("<button disabled id='btn-add-project' class='btn btn-info'>Add Project</button>");

                }

            }

            @*<button id="btn-add-project" class="btn btn-info">Add Project</button>*@

        </div>

    </div>

    <div class="control-section" style="position:relative;" id="divPartial">

        @{

            List<object> toolbarItems = new List<object>();

            if (ViewBag.Permissions == 1)

            {

                toolbarItems.Add("Search");

                toolbarItems.Add("ExcelExport");

                toolbarItems.Add("ColumnChooser");

            }

            else

            {

                toolbarItems.Add("Search");

                toolbarItems.Add("ExcelExport");

                toolbarItems.Add("ColumnChooser");

            }

        }

        @*<div style="height: 40px;">

                @Html.EJS().Button("clear").Content("Clear Search").Render()

            </div>*@

        @(Html.EJS().Grid<FullProjectViewModel>("Grid")

            .Width("100%")

            .Height("600")

            .DataSource((IEnumerable<FullProjectViewModel>)Model)

            .AllowResizing(true)

            .AllowFiltering()

            .FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel))

            .AllowSelection()

            .AllowGrouping()

            .AllowSorting(true)

            .AllowReordering()

            .ShowColumnChooser(true)

            .ShowColumnMenu(true)

            .AllowExcelExport(true)

            .EnablePersistence(true)

            .EnableAltRow()

            .DetailTemplate("#rowDetailTemplate")

            .ToolbarClick("toolbarClick")

            .GroupSettings(group => { group.ShowDropArea(false).ShowUngroupButton(true).ShowGroupedColumn(true).ShowToggleButton(true); })

            .Columns(col =>

            {

                //col.Field(p => p.ProjectId).Width("60").IsPrimaryKey(true).IsIdentity(true).Type("number").Width("120").AllowFiltering(false).Add();

                col.HeaderText("Project Details").Visible(true).Template("#viewTemplate").Width("140").AllowEditing(false).Add();

                col.Field(p => p.ProjectName).Width("250").Add();

                col.Field(p => p.ProjectDesc).Width("250").Add();

                col.Field(p => p.ProjectLead).Width("180").Add();

                col.Field(p => p.PortfolioLead).Width("180").Add();

                col.Field(p => p.GroupName).Width("180").Add();

                col.Field(p => p.ProgramName).Width("180").Add();

                col.Field(p => p.PortfolioName).Width("180").Add();

                col.Field(p => p.StatusName).Width("180").Template("#statusTemplate").Add();

                col.Field(p => p.DecisionName).Width("180").Add();

                col.Field(p => p.PriorityName).Width("180").Add();

                col.Field(p => p.AssignedDate).Width("200").Format("yMd").Add();

                col.Field(p => p.JRCDate).Width("200").Format("yMd").Add();

                col.Field(p => p.CompletionDate).Width("200").Format("yMd").Add();

                col.Field(p => p.CreatedOn).Width("200").Format("yMd").Visible(false).Add();

                col.Field(p => p.CreatedBy).Width("200").Visible(false).Add();

                col.Field(p => p.ModifiedOn).Width("200").Format("yMd").Visible(false).Add();

                col.Field(p => p.ModifiedBy).Width("180").Visible(false).Add();

                col.Field(p => p.KSNLink).Width("180").Template("#ksnLinkTemplate").Visible(false).Add();

                col.Field(p => p.Notes).Width("180").Visible(false).Add();

                col.Field(p => p.POData).Width("180").Visible(false).Add();

                col.Field(p => p.Domain).Width("180").Add();

                col.Field(p => p.CIP).Width("180").Add();

                col.Field(p => p.PM).Width("180").Add();

            })

                .ActionComplete("actionComplete")

                .AllowPaging()

                .QueryCellInfo("onQueryCellInfo")

                .PageSettings(page => page.PageCount(5))

                //.EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowEditOnDblClick(false).AllowDeleting(true).ShowDeleteConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); })

                .Toolbar(toolbarItems)

                //.ExcelExportComplete("excelExportComplete")

                .PageSettings(page =>

                {

                    page.PageSize(25);

                    page.PageSizes(new List<string>() { "10", "25", "50", "100", "All" });

                })

                .DataBound("OnDataBound")

                .Render()

        )

    </div>

</div>

Attachment: StateSaveIssue_b96f131f.zip

[Balaji Sekar]

Hi Hatem, 

 

Thanks for the update 

 

Query#: I also need the save state to apply to column visibility and position as well. 

 

Based on your query we have prepared a sample and stored the state initially then hide the two columns by using button click. And then reset the state now the hidden columns are visible and positioning back from the persist data without causing the data to disappear and keeping the same headerText. Please refer the below code example for more information. 

 

[index.cshtml]  

 

<button id="store" class="e-btn e-warning" onclick="store()">Store</button> 

<button id="reset" class="e-btn e-success" onclick="reset()">Reset</button> 

<button id="hide" class="e-btn e-success" onclick="hide()">Hide Column</button> 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowReordering(true).AllowSorting(true).AllowFiltering(true).AllowPaging(true).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").Add(); 

    col.Field("EmployeeID").HeaderText("Employee ID").Width("120").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Width("120").Format("yMd").Add(); 

    col.Field("ShipCity").HeaderText("Ship City").EditType("dropdownedit").Width("150").Add(); 

 

}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Render() 

 

<script type="text/javascript"> 

    function store(e) {  // button click 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        for (var i = 0; i < grid.columns.length; i++) { 

            grid.columns[i].backupHeader = grid.columns[i].headerText;    //take headerText duplicate to store in another property  

        } 

       var persistData = JSON.stringify({ persistData: grid.getPersistData() }); // Grid persistData 

        var ajax = new ej.base.Ajax({ // used our ajax to send the stored persistData to server 

            url: "/Home/StorePersistData", 

            type: "POST", 

            contentType: "application/json; charset=utf-8", 

            datatype: "json", 

            data: persistData  

        }); 

        ajax.send(); 

    } 

    function reset(e) { // button click 

        var ajax = new ej.base.Ajax({ // used our ajax to send the retrive the persistData from server 

            url: "/Home/restore", 

            type: "POST", 

            contentType: "application/json; charset=utf-8" 

        }); 

        ajax.send(); 

        ajax.onSuccess = function (result) { 

            var grid = document.getElementById("Grid").ej2_instances[0]; 

            var state = JSON.parse(result);  

           for (var i = 0; i < state.columns.length; i++) { 

                state.columns[i].headerText = state.columns[i].backupHeader; //restore headerText 

            } 

           grid.setProperties({ // provide the retrived state to Grid through the setProperties method 

                filterSettings: state.filterSettings, 

                sortSettings: { columns: state.sortSettings.columns } 

            }, false); 

            grid.setProperties({ 

                columns: state.columns 

            })  

        } 

    } 

    function hide(e) {         //button click 

        var grid = document.getElementById("Grid").ej2_instances[0];          //After storing the initial state we are hiding the columns 

        grid.columns[2].visible = false; 

        grid.columns[4].visible = false; 

        grid.refreshColumns(); 

    } 

</script> 

 

Query#: And it also caused the grid headers to change to their database format (no spaces) 

 

By default we don’t maintain the headerText in grid.getPersistData() method so only your header renders with dataSource field names. To overcome the issue we have backup the headerText when you store the Grid state. And then set the same headerText when you reset the state. Please refer the below code example for more information. 

 

[index.cshtml]  

 

<button id="store" class="e-btn e-warning" onclick="store()">Store</button> 

<button id="reset" class="e-btn e-success" onclick="reset()">Reset</button> 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowReordering(true).AllowSorting(true).AllowFiltering(true).AllowPaging(true).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").Add(); 

    col.Field("EmployeeID").HeaderText("Employee ID").Width("120").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Width("120").Format("yMd").Add(); 

    col.Field("ShipCity").HeaderText("Ship City").EditType("dropdownedit").Width("150").Add(); 

 

}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Render() 

 

<script type="text/javascript"> 

    function store(e) {  // button click 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        for (var i = 0; i < grid.columns.length; i++) { 

            grid.columns[i].backupHeader = grid.columns[i].headerText;    //take headerText duplicate to store in another property  

        } 

        var persistData = JSON.stringify({ persistData: grid.getPersistData() }); // Grid persistData 

        var ajax = new ej.base.Ajax({ // used our ajax to send the stored persistData to server 

            url: "/Home/StorePersistData", 

            type: "POST", 

            contentType: "application/json; charset=utf-8", 

            datatype: "json", 

            data: persistData  

        }); 

        ajax.send(); 

    } 

    function reset(e) { // button click 

        var ajax = new ej.base.Ajax({ // used our ajax to send the retrive the persistData from server 

            url: "/Home/restore", 

            type: "POST", 

            contentType: "application/json; charset=utf-8" 

        }); 

        ajax.send(); 

        ajax.onSuccess = function (result) { 

            var grid = document.getElementById("Grid").ej2_instances[0]; 

            var state = JSON.parse(result);  

           for (var i = 0; i < state.columns.length; i++) { 

                state.columns[i].headerText = state.columns[i].backupHeader; //restore headerText 

            } 

            grid.setProperties({ // provide the retrived state to Grid through the setProperties method 

                filterSettings: state.filterSettings, 

                sortSettings: { columns: state.sortSettings.columns } 

            }, false); 

            grid.setProperties({ 

                columns: state.columns 

            })  

        } 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151208/ze/151208-1594461265.zip 

 

Regards, 

Balaji Sekar.