Update grid using InCell Batch not working

[Lester]

I've created a ViewComponent which shows details of a budget.  I pass the budget details model into to the ViewComponent, which works displaying the info, but once I make a change to the cost column (only column you can change). and Click the Save toolbar button... nothing happens.. except the grid is now empty and I see a busy indicator which never stops.  I based my code on the batch example found here: https://docs.telerik.com/aspnet-mvc/helpers/grid/editing/batch-editing   Any help would be appreciated.

 

bud_detailsController:

public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
       {
           IQueryable<bud_details> budgets = _context.Bud_Details;
           DataSourceResult result = budgets.ToDataSourceResult(request);
           return Json(result);
       }

       //[AcceptVerbs("Post")]
       public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<bud_details> budget)
       {
           var entities = new List<bud_details>();


           if (budget != null && ModelState.IsValid)
           {
               foreach (var bud in budget)
               {
                   // _context.Update(budget);
                   var entity = new bud_details
                   {
                       budget_no = bud.budget_no,
                       code = bud.code,
                       cost = bud.cost,
                       description = bud.description,
                       u_key = bud.u_key,
                       project_no = bud.project_no,
                       id = bud.id,
                       section = bud.section
                   };
                   entities.Add(entity);
                   _context.Bud_Details.Attach(entity);
                   _context.Entry(entity).State = EntityState.Modified;
               }
               _context.SaveChanges();
           }

           return Json(entities.ToDataSourceResult(request, ModelState, p => new bud_details
           {
               budget_no = p.budget_no,
               code = p.code,
               cost = p.cost,
               description = p.description,
               u_key = p.u_key,
               project_no = p.project_no,
               id = p.id,
               section = p.section
           }));
       }

 

 

The ViewComponent:

@(Html.Kendo().Grid(@Model.BudgetDetails)
            .Name("BudgetGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.u_key).Visible(false);
                columns.Bound(p => p.budget_no).Visible(false);
                columns.Bound(p => p.code).Width(100);
                columns.Bound(p => p.description);
                columns.Bound(p => p.cost).Width(200)
                .ClientFooterTemplate("Grand Tot: #= kendo.toString(sum, 'C') #")
                .ClientGroupFooterTemplate("Tot: #= kendo.toString(sum, 'C') #");
            })
            .ToolBar(toolbar =>
            {
                toolbar.Save();
                //toolbar.Pdf();
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            // .Pageable(p => p.Numeric(false).PreviousNext(false))
            //.HtmlAttributes(new { style = "height:550px;" })
            //.Navigatable()
            .Sortable()
            .Scrollable(sc => sc.Endless(true))
            .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                .Aggregates(aggregates =>
                {
                    aggregates.Add(p => p.cost).Sum();
                })
                .Group(groups => groups.Add(p => p.Category))
                .Events(events => events.Error("error_handler"))
                .Model(model => {
                    model.Id(p => p.u_key);
                    model.Field(p => p.code).Editable(false);
                    model.Field(p => p.description).Editable(false);
                })
                .Read(read => read.Action("Editing_Read", "bud_details"))
                .Update(update => update.Action("Editing_Update","bud_details"))
                )
)

 

P.S.  I put breakpoints in "Editing_Read" and "Editing_Update" and they never get hit.  I don't know why they are not being called.

 

Lester

[Attila Antal]

Hi Lester,

Could you please try to inspect the Network -> XHR in the Developer Tools window of the browser while clicking on Save Changes button to see if there are any errors while sending the request, or whether the request is being sent at all? You could check out the following Video to get a better understanding on debugging network requests.  HTTP Request and Response - Chrome Developer tools

Once you have collected the information, you could share it with us so that we can understand more about the issue.

Kind regards,
Attila Antal
Progress Telerik

[Attila Antal]

Hi Lester,

One more thing that I have noticed and I believe that would be the issue here. Since the data binding used is through Ajax, the model should be passed as a type instead an argument. 

See marked with yellow:

@(Html.Kendo().Grid(@Model.BudgetDetails)
    .DataSource(dataSource => dataSource
        .Ajax()
    )
)

Pass the model as a type instead:

@(Html.Kendo().Grid<@Model.BudgetDetails>()
    .DataSource(dataSource => dataSource
        .Ajax()
    )
)

You can take a look at how the Ajax Binding and Server Binding are done.

I hope this will prove helpful.

Kind regards,
Attila Antal
Progress Telerik