Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
145592 | Jun 30,2019 01:10 AM UTC | Nov 19,2020 12:08 PM UTC | ASP.NET MVC - EJ 2 | 12 |
![]() |
Tags: Grid |
<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() ) |
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
})
} |
[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> |
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.
This page will automatically be redirected to the sign-in page in 10 seconds.