UI for ASP.NET Core: How to call code from "Save" toolbar button?

[Brian]

I added a toolbar to my grid, with new, save and cancel buttons. On my page, I configure the datasource to use the save routine in my controller. However, any breakpoints set in my Save (update) routine are never hit, even after editing and saving the grid. Is there an event I should be capturing? Like all of my issues, this is after following an example on the Telerik site. My read method is working perfectly. 

Index.cshtml

    <form class="form-inline">
        <div class="form-group mb-2">
            <label for="SievePack" class="sr-only">Choose a Sieve Set</label>

            <kendo-grid name="SievePack"
                        detail-template-id="template"
                        navigatable="true">
                <columns>
                    <column field="SieveSetId" title="Set ID" />
                    <column field="SieveSetName" title="Name" />
                </columns>
                <toolbar>
                    <toolbar-button name="create" ></toolbar-button>
                    <toolbar-button name="save"></toolbar-button>
                    <toolbar-button name="cancel"></toolbar-button>
                </toolbar>
                <datasource page="0" type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="6" batch="true" >
                    <schema data="Data" total="Total" errors="Errors">
                    </schema>
                    <transport>
                        <read url="@Url.Action("ReadSieveSets", "SievePack")" datatype="json" />
                        <update url="@Url.Action("Sievesets_Update", "SievePack")" />
                        <create url="@Url.Action("Sievesets_Create", "SievePack")" />
                    </transport>
                </datasource>

                <editable mode="incell" />
            </kendo-grid>
        </div>

    </form>

and the controller:

        [HttpPost]
        public ActionResult Sievesets_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<SieveSet> sets)
        {
            // Will keep the updated entities here. Used to return the result later.
            var entities = new List<SieveSet>();
            if (ModelState.IsValid)
            {
                using (_context)
                {
                    foreach (var set in sets)
                    {
                        // Create a new Product entity and set its properties from the posted ProductViewModel.
                        var entity = new SieveSet
                        {
                            SieveSetName = set.SieveSetName,
                            SieveSetId = set.SieveSetId
                        };
                        // Store the entity for later use.
                        entities.Add(entity);
                        // Attach the entity.
                        _context.Attach(entity);
                        // Change its state to Modified so Entity Framework can update the existing product instead of creating a new one.
                        _context.Entry(entity).State = EntityState.Modified;
                    }
                    // Update the entities in the database.
                    _context.SaveChanges();
                }
            }
            // Return the updated entities. Also return any validation errors.
            return Json(entities.ToDataSourceResult(request, ModelState, set => new SieveSet
            {
                SieveSetName = set.SieveSetName,
                SieveSetId = set.SieveSetId
            }));
        }

[Brian]

(note - I had been using type = Ajax. This is pasted from my current attempt using custom data, based off an article I read here)

[Aleksandar]

Hello Brian,

When editing is enabled the Model Id should be provided via the DataSource schema configuration. The DataSource tracks changes in items using the model field provided as id. Refer to the Batch Editing documentation for detailed explanation of the Batch Editing Demo. You can click on the View Source tab and select TagHelper tab to view the TagHelper implementation of the example:

The example uses Ajax binding and you can also navigate to the rest of the tabs to review the Controller, Model, and sample service used. 

I am also attaching a sample application, where the Grid is defined using TagHelpers, batch editing is enabled and CRUD endpoints configured. The sample service is missing from the attached example, but this is normally implemented per the developer's requirement and the example demonstrates the configuration required to submit data to the CRUD endpoints.

View

<kendo-grid name="grid" height="550">
            <columns>
                <column field="OrderID" title="Order ID">
                    <filterable enabled="false"></filterable>
                </column>
                <column field="Freight" title="Freight" />
                <column field="OrderDate" title="Order Date" format="{0:MM/dd/yyyy}" />
                <column field="ShipName" title="Ship Name" />
                <column field="ShipCity" title="Ship City" />
                <column>
                    <commands>
                        <column-command text="Delete" name="destroy"></column-command>
                    </commands>
                </column>
            </columns>
            <toolbar>
                <toolbar-button name="create" ></toolbar-button>
                <toolbar-button name="save"></toolbar-button>
                <toolbar-button name="cancel"></toolbar-button>
            </toolbar>
            <editable mode="incell" />
            <scrollable enabled="true" />
            <sortable enabled="true" />
            <pageable enabled="true" />
            <filterable enabled="true" />
            <datasource type="DataSourceTagHelperType.Ajax" page-size="20" batch="true">
                <transport>
                    <create url="@Url.Action("Orders_Create", "Grid")" />
                    <read url="@Url.Action("Orders_Read", "Grid")" />
                    <update url="@Url.Action("Orders_Update", "Grid")" />
                    <destroy url="@Url.Action("Orders_Destroy", "Grid")" />
                </transport>
                <schema>
                    <model id="OrderID">
                    <fields>
                        <field name="ProductName"></field>
                        <field name="Freight" type="number"></field>
                        <field name="OrderDate" type="date"></field>
                    </fields>
                </model>
                </schema>
            </datasource>
        </kendo-grid>

Controller

    public class GridController : Controller
    {
        public ActionResult Orders_Read([DataSourceRequest] DataSourceRequest request)
        {
            var result = Enumerable.Range(1, 50).Select(i => new OrderViewModel
            {
                OrderID = i,
                Freight = i * 10,
                OrderDate = new DateTime(2016, 9, 15).AddDays(i % 7),
                ShipName = "ShipName " + i,
                ShipCity = "ShipCity " + i
            });

            var dsResult = result.ToDataSourceResult(request);
            return Json(dsResult);
        }

        [AcceptVerbs("Post")]
        public ActionResult Orders_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<OrderViewModel> orders)
        {
            var results = new List<OrderViewModel>();

            if (orders != null && ModelState.IsValid)
            {
                foreach (var order in orders)
                {
                    //orderService.Create(order); 
                    results.Add(order);
                }
            }

            return Json(results.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs("Post")]
        public ActionResult Orders_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<OrderViewModel> orders)
        {
            if (orders != null && ModelState.IsValid)
            {
                foreach (var order in orders)
                {
                    //orderService.Update(order);
                }
            }

            return Json(orders.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs("Post")]
        public ActionResult Orders_Destroy([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<OrderViewModel> orders)
        {
            if (orders.Any())
            {
                foreach (var order in orders)
                {
                    //orderService.Destroy(order);
                }
            }

            return Json(orders.ToDataSourceResult(request, ModelState));
        }
    }

Regards,
Aleksandar
Progress Telerik