I setup a data grid and can sort, paged, and edit the data by allowing edits, dates, updates, etc. However, I am not sure how to save the modifications. I used the Update button from the Grid taskbar but that step only removed the frame around the cell; while it appeared to be saved, at first, but after paging away, and returning to the page, the old value is still in the cell.
Please let me know how to save the update (edited cells) from a GRID.
Hi Johnny,
Thanks for contacting Syncfusion support.
By analyzing your query, we suspect that there is no primaryKey column defined in your Grid. This may cause the reported problem.
In EJ2 Grid, the Editing feature requires a primary key column for CRUD operations. All the CRUD actions are performed based on the primary key only. Refer to the below documentation for more information.
Grid-Edit:
https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit
https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/in-line-editing
isPrimaryKey:
https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#isprimarykey
Demo: https://ej2.syncfusion.com/aspnetcore/Grid/InlineEditing#/fluent
So, we suggest you to set isPrimaryKey as true in any one of the unique columns. To define the primary key, set isPrimaryKey property of e-grid-column tag helper as true in particular column.
[index.cshtml]
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> <e-grid-columns> <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> ---- </e-grid-columns> </ejs-grid>
|
Please find the attached sample for your reference.
Regards,
Rajapandiyan S
Thank you for sending this over to me. I tested it locally.
When I update a value, it reflects properly within the session of that event; However, it does not save the change to the dataset. If I refresh the page, the old value is unchanged.
I tried to debug; the Update button does not trigger the debug Update model in the controller.
How do I get the Update button to go to the Update model to update the data in the database?
Johnny,
Before proceeding to the solution, please share the below details so that we will be able to validate further.
Hi,
Syncfusion.EJ2.AspNet.Core Version 21.1.35
I can Edit on the page and it keeps when I navigate to the next page of the data set from the paging function; however, if I leave or refresh the page, the update did not save to the database.
Here is my View Index and Update Model (just in case it needed it):
```
using Croctails.Areas.Identity.Data;
using Croctails.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Syncfusion.EJ2.Base;
namespace Croctails.Controllers.SalesForm
{
public class SalesReportsController : Controller
{
private readonly ApplicationDbContext _context;
public SalesReportsController(ApplicationDbContext context)
{
_context = context;
}
// GET: SalesReports
public async Task<IActionResult> Index()
{
ViewBag.SalesReport = await _context.SalesReportFinal.ToListAsync();
//return _context.SalesReport != null ? View(await _context.SalesReport.ToListAsync()) : Problem("Entity set 'ApplicationDbContext.SalesReport' is null.");
return View();
}
}
public IActionResult Update([FromBody] CRUDModel<SalesReportFinal> value)
{
//var Order = OrdersDetails.GetAllRecords();
var data = _context.SalesReportFinal.Where(or => or.Id == value.Value.Id).FirstOrDefault();
if (data != null)
{
data.Id = value.Value.Id;
data.CROCNumber = value.Value.CROCNumber;
data.StoreNumber = value.Value.StoreNumber;
data.MargaritaOnShelf = value.Value.MargaritaOnShelf;
data.MargaritaOnStart = value.Value.MargaritaOnShelf;
data.MargaritaOnSold = value.Value.MargaritaOnSold;
data.StrawberryOnShelf = value.Value.StrawberryOnShelf;
data.StrawberryOnStart = value.Value.StrawberryOnStart;
data.StrawberryOnSold = value.Value.StrawberryOnSold;
data.MojitoOnShelf = value.Value.MojitoOnShelf;
data.MojitoOnStart = value.Value.MojitoOnStart;
data.MojitoOnSold = value.Value.MojitoOnSold;
data.MoscowOnShelf = value.Value.MoscowOnShelf;
data.MoscowOnStart = value.Value.MoscowOnStart;
data.MoscowOnSold = value.Value.MoscowOnSold;
data.SweetTeaOnShelf = value.Value.SweetTeaOnShelf;
data.SweetTeaOnStart = value.Value.SweetTeaOnStart;
data.SweetTeaOnSold = value.Value.SweetTeaOnSold;
data.JPunchOnShelf = value.Value.JPunchOnShelf;
data.JPunchOnStart = value.Value.JPunchOnStart;
data.JPunchOnSold = value.Value.JPunchOnSold;
data.InventoryDate = value.Value.InventoryDate;
}
_context.SaveChanges();
return Json(new { value.Value });
}
}
```
Here is the View file:
```
@model IEnumerable<Croctails.Models.SalesReportFinal>
@{
ViewData["Title"] = "Sales Report";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel='nofollow' href="~/css/site.css" rel="stylesheet" />
<div id="wrap" class="page newsletter-page container">
<div class="page-title">
<h1>@ViewData["Title"]</h1>
</div>
@if (ViewBag.Success != null)
{
<div class="text-danger">@ViewBag.Success</div>
}
else
{
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
}
<style>
.e-pager {
text-align: left !important;
}
</style>
<div class="row">
<div class="col-md-4 col-sm-14">
<hr />
<a class="btn btn-sm btn-info" asp-action="Index" asp-controller="CroctailsProductsLine">Products</a>
<hr />
</div>
<div class="col-md-4 col-sm-14">
<hr />
<a class="btn btn-sm btn-info" asp-action="Create" asp-controller="StoreLocations">Add Customer</a>
<hr />
</div>
<div class="col-md-4 col-sm-14">
<hr />
<a class="btn btn-sm btn-info" asp-action="Index" asp-controller="SalesForm">Daily Reports</a>
<hr />
</div>
</div>
<div class="twrap">
<ejs-grid id="Grid" dataSource="@ViewBag.SalesReport" allowPaging="true" allowSorting="true" allowGrouping="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
<e-grid-pagesettings pageSize="5"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="Id" validationRules="@(new { required=true})" isPrimaryKey="true" headerText="CID" textAlign="Center"></e-grid-column>
<e-grid-column field="StoreNumber" headerText="SID" textAlign="Center" ></e-grid-column>
<e-grid-column field="MargaritaOnStart" headerText="MA" textAlign="Center" ></e-grid-column>
<e-grid-column field="MargaritaOnShelf" headerText="MA" textAlign="Center" ></e-grid-column>
<e-grid-column field="MargaritaOnSold" headerText="MA" textAlign="Center" ></e-grid-column>
<e-grid-column field="StrawberryOnStart" headerText="ST" textAlign="Center" ></e-grid-column>
<e-grid-column field="StrawberryOnShelf" headerText="ST" textAlign="Center" ></e-grid-column>
<e-grid-column field="StrawberryOnSold" headerText="ST" textAlign="Center" ></e-grid-column>
<e-grid-column field="MojitoOnStart" headerText="MO" textAlign="Center" ></e-grid-column>
<e-grid-column field="MojitoOnShelf" headerText="MO" textAlign="Center" ></e-grid-column>
<e-grid-column field="MojitoOnSold" headerText="MO" textAlign="Center" ></e-grid-column>
<e-grid-column field="MoscowOnStart" headerText="MS" textAlign="Center" ></e-grid-column>
<e-grid-column field="MoscowOnShelf" headerText="MS" textAlign="Center" ></e-grid-column>
<e-grid-column field="MoscowOnSold" headerText="MS" textAlign="Center" ></e-grid-column>
<e-grid-column field="SweetTeaOnStart" headerText="SW" textAlign="Center" ></e-grid-column>
<e-grid-column field="SweetTeaOnShelf" headerText="SW" textAlign="Center" ></e-grid-column>
<e-grid-column field="SweetTeaOnSold" headerText="SW" textAlign="Center" ></e-grid-column>
<e-grid-column field="JPunchOnStart" headerText="JM" textAlign="Center" ></e-grid-column>
<e-grid-column field="JPunchOnShelf" headerText="JM" textAlign="Center" ></e-grid-column>
<e-grid-column field="JPunchOnSold" headerText="JM" textAlign="Center" ></e-grid-column>
<e-grid-column field="InventoryDate" headerText="Date" textAlign="Center" format="yMd"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
```
Hi Johnny Sandaire,
From your shared information identified that you are using the grid with a local data source (@ViewBag). In the local data source grid the edited values are temporarily stored in the grid instance if we refresh the page the grid will render with the default data source values, not with the edited values. Based on your update we recommend using a Remote data service that helps to store the edited data in the database and retrieve them even though refreshes the page. We have already discussed the same in the below documentation which contains the procedure and sample. Please refer to the below documentation for more details.
Documentation: https://www.syncfusion.com/kb/13423/how-to-bind-sql-server-data-in-asp-net-core-datagrid-using-sqlclient-data-provider
If you require further assistance, please do not hesitate to contact us. We are always here to help you.
Regards,
Hemanth Kumar S