1. Bruce
    Bruce avatar
    14 posts
    Member since:
    Mar 2019

    Posted 21 Mar 2019 Link to this post

    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

  2. Bruce
    Bruce avatar
    14 posts
    Member since:
    Mar 2019

    Posted 21 Mar 2019 in reply to Bruce Link to this post

    Typo on the Subject, Sorry.

    Was supposed to say Telerik MVC Grid Inline refresh after save

  3. Bruce
    Bruce avatar
    14 posts
    Member since:
    Mar 2019

    Posted 22 Mar 2019 Link to this post

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

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1037 posts

    Posted 22 Mar 2019 Link to this post

    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.
Back to Top