Save column positioning with grid state

Hatem Muhsen

Asked On September 11, 2019 02:18 PM UTC

Hi,

This is regarding an earlier query that I had https://www.syncfusion.com/forums/145592/save-grid-state-column-visibility-filtering-sorting-in-database. I am attempting to allow the user to save their grid state (filtering, sorting, grouping, etc) but I want the user to save the full state of their grid including column positioning. I have my grid so that users are allowed to column reordering. Currently, users are able to save the grid state for sorting, filtering, and grouping but not reordering. How do I allow them to save the order of their columns along with the rest of the grid state?

Here's my code:

<div>

<h1>

Project Summary

</h1>

</div>

<div>

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

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

</div>

<div>

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

</div>

@{

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

toolbarItems.Add("Add");

toolbarItems.Add("Edit");

toolbarItems.Add("Delete");

toolbarItems.Add("Update");

toolbarItems.Add("Cancel");

toolbarItems.Add("Search");

toolbarItems.Add("ExcelExport");

toolbarItems.Add("ColumnChooser");

//toolbarItems.Add(new { text = "Click", tooltipText = "Click", id = "Click", prefixIcon = "e-expand" });

}

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

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

</div>*@

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

//.DataBound("dataBound")

//.Height("300")

.Width("100%")

.Height("600")

//.Height("600")

.DataSource(DataManager => { DataManager.Url("/Proj/UrlDataSource").CrudUrl("/Proj/CrudUpdate").Adaptor("UrlAdaptor"); })

.AllowResizing(true)

.AllowFiltering()

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

.AllowSelection()

.AllowGrouping()

.AllowSorting(true)

.AllowReordering()

.ShowColumnChooser(true)

.ShowColumnMenu(true)

.AllowExcelExport(true)

.EnableAltRow()

.DetailTemplate("#rowDetailTemplate")

.ToolbarClick("toolbarClick")

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

//.SearchSettings()

//.FrozenRows(1)

.Columns(col =>

{

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

col.HeaderText("Project Details").Visible(true).Template(" <a rel='nofollow' href='ProjectDetailsMaster?id=${Id} '>View</a> ").Width("140").AllowEditing(false).Add();

col.Field(p => p.ProjName).AllowSorting(true).AllowFiltering(false).Width("175").Add();

/*REQUIRED*/

col.Field(p => p.ProjDesc).Width("325").ValidationRules(new { required = "true" }).AllowFiltering(false).Add();

/*REQUIRED*/

col.Field(p => p.GroupName).EditType("dropdownedit").Edit(new { @params = GroupNameDropdown }).Width("175").ValidationRules(new { required = "true" }).Add();

/*REQUIRED*/

col.Field(p => p.PortfolioName).EditType("dropdownedit").Edit(new { @params = PortfolioNameDropdown }).Width("175").ValidationRules(new { required = "true" }).Add();

/*REQUIRED*/

col.Field(p => p.PortLead).EditType("dropdownedit").Edit(new { @params = PortfolioLeadsDropdown }).Width("180").ValidationRules(new { required = "true" }).Add();

/*REQUIRED*/

col.Field(p => p.ProjLead).EditType("dropdownedit").Edit(new { @params = ProjectLeadsDropdown }).Width("180").ValidationRules(new { required = "true" }).Add();

/*REQUIRED*/

col.Field(p => p.ProgramName).EditType("dropdownedit").Edit(new { @params = ProgramNameDropdown }).Width("180").ValidationRules(new { required = "true" }).Add();

/*REQUIRED*/

col.Field(p => p.AssignedDate).Format("yMd").EditType("datepickeredit").Width("175").ValidationRules(new { required = "true" }).Add();

/*REQUIRED*/

col.Field(p => p.StatusName).EditType("dropdownedit").Edit(new { @params = StatusNameDropdown }).Template("#statusTemplate").Width("175").ValidationRules(new { required = "true" }).Add();

col.Field(p => p.DecisionTypeName).EditType("dropdownedit").Edit(new { @params = DecisionNameDropdown }).Width("180").Add();

col.Field(p => p.JRCDate).Format("yMd").EditType("datepickeredit").Width("175").Add();

/*REQUIRED*/

col.Field(p => p.PriorityName).EditType("dropdownedit").Edit(new { @params = PriorityNameDropdown }).Width("175").Add();

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

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

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

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

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

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

})

//.EnableVirtualization()

.ActionComplete("actionComplete")

.AllowPaging()

.QueryCellInfo("onQueryCellInfo")

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

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

.Toolbar(toolbarItems)

//(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "ColumnChooser", "ExcelExport", "Search" })

.PageSettings(page =>

{

page.PageSize(25);

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

})

//.QueryCellInfo("OnQueryCellInfo")

.DataBound("OnDataBound")

.Render()

)

</div>

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On September 13, 2019 01:19 PM UTC

Hi Hatem,

As per your query, we have saved the persist data in the Grid while we reordering the Grid. You can also save and update the Grid state for reordering properties in the EJ2 Grid. Please refer the below sample for more information.

[index.cshtml]

@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("OrderDate").HeaderText("Order Date").Width("120").Format("yMd").Add();

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

function store(e) { // button click

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

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);

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

})

}

Sample link: https://www.syncfusion.com/downloads/support/forum/147464/ze/EJ2Grid-13092019-607947735.zip

Please get back to us, if you need further assistance.

Regards,

Thavasianand S.

Reply | Reply with quote

Hatem Muhsen

Replied On September 25, 2019 05:10 PM UTC

I copied and pasted my restore function below. It works except for one thing, the column positioning. If I restore the columns the way that you suggested, it messes up the headers (retrieving the database field names) and it causes the data to completely disappear. How do I get the column (visibility and positioning) back from the persist data without causing the data to disappear and keeping the headers the way they are?

function restoreGridState() {

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

// Get grid state from server via AJAX request

$.ajax({

type: 'GET',

url: '@Url.Action("RestoreGridState", "Proj")',

success: function (data) {

// Update Client Grid State

if (data) {

var gridStateData = JSON.parse(JSON.parse(data));

grid.setProperties({

columnModel: gridStateData.columns,

sortSettings: { columns: gridStateData.sortSettings.columns },

filterSettings: gridStateData.filterSettings,

pageSettings: { pageSize: gridStateData.pageSettings.pageSize, currentPage: gridStateData.pageSettings.currentPage, pageCount: gridStateData.pageSettings.pageCount },

searchSettings: { fields: gridStateData.searchSettings.fields, key: gridStateData.searchSettings.key }

}, true)

grid.setProperties({

groupSettings: { columns: gridStateData.groupSettings.columns }

})

grid.refreshHeader();

}

},

});

}

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On September 26, 2019 12:26 PM UTC

Hi Hatem,

Query: How do I get the column (visibility and positioning) back from the persist data without causing the data to disappear and keeping the headers the way they are?

We have validated your query we have removed following properties column’s headerText, column template, filter template, editTemplate for certain cases and prevent the JSON circular reference issue property from getPersistData method. For this reason, the headerText is not persisted in getPersistData method. So the column Field value is set to column header. Here, we have modified the sample to set the proper headerText for corresponding columns. Refer the below code snippets and sample for your reference.

[code snippets]

...

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 retrieve 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 retrieved 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/directtrac/general/ze/EJ2Grid1351981056

Please get back to us if you need further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147464	Sep 11,2019 02:18 PM UTC	Sep 26,2019 12:26 PM UTC	ASP.NET MVC - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US