Edit and delete rows in Kendo Grid

Question

In my .net core app, I have a kendo grid in which I am trying to add buttons to edit /update& delete the rows. Basically what I am trying to do is get the objectid from the parameter in the row and redirect to an update or delete view.

<div class="clearfix">
        @(Html.Kendo().Grid<M20_AEK.Models.ContractSettlement>()
                    .Name("ContractSettlementGrid")
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .Scrollable()
                    .Sortable()
                    .Filterable()
                    .ColumnMenu()
                    .Groupable()
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.OBJECTID).Title("ID").Hidden();
                        columns.Bound(c => c.OPERATOR_OBJECTID).Title("Operator").Width("100px");
                        columns.Bound(c => c.Year).Title("Year").Width("100px");
                        columns.Bound(c => c.Month).Title("Month").Width("100px");
                        columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("Settlement").Width("100px");
                        columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("Technology").Width("100px");
                        columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("Upload").Width("100px");
                        columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("Download").Width("100px");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.OBJECTID))
                    .Update(update => update.Action("Save", "SettlementContract"))
                    .Destroy(update => update.Action("Delete", "SettlementContract"))
                    .Read(read => read.Action("LoadSettlementContracts_Read", "SettlementContract"))
                    )
           )
    </div>

I tried to map the command.Edit() & the command.Destroy() commands to use my corresponding methods my controller. When I click the Update button , I get an error in console:

Failed to load resource:44326/SettlementContract/Save:1 the server responded with a status of 400 ()

Can I map the buttons the way I am trying to? It's not even calling the corresponding methods, it's not hitting my breakpoints. Maybe it can't be done like this?

Here's the controller

        [HttpPost]
        public IActionResult Save(Model model)
        {
          // code shortened for brevity
         return RedirectToAction("Index", "SettlementContract");
        }

Answer 1

Having your controller Save method set up like that won't work. You'll want to follow the Kendo example referenced at the bottom of my example closely.

Your grid config setup looks ok I believe. Your controller methods will need to be updated to look similar to this:

        [AcceptVerbs("Post")]
        public ActionResult Save([DataSourceRequest] DataSourceRequest request, M20_AEK.Models.ContractSettlement model)
        {
            if (model != null && ModelState.IsValid)
            {
                //save logic here
            }            

            return Json(new[]{model}.ToDataSourceResult(request,ModelState));
        }

Now, from your comment and your controller logic, it appears that you want to redirect to an action after a successful save. It's not clear if that is the same view the grid is on or a different one. If it's the same view the grid is on, you shouldn't need to as the grid will be updated with the saved values. If you absolutely have to do that though, rather than redirecting to that action from the controller within the Save method, you could hook the Save event of the grid, and upon a successful save, you could set the window.location to the appropriate url.

Kendo example reference: https://demos.telerik.com/as.net-core/grid/editing-inline They recently updated their site, so once you go to this link, click the "View Source" button, and then you can choose various buttons to view the cshtml/controller/etc.