This is a migrated thread and some comments may be shown as answers.

Telev

3 Answers 63 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bruce
Top achievements
Rank 1
Bruce asked on 21 Mar 2019, 06:59 AM

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

Sort by
0
Bruce
Top achievements
Rank 1
answered on 21 Mar 2019, 07:00 AM

Typo on the Subject, Sorry.

Was supposed to say Telerik MVC Grid Inline refresh after save

0
Bruce
Top achievements
Rank 1
answered on 22 Mar 2019, 09:49 AM

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));

0
Alex Hajigeorgieva
Telerik team
answered on 22 Mar 2019, 01:34 PM
Hi, Bruce,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Bruce
Top achievements
Rank 1
Answers by
Bruce
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or