Kendo UI Grid 更新事件未触发

Question

我有 Kendo UI 内联网格。它正确读取并填充网格。但是当我在任何列中按编辑和更改并按更新时，更新事件不会触发。 而且它也没有调用控制器方法。

希望有人可以帮助我指出我在这里做错了什么。 以下是我的网格绑定。

    dataSource = new kendo.data.DataSource({
        transport: {

            read: function (options) {
                $.ajax({
                    type: 'POST',
                    url: "./GetIngredients",
                    dataType: "json",
                    success: function (result) {
                        options.success(result);
                    }
                });
            },

            update: function (options) {
                $.ajax({
                    type: 'POST',
                    url: "./UpdateData",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8"
                });
            },
            parameterMap: function (options, operation) {
                alert('1');
                if (operation !== "read" && options.models) {
                    alert('2');
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Division: { type: "string", editable: true, nullable: false },
                    GroupName: { type: "string", validation: { required: true } },
                    CategoryName: { type: "string" },
                    TypeName: { type: "string" },
                    ItemName: { type: "string" }
                }
            }
        }

    });

    var grid = $("#grid").kendoGrid(
   {
       dataSource: dataSource,
       height: 430,
       scrollable: true,
       pageable: true,
       navigatable: true,
       columns: [
       { field: "Division", title: "Division", width: "80px" },
       { field: "GroupName", title: "Group Name", width: "70px" },
       { field: "CategoryName", title: "Category Name", width: "110px" },
       { field: "TypeName", title: "Type Name", width: "100px" },
       { field: "ItemName", width: "140px" },
       { command: ["edit", "destroy"], title: " ", width: "170px" }],
       editable: "inline"
   }).data("kendoGrid");

以下是 Homecontroller 中的方法。

  [HttpPost]
    public JsonResult GetIngredients()
    {
        IngredientData ingredientData = new IngredientData();
        ingredientData.Id = 1;
        ingredientData.DivisionId = 1;
        ingredientData.Division = "Division Abc";
        ingredientData.GroupId = 2;
        ingredientData.GroupName = "Group -A";
        ingredientData.CategoryId = 3;
        ingredientData.CategoryName = "Category -D";
        ingredientData.FoodTypeId = 4;
        ingredientData.TypeName = "Type One";
        ingredientData.ItemId = 5;
        ingredientData.ItemName = "Item One";

        return Json( ingredientData , JsonRequestBehavior.AllowGet);
    }

 [HttpPost]
    public void UpdateData()
    {
        // logic for update data in database.
    }

Answer 1

您是否意识到您已将batch 设置为true？在batch 模式下，您必须在网格定义中对@9​​87654327@ 或saveChanges 调用sync。

尝试添加一个工具栏命令来调用saveChanges，如下所示：

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    height: 430,
    scrollable: true,
    pageable: true,
    navigatable: true,
    toolbar: [ "save" ],
    columns: [
        { field: "Division", title: "Division", width: "80px" },
        { field: "GroupName", title: "Group Name", width: "70px" },
        { field: "CategoryName", title: "Category Name", width: "110px" },
        { field: "TypeName", title: "Type Name", width: "100px" },
        { field: "ItemName", width: "140px" },
        { command: ["edit", "destroy"], title: " ", width: "170px" }],
    editable: "inline"
}).data("kendoGrid");

或者干脆移除batch模式。

Answer 2

我也遇到过同样的问题。但我已经用这个解决了。

要触发创建/删除/更新，我们需要在 dataSource 中指定模式（在模式中我们应该至少提到什么是 id 字段）。

架构：{ 模型： { id：“学生证” } }

代码：

var dataSource = new kendo.data.DataSource({
       transport: {
            read: function (options) {
                alert("read");              
            },
            create: function (options) {                    
                                   alert("create");             
            },
            update: function (options) {                    
                                   alert("update");                },
            destroy: function (options) {                    
                                   alert("destroy");                }
        },
                    schema: {
            model: {
                id: "StudentID"
            }
        }