We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 147464 | Sep 11,2019 02:18 PM UTC | Sep 26,2019 12:26 PM UTC | ASP.NET MVC - EJ 2 | 3 |
|
Tags: Grid |
|
<div class="padding-10-px"> <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 the grid to your last custom saved view" id="btn-restore-grid-state" class="btn btn-success">Restore Grid</button> <button title="Reset the grid to the default settings" id="btn-reset-grid-state" class="btn btn-danger">Reset to Default</button> </div> <div> <button id="btn-add-project" class="btn btn-info">Add Project</button> </div> </div> <div class="control-section" style="position:relative;"> @{ List<object> toolbarItems = new List<object>(); toolbarItems.Add("Add"); toolbarItems.Add("Edit"); toolbarItems.Add("Delete"); toolbarItems.Add("Update"); toolbarItems.Add("Cancel"); toolbarItems.Add("Search"); toolbarItems.Add("ExcelExport"); toolbarItems.Add("ColumnChooser"); //toolbarItems.Add(new { text = "Click", tooltipText = "Click", id = "Click", prefixIcon = "e-expand" }); } @*<div style="height: 40px;"> @Html.EJS().Button("clear").Content("Clear Search").Render() </div>*@ @(Html.EJS().Grid<ProjectMvcModel>("Grid") //.DataBound("dataBound") //.Height("300") .Width("100%") .Height("600") //.Height("600") .DataSource(DataManager => { DataManager.Url("/Proj/UrlDataSource").CrudUrl("/Proj/CrudUpdate").Adaptor("UrlAdaptor"); }) .AllowResizing(true) .AllowFiltering() .FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel)) .AllowSelection() .AllowGrouping() .AllowSorting(true) .AllowReordering() .ShowColumnChooser(true) .ShowColumnMenu(true) .AllowExcelExport(true) .EnableAltRow() .DetailTemplate("#rowDetailTemplate") .ToolbarClick("toolbarClick") .GroupSettings(group => { group.ShowDropArea(false).ShowUngroupButton(true).ShowGroupedColumn(true).ShowToggleButton(true); }) //.SearchSettings() //.FrozenRows(1) .Columns(col => { col.Field(p => p.Id).Width("60").IsPrimaryKey(true).IsIdentity(true).Type("number").Width("120").AllowFiltering(false).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.ProjName).AllowSorting(true).AllowFiltering(false).Width("175").Add(); /*REQUIRED*/ col.Field(p => p.ProjDesc).Width("325").ValidationRules(new { required = "true" }).AllowFiltering(false).Add(); /*REQUIRED*/ col.Field(p => p.GroupName).EditType("dropdownedit").Edit(new { @params = GroupNameDropdown }).Width("175").ValidationRules(new { required = "true" }).Add(); /*REQUIRED*/ col.Field(p => p.PortfolioName).EditType("dropdownedit").Edit(new { @params = PortfolioNameDropdown }).Width("175").ValidationRules(new { required = "true" }).Add(); /*REQUIRED*/ col.Field(p => p.PortLead).EditType("dropdownedit").Edit(new { @params = PortfolioLeadsDropdown }).Width("180").ValidationRules(new { required = "true" }).Add(); /*REQUIRED*/ col.Field(p => p.ProjLead).EditType("dropdownedit").Edit(new { @params = ProjectLeadsDropdown }).Width("180").ValidationRules(new { required = "true" }).Add(); /*REQUIRED*/ col.Field(p => p.ProgramName).EditType("dropdownedit").Edit(new { @params = ProgramNameDropdown }).Width("180").ValidationRules(new { required = "true" }).Add(); /*REQUIRED*/ col.Field(p => p.AssignedDate).Format("yMd").EditType("datepickeredit").Width("175").ValidationRules(new { required = "true" }).Add(); /*REQUIRED*/ col.Field(p => p.StatusName).EditType("dropdownedit").Edit(new { @params = StatusNameDropdown }).Template("#statusTemplate").Width("175").ValidationRules(new { required = "true" }).Add(); col.Field(p => p.DecisionTypeName).EditType("dropdownedit").Edit(new { @params = DecisionNameDropdown }).Width("180").Add(); col.Field(p => p.JRCDate).Format("yMd").EditType("datepickeredit").Width("175").Add(); /*REQUIRED*/ col.Field(p => p.PriorityName).EditType("dropdownedit").Edit(new { @params = PriorityNameDropdown }).Width("175").Add(); col.Field(p => p.CompletionDate).Format("yMd").EditType("datepickeredit").Width("200").Visible(false).Add(); col.Field(p => p.CreatedOn).Width("200").Format("yMd").IsIdentity(true).Visible(false).Add(); col.Field(p => p.CreatedBy).Width("200").IsIdentity(true).Visible(false).Add(); col.Field(p => p.ModifiedOn).Width("200").Format("yMd").IsIdentity(true).Visible(false).Add(); col.Field(p => p.ModifiedBy).Width("180").IsIdentity(true).Visible(false).Add(); col.Field(p => p.KSNLink).Template("#ksnLinkTemplate").Visible(false).Width("180").Add(); }) //.EnableVirtualization() .ActionComplete("actionComplete") .AllowPaging() .QueryCellInfo("onQueryCellInfo") .PageSettings(page => page.PageCount(5)) .EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }) .Toolbar(toolbarItems) //(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "ColumnChooser", "ExcelExport", "Search" }) .PageSettings(page => { page.PageSize(25); page.PageSizes(new List<string>() { "10", "25", "50", "100", "All" }); }) //.QueryCellInfo("OnQueryCellInfo") .DataBound("OnDataBound") .Render() ) </div> </div> |
|
[index.cshtml]
@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("OrderDate").HeaderText("Order Date").Width("120").Format("yMd").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];
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 }
}, false);
grid.setProperties({
columns: state.columns
})
}
} |
|
function restoreGridState() { var grid = document.getElementById("Grid").ej2_instances[0]; // Get grid state from server via AJAX request $.ajax({ type: 'GET', url: '@Url.Action("RestoreGridState", "Proj")', success: function (data) { // Update Client Grid State if (data) { var gridStateData = JSON.parse(JSON.parse(data)); grid.setProperties({ columnModel: gridStateData.columns, sortSettings: { columns: gridStateData.sortSettings.columns }, filterSettings: gridStateData.filterSettings, pageSettings: { pageSize: gridStateData.pageSettings.pageSize, currentPage: gridStateData.pageSettings.currentPage, pageCount: gridStateData.pageSettings.pageCount }, searchSettings: { fields: gridStateData.searchSettings.fields, key: gridStateData.searchSettings.key } }, true) grid.setProperties({ groupSettings: { columns: gridStateData.groupSettings.columns } }) grid.refreshHeader(); } }, }); } |
|
...
<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 retrieve 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 retrieved 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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
