Kendo UI DataSource不会触发transport.destroy

Question

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

我的问题是,当我点击Delete按钮时,Kendo UI网格将引发remove()事件,但从DataSource不调用transport.destroy.相反,它似乎tansport.create正在被调用.在transport.parameterMap我可以看到操作是创建而不是销毁.

以下是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

在您的数据源上,您将批处理标志设置为true,这意味着数据源将在您告知之后才进行调用,例如调用sync(). http://docs.kendoui.c​​om/api/framework/datasource#configuration-batch

以及

确保你已经在模型中定义了Id,正如OnaBai在这里解释的那样为什么KendoUI Grid Transport Create事件会多次被提升,甚至当动作是Update时？,你的id在模型之外,应该在:

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