I have a Telerik/Kendo MVC Grid and I have some fields which the users should fill in, and some which are calculated.
I calculate the values for the calculated columns Server Side and I don't feel like replicating complex financial calculations in Javascript as well. :)
So here's the simple requirement:
Grid has 3 columns, A, B & C.
User specifies A and B.
Controller gets the object populated with A and B (Maybe also an old value for C) and calculates C again.
The updated object with the new value for C is saved to the Database AND is passed in the JSon result BACK to the Client.
The Grid should now update and show the new calculated value for C.
Currently C is not updated but if i Refresh the grid manually then the new value for C is shown.
I've checked the Chrome deb
Here is some mockup of what I've got currently. I've tried many different things, but don't seem to be getting anywhere.
I've tried adding the event.RequestEnd from other samples I've found on your forums, but as soon as i add any events, then the inline editing breaks completely.
@(Html.Kendo().Grid((IEnumerable<emscredit.Models.Invoice>)Model.Invoices)
.Name("grid")
.Columns(columns =>
{
columns.Select().HeaderHtmlAttributes(new { style = "width:25px" }).HtmlAttributes(new { style = "width:25px" });
columns.Bound(p => p.A).Format("{0:R#,##0.00}");
columns.Bound(p => p.B).Format("{0:R#,##0.00}");
columns.Bound(p => p.C).Format("{0:R#,##0.00}");
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pageable => pageable.ButtonCount(5))
.Sortable(sortable => sortable.AllowUnsort(false))
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
//.Events(events =>
//{
// events.Error("error_handler");
// events.RequestEnd("request_end");
//})
.AutoSync(true)
.Model(model => model.Id(i => i.Id))
.Read(read => read.Action("Index", "InvoiceGrid"))
.Update(update => update.Action("UpdateGrid", "InvoiceGrid"))
.Create(create => create.Action("AddToGrid", "InvoiceGrid"))
)
)
Some example from the controller for clarity. Obviously calculation code removed etc.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateGrid([DataSourceRequest] DataSourceRequest request, emscredit.Models.Invoice invoice)
{
if (invoice != null && ModelState.IsValid)
{
var entity = db.InvoiceModels.FirstOrDefault(i => i.Id == invoice.Id);
entity.A = invoice.A;
entity.B = invoice.B;
invoice.C = entity.C = invoice.A * invoice.B; // For clarification purposes only
db.SaveChanges();
}
return Json(invoice);
//.ToDataSourceResult was removed as it only caters for a list, not a single object
}
Like I said, i checked the network tab in Chrome and it shows the updated value for C coming back. So Controller seems fine. Just need to configure the grid to update the new calculated value without having to refresh the entire page.
Thanks!
Bruce
3 Answers, 1 is accepted
Rank 1
Typo on the Subject, Sorry.
Was supposed to say Telerik MVC Grid Inline refresh after save
Rank 1
never mind.
instead of just returning the invoice from the controller, I just did this, and now it works :)
List<emscredit.Models.Invoice> invResult = new List<Invoice>() { invoice };
return Json(invResult.ToDataSourceResult(request, ModelState));
I am pleased to see that you found the solution.
The key when creating CRUD operations with the Ajax() data source is to always return the same response as the read request - an IEnumerable/IQuerieable (even if it contains only one item) and call the ToDataSourceResult() extension method over it. That way the data source is notified of the successful operation and updates the grid out of the box.
Here is the relevant documentation article:
https://docs.telerik.com/aspnet-mvc/helpers/grid/editing/ajax-editing
Let us know in case you need further information.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik