- Home
- Forum
- ASP.NET MVC - EJ 2
- Save grid state (column visibility, filtering, sorting) in database
Save grid state (column visibility, filtering, sorting) in database
|
<div class="control-section"> @(Html.EJS().Grid<ProjectMvcModel>("Grid") .DataSource(DataManager => { DataManager.Url("/Proj/UrlDataSource").CrudUrl("/Proj/CrudUpdate").Adaptor("UrlAdaptor"); }) //.DataSource(DataManager => { DataManager.Url("/PMRS/UrlDataSource").InsertUrl("/PMRS/Insert").Adaptor("UrlAdaptor"); }) .Width("100%") .AllowResizing(true) .AllowFiltering() .FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel)) .AllowSelection() .AllowGrouping() //.AllowMultiSorting() //.AllowTextWrap() .AllowSorting(true) .AllowReordering() .ShowColumnChooser(true) .ShowColumnMenu(true) .AllowExcelExport(true) .EnablePersistence(true)
.ToolbarClick("toolbarClick") .GroupSettings(group => { group.ShowDropArea(false).ShowUngroupButton(true); }) //.ActionBegin("onActionBegin") .Columns(col => { col.Field(p => p.Id).Width("60").IsPrimaryKey(true).IsIdentity(true).Type("number").Width("120").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.Id).Width("75").IsPrimaryKey(true).Type("number").Add(); col.Field(p => p.ProjName).AllowSorting(true).Width("175").Visible(false).Add(); col.Field(p => p.GroupName).EditType("dropdownedit").Width("175").ValidationRules(new { required = "true" }).Add(); col.Field(p => p.ProjDesc).ValidationRules(new { required = "true" }).Width("325").Add(); //allow editing(true) col.Field(p => p.PortLead).ValidationRules(new { required = "true" })/*.EditType("dropdownedit")*/.Width("180").Add(); col.Field(p => p.ProjLead).ValidationRules(new { required = "true" })/*.EditType("dropdownedit")*/.Width("180").Add(); col.Field(p => p.ProgramName).ValidationRules(new { required = "true" }).EditType("dropdownedit").Width("180").Add(); col.Field(p => p.AssignedDate).ValidationRules(new { required = "true" }).Format("yMd").EditType("datepickeredit").Width("175").Add(); //Date col.Field(p => p.StatusName)/*.Template("#statusTemplate")*/.EditType("dropdownedit").Width("175").Template("#statusTemplate").ValidationRules(new { required = "true" }).Add();
col.Field(p => p.DecisionTypeName).EditType("dropdownedit").Width("180").Add(); col.Field(p => p.JRCDate).Format("yMd").EditType("datepickeredit").Width("175").Add(); //Date col.Field(p => p.PriorityName).EditType("dropdownedit").Width("175").ValidationRules(new { required = "true" }).Add(); col.Field(p => p.CompletionDate).Format("yMd").EditType("datepickeredit").Width("200").Visible(false).Add(); col.Field(p => p.CreatedOn).Format("yMd").Width("200").Visible(false).Add(); col.Field(p => p.CreatedBy).Width("200").Visible(false).Add(); col.Field(p => p.ModifiedOn).Format("yMd").Width("200").Visible(false).Add(); col.Field(p => p.ModifiedBy).Width("180").Visible(false).Add(); col.Field(p => p.KSNLink).Width("180").Visible(false).Add(); //col.Field(p => p.ProjSched).Width("180").Visible(false).Add(); //col.Field(p => p.Budget).Width("100").Add(); }) //.Load("load") //.ActionBegin("actionBegin") //.BatchAdd("insert") //.CellSave("insert")
.ActionComplete("actionComplete") .AllowPaging() .QueryCellInfo("querycellinfo") //.TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Header); }) .PageSettings(page => page.PageCount(5)) .EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }) .Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "ColumnChooser", "ExcelExport", "Search" }) .PageSettings(page => { //page.PageSizes(true); page.PageSize(25); //page.PageSizes(new List<int>() { 10, 25, 50, 100 }); page.PageSizes(new List<string>() { "10", "25", "50", "100", "All" }); //page.PageSizes(new List<string>() { "All" }); }) //.Created("onGridCreate") //.RowSelected("rowSelected") //.Load("load") //.ActionComplete("complete") //.ActionBegin("Begin") //.Height("600") //.EnableVirtualization(true) //.SearchSettings() .Render() ) </div> </div> |
Also, do I need a separate table in my db?
Any help would be appreciated. Thank you.
|
Store button click:
<script type="text/javascript">
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 } // provide the retrieved values to GRid
}, false);
grid.setProperties({
columns: state.columns
})
}
}
</script>
Controller:
public void StorePersistData(string persistData)
{
gridState = persistData;
// please do the DB save action here
}
public string restore()
{
// please do the retrieve action here
return gridState;
} |
|
@(Html.EJS().Grid<ProjectMvcModel>("Grid") .DataSource(DataManager => { DataManager.Url("/Proj/UrlDataSource").CrudUrl("/Proj/CrudUpdate").Adaptor("UrlAdaptor"); }) //.DataSource(DataManager => { DataManager.Url("/PMRS/UrlDataSource").InsertUrl("/PMRS/Insert").Adaptor("UrlAdaptor"); }) .Width("100%") .AllowResizing(true) .AllowFiltering() .FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel)) .AllowSelection() .AllowGrouping() //.AllowMultiSorting() //.AllowTextWrap() .AllowSorting(true) .AllowReordering() .ShowColumnChooser(true) .ShowColumnMenu(true) .AllowExcelExport(true) .EnablePersistence(true) .ToolbarClick("toolbarClick") .GroupSettings(group => { group.ShowDropArea(false).ShowUngroupButton(true).ShowGroupedColumn(true).ShowToggleButton(true); }) //.ActionBegin("onActionBegin") .Columns(col => { col.Field(p => p.Id).Width("60").IsPrimaryKey(true).IsIdentity(true).Type("number").Width("120").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.Id).Width("75").IsPrimaryKey(true).Type("number").Add(); col.Field(p => p.ProjName).AllowSorting(true).Width("175").Visible(false).Add(); col.Field(p => p.GroupName).EditType("dropdownedit").Width("175").ValidationRules(new { required = "true" }).Add(); col.Field(p => p.ProjDesc).ValidationRules(new { required = "true" }).Width("325").Add(); //allow editing(true) col.Field(p => p.PortLead).ValidationRules(new { required = "true" })/*.EditType("dropdownedit")*/.Width("180").Add(); col.Field(p => p.ProjLead).ValidationRules(new { required = "true" })/*.EditType("dropdownedit")*/.Width("180").Add(); col.Field(p => p.ProgramName).ValidationRules(new { required = "true" }).EditType("dropdownedit").Width("180").Add(); col.Field(p => p.AssignedDate).ValidationRules(new { required = "true" }).Format("yMd").EditType("datepickeredit").Width("175").Add(); //Date col.Field(p => p.StatusName)/*.Template("#statusTemplate")*/.EditType("dropdownedit").Width("175")/*.Template("#statusTemplate")*/.ValidationRules(new { required = "true" }).Add(); col.Field(p => p.DecisionTypeName).EditType("dropdownedit").Width("180").Add(); col.Field(p => p.JRCDate).Format("yMd").EditType("datepickeredit").Width("175").Add(); //Date col.Field(p => p.PriorityName).EditType("dropdownedit").Width("175").ValidationRules(new { required = "true" }).Add(); col.Field(p => p.CompletionDate).Format("yMd").EditType("datepickeredit").Width("200").Visible(false).Add(); col.Field(p => p.CreatedOn).Format("yMd").Width("200").Visible(false).Add(); col.Field(p => p.CreatedBy).Width("200").Visible(false).Add(); col.Field(p => p.ModifiedOn).Format("yMd").Width("200").Visible(false).Add(); col.Field(p => p.ModifiedBy).Width("180").Visible(false).Add(); col.Field(p => p.KSNLink).Width("180").Visible(false).Add(); //col.Field(p => p.ProjSched).Width("180").Visible(false).Add(); //col.Field(p => p.Budget).Width("100").Add(); }) //.Load("load") //.ActionBegin("actionBegin") //.BatchAdd("insert") //.CellSave("insert") //.RowSelecting("rowSelecting") .ActionComplete("actionComplete") .AllowPaging() //.QueryCellInfo("querycellinfo") //.TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Header); }) .PageSettings(page => page.PageCount(5)) .EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }) .Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "ColumnChooser", "ExcelExport", "Search" }) .PageSettings(page => { //page.PageSizes(true); page.PageSize(25); //page.PageSizes(new List<int>() { 10, 25, 50, 100 }); page.PageSizes(new List<string>() { "10", "25", "50", "100", "All" }); //page.PageSizes(new List<string>() { "All" }); }) //.Created("onGridCreate") //.RowSelected("rowSelected") //.Load("load") //.ActionComplete("complete") //.ActionBegin("Begin") //.Height("600") //.EnableVirtualization(true) //.SearchSettings() .Render() ) |
Attachment: Screenshots_38449f7.zip
|
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.refreshHeader();// please add this code
grid.setProperties({// please remove this codes
columns: state.columns
})
} |
Regards,
Rajapandi R
Attachment: grid_error_d13ce28d.zip
|
[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
})
}
}</script> |
Hello.
I reply to this old post, which was very helpful, especially the last reply from Rajapandi Ravi.
In my grid I use a template for a specific column: using the save/restore of the state lose that template.
Is there a way to force the grid to reapply the template after call "setProperties" method?
Thanks for the support.
Best regards,
Emanuele
Emanuele,
By default, the Grid column template will not be persisted while using the “getPersistData” method since the template may contain any elements. So, while resetting the Grid column to the Grid we need to set the template property to achieve your requirement. Please refer to the below code example and sample for more information.
|
<div> <ejs-grid id="Grid" allowPaging="true" load="onLoad" allowResizing="true" allowReordering="true" height="300" allowsorting="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })"> <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> <e-data-manager url="Index?handler=UrlDatasource" insertUrl="Index?handler=Insert" updateUrl="Index?handler=Update" removeUrl="Index?handler=Remove" adaptor="UrlAdaptor"></e-data-manager> <e-grid-columns> . . . . . . . . . . . . . . <e-grid-column field="ShipCity" headerText="Ship City" template="#template" width="120"></e-grid-column> </e-grid-columns> </ejs-grid>
</div> <script> function onLoad() { this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name=__RequestVerificationToken]").val() }]; } </script>
<script type="text/javascript">
function reset(e) { // button click var ajax = new ej.base.Ajax({ // used our ajax to send the retrive the persistData from server url: "/Index?handler=Restore", type: "GET", contentType: "application/json; charset=utf-8", beforeSend: function (req) { req.httpRequest.setRequestHeader('XSRF-TOKEN', $('input:hidden[name="__RequestVerificationToken"]').val()); } }); ajax.send(); ajax.onSuccess = function (result) { var grid = document.getElementById("Grid").ej2_instances[0]; var savedProperties = JSON.parse(result); var gridColumnsState = Object.assign([], document.getElementById('Grid').ej2_instances[0].getColumns()); for (var i = 0; i < savedProperties.columns.length; i++) { savedProperties.columns[i].headerText = savedProperties.columns[i].backupHeader; //restore headerText } savedProperties.columns.forEach(function (col) { var colTemplate = gridColumnsState.find(function (colColumnsState) { return colColumnsState.field === col.field; })['template']; col.template = colTemplate; //restore the template });
grid.setProperties(savedProperties); } } </script>
<script id="template" type="text/x-template"> <a rel='nofollow' href=https://en.wikipedia.org/wiki/${ShipCity}>${ShipCity}</a> </script>
|
Sample:
Attachment: 145592_35774636.zip
Hi!
Sorry for the delay with the response.
Thanks for your support: it works!
Just for information, following I attach the code that I used (in order to load the complete state of the grid, including headerText and headerTemplate), based on your suggestions.
Maybe can be usefull.
Best regards,
Emanuele
var grid = document.getElementById("myGrid").ej2_instances[0];
var gridColumnsState = Object.assign([], grid.getColumns());
var savedProperties = JSON.parse(result);
savedProperties.columns.forEach(function (col) {
var originalColumn = gridColumnsState.find(function (colColumnsState) { return colColumnsState.field === col.field; })
// Header Text
colHeaderText = originalColumn['headerText'];
if (colHeaderText !== undefined) {
col.headerText = colHeaderText;
}
// Template
var colTemplate = originalColumn['template'];
if (colTemplate !== undefined) {
col.template = colTemplate;
}
// Header Template
var colHeaderTemplate = originalColumn['headerTemplate'];
if (colHeaderTemplate !== undefined) {
col.headerTemplate = colHeaderTemplate;
}
});
grid.setProperties(savedProperties);
grid.refreshHeader();
grid.refresh();
- 15 Replies
- 6 Participants
-
HM Hatem Muhsen
- Jun 30, 2019 01:10 AM UTC
- Jan 10, 2024 11:34 AM UTC
