Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
151208 | Feb 3,2020 10:26 PM UTC | Feb 4,2020 12:37 PM UTC | ASP.NET MVC - EJ 2 | 1 |
![]() |
Tags: Grid |
@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> |
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.