BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<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> |