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