Kendo UI DataSource 未触发 transport.destroy

Question

我正在使用带有 ASP.NET Web API 的 Kendo UI。有一个拥有所有必要方法的 ProjectsController。

我的问题是，当我点击 Delete 按钮时，Kendo UI 网格会引发 remove() 事件，但 DataSource 永远不会调用 transport.destroy。相反，似乎正在调用tansport.create。在transport.parameterMap 我可以看到操作是create 而不是destroy。

这是一个示例 JavaScript 代码：

$(document).ready(function () {
    var apiUrl = '/api/projects/';
    var dataType = 'json';

    var dataSource = new kendo.data.DataSource({
        batch: true,
        autoSync: false,
        transport: {
            read: {
                url: apiUrl,
                dataType: dataType,
                type: "GET"
            },
            update: {
                url: apiUrl,
                dataType: dataType,
                type: "PUT"
            },
            destroy: {
                url: apiUrl,
                type: "DELETE"
            },
            create: {
                url: apiUrl,
                contentType: "application/json;charset=utf-8",
                dataType: dataType,
                type: "POST"
            },
            parameterMap: function (data, operation) {
                console.log("Operation: " + operation);
                if (operation === "create" && data.models) {
                    for (var i in data.models) {
                        var model = data.models[i];

                        if (model.ProjectId === 0) {
                            return kendo.stringify(model);
                        }
                    }
                } else if (operation === "destroy") {
                    console.log("Data.Models: " + data.models);
                    console.log("Data.id: " + data.ProjectId);
                    return { id: data.ProjectId };
                }

                return data;
            }
        },
        schema: {
            id: "ProjectId",
            model: {
                fields: {
                    ProjectId: { type: "number", editable: false, nullable: false, defaultValue: 0 },
                    ProjectName: { type: "string", validation: { required: true } },
                    Status: { type: "string", validation: { required: true } },
                    IsActive: { type: "boolean" }
                }
            }
        },
        pageSize: 10,
        serverPaging: false,
        serverFiltering: false,
        serverSorting: false
    });

    $("#projectsGrid").kendoGrid({
        dataSource: dataSource,
        groupable: false,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        pageSize: 10,
        toolbar: ["create"],
        editable: "popup",
        columns: [
            { field: "ProjectId", width: 30, title: "ID" },
            { field: "ProjectName", width: 180, title: "Project" },
            { field: "Status", width: 90, title: "Status" },
            { field: "IsActive", width: 40, title: "Is Active", type: "boolean", template: '<input type="checkbox" #if (IsActive) {# checked="checked" #}# disabled="disabled" />' },
            { command: ["edit", "destroy"], title: "&nbsp", width: "80px" }
        ],

        remove: function (e) {
            console.log("Delete button clicked.");
            console.log("Project ID: " + e.model.ProjectId);
            //dataSource.remove(e.model);
            //dataSource.sync();
        }
    });
});

通过 Fiddler 发出请求时，Web API 工作正常，但 Kendo UI Grid 显示：

POST http://localhost:port/api/Projects

什么时候应该是DELETE。

提前谢谢大家！

Answer 1

在您的数据源上，您将 batch 标志设置为 true，这意味着数据源只有在您告诉它之后才会进行调用，例如调用 sync()。 http://docs.kendoui.com/api/framework/datasource#configuration-batch

还有

确保你已经在模型中定义了 ID，正如 OnaBai 在这里解释的 Why does the KendoUI Grid Transport Create event gets raised multiple times, and even when the action is Update? ，你的 id 在模型之外，应该在：

   model: {
        id: "ProductID",
        fields: {
            ProductID: { editable: false, nullable: true },
        }
    }

Answer 2

如果有人按照上面的回答在model 中定义了id，但是dataSource 还没有触发transport.destroy，下面的配置可能会有所帮助：

editable: {
..
mode: "inline", //or "popup
...
}
//or
editable: "inline" //or "popup"

http://www.telerik.com/forums/transport-destroy-of-grid-editor-is-not-working