We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

151208 Feb 3,2020 10:26 PM UTC Feb 4,2020 12:37 PM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Grid
Hatem Muhsen
Asked On February 3, 2020 10:26 PM UTC

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 [Syncfusion]
Replied On February 4, 2020 12:37 PM UTC

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> 
 
 
Regards, 
Balaji Sekar. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon