JQuery Kendo grid CRUD operation on ASP.NET Core project

Question

I have a problem with the CRUD operation with the jQuery kendo grid.

This is my kendo grid:

$(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Application/GetList",
                dataType: "json"
            },
            update: {
                url: "/Application/Update",
                dataType: "json"
            },
            destroy: {
                url: "/Application/Delete",
                dataType: "json"
            },
            create: {
                url: "/Application/Create",
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                complete: function (e) {
                    if (e.responseJSON.success) {
                        // Refrescar el grid
                        $("#grid").data("kendoGrid").dataSource.read();
                    } else {
                        alert("Error: " + e.responseJSON.message);
                    }
                }
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    console.log(JSON.stringify(options.models))
                    return JSON.stringify(options.models);
                }
            }
        },
        batch: true,
        pageSize: 10,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number", editable: false, nullable: true },
                    name: { type: "string", validation: { required: true } },
                    url: { type: "string" },
                    description: { type: "string" },
                    imgPath: { type: "string" }
                }
            }
        }
    });

    function getFormattedDateTime() {
        var now = new Date();
        var year = now.getFullYear();
        var month = (now.getMonth() + 1).toString().padStart(2, '0');
        var day = now.getDate().toString().padStart(2, '0');
        var hours = now.getHours().toString().padStart(2, '0');
        var minutes = now.getMinutes().toString().padStart(2, '0');
        var seconds = now.getSeconds().toString().padStart(2, '0');
        return 'roles_' + year + month + day + hours + minutes + seconds;
    }

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: {
            alwaysVisible: true,
            pageSizes: [10, 20, 50],
            refresh: true,
            position: "bottom",
            responsive: true
        },
        height: 500,
        sortable: true,
        filterable: true,
        scrollable: true,
        navigatable: true,
        allowCopy: true,
        selectable: {
            mode: "single",
            type: "row"
        },
        persistSelection: false,
        resizable: {
            columns: true
        },
        reorderable: {
            columns: true
        },
        toolbar: ["create", "excel"],
        excel: {
            fileName: getFormattedDateTime() + ".xlsx",
            filterable: true,
            allPages: true
        },
        columns: [
            { field: "id", title: "Id" },
            { field: "name", title: "Nombre" },
            { field: "url", title: "URL" },
            { field: "description", title: "Descripción" },
            { field: "imgPath", title: "Image Path",
              editor: function (container, options) {
                  var input = $('<input name="' + options.field + '" type="file" />')
                      .appendTo(container);
                  input.on('change', async function () {
                      var file = this.files[0];
                      if (file) {
                          try {
                              var fileName = await customUpload(file);
                              options.model.imgPath = fileName;
                          } catch (error) {
                              alert("Error uploading file: " + error);
                          }
                      }
                  });
              },
              template: function (dataItem) {
                  return dataItem.imgPath ? "<img src='" + dataItem.imgPath + "' alt='Image' width='50' />" : "";
              }
            },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
        ],
        editable: "inline"
    });
});

When I run the delete function only the grid element is deleted but the datasource is not updated. The controller is not called.

   public IActionResult Delete([FromQuery] string data)
   {
       try
       {

           return Json(new { success = true, data = "applications" });
       }
       catch (Exception ex)
       {
           return Json(new { success = false, message = ex.Message });
       }
   }

I tried multiple controllers, but the problem is still the same. Either it is not called or the parameter is pasted as null.

this is a screenshot about the Create in controller.

controller mvc

I expect to be able to call the controller methods.

Answer 1

Since you are using batch flag and set it to ture, it means the datasource will make a call only after calling the sync method. Refer to the batch (default: false) reference.

So, try to add a change event handler to the datasource of the grid. Like this:

Besides, you can also try to use F12 developer Network tool to check the request:

and in the controller, you can also set break point to check the data:

In my above sample the parameter name is models.