Kendo UI 网格未触发创建、更新和销毁事件

Question

我尝试在 Kendo Datagrid 的传输部分触发 Create 事件。我试图阅读 Kendo Datagrid 的整个文档，但我无法触发创建、更新和销毁事件。

有人可以告诉我我的代码有什么问题吗？

感谢您的任何建议。

这里是方法的来源：

/**
     * Fill data grid by users 
     * @param {Number} a 
     * @param {Number} b
     * @return {Number} sum
     */
    $scope.initTable = function() {
        // get access token from localstorage
        var token = localStorage.getItem($rootScope.lsTokenNameSpace);
        // set pagination data
        var paginationData = {
            "token" : token,
            "data" : {
                "page" : 1,
                "items_per_page" : 20
            }
        };

        $("#grid").kendoGrid({
            dataSource : {
                transport : {
                    // read list 
                    read :  function(options) {
                        $.ajax({
                            url: $rootScope.apiBaseUrl + "user/list",
                            dataType: "json",
                            type : "POST",
                            data: JSON.stringify(paginationData),
                            success: function(response) {
                                console.log("List of users succesfully obtained");
                                console.log(response.result); 
                                // pass response to model
                                options.success(response);
                               // $notification.enableHtml5Mode();
                            },
                            error: function(error) {
                              console.log("user list request error");
                              console.log(error);
                              $notification.error( "User list cannot be loaded", "Please try again in a minute.");
                            }
                          });
                    },
                    // create list item
                    create :  function(options) {
                        console.log("Create function");
                    },
                    // update list item
                    update :  function(options) {
                        console.log("Update function");
                    },
                    // destroy list item
                    destroy:  function(options) {
                        console.log("Destroy function");
                    },
                    // important for request
                    parameterMap: function(options, operation) {
                        console.log(options);
                        console.log(operation);
                    if (operation === "read") {
                        // send parameter "access_token" with value "my_token" with the `read` request
                        return {
                            data: paginationData,
                            token: token
                        };
                    } else
                        return {
                            data: kendo.stringify(options.models),
                            access_token: "my_token"
                        };
                    }
                },
                // data model
                schema : {
                    // JSON data parrent name
                    data : "result",
                    model : {
                        fields : {
                            id : {
                                type : "integer",
                                editable: false, 
                                nullable: true 
                            },
                            username : {
                                editable: "inline",
                                type : "string",
                                validation: {
                                    required: {
                                        message: "Please enter a Username"
                                    }
                                }
                            },
                            name : {
                                type : "string"
                            },
                            surname : {
                                type : "string"
                            },
                            email : {
                                type : "string"
                            },
                            created : {
                                type : "string"
                            },
                            role : {
                                type : "string"
                            }
                        }
                    }
                },
                // data source settings
                pageSize : 10,
                editable: true,
                serverPaging : false,
                serverFiltering : false,
                serverSorting : false,
                batch : true
            },
            // data grid settings and customization
            toolbar : ["create"],
            editable: true,
            height : 350,
            filterable : true,
            sortable : true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            selectable: "multiple, row",
            // columns
            columns : [ {
                field : "id",
                title : "ID"
            }, {
                field : "username",
                title : "Username"
            },{
                field : "name",
                title : "Name"
            },{
                field : "surname",
                title : "Email"
            },{
                field : "email",
                title : "Email"
            },{
                field : "created",
                title : "created at"
            },{
                field : "role",
                title : "Role"
            },
            {   // table action buttons
                command: [
                          {name: "edit"},
                          {name: "destroy", text: "Remove"},
                          {name: "detail", click:redirectToUserDetal},

                ] ,
                // Action column customization
                title: "Action", 
                width: "300px"
            }
            ]
        });
    };


});

Answer 1

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

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

架构：{ 模型：{ id: "StudentID" } }

代码：

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"
        }
    }

Answer 2

您将数据源配置为批处理模式batch: true，但您没有提供保存更改的方法。请记住，批处理模式队列包含您的所有创建、更新和销毁操作。当数据源同步时，它们都会立即触发（即dataSource.sync()）。

根据您的配置，启用此功能的最简单方法是将'save' 添加到您的工具栏。您可能还想包含'cancel'。

toolbar : ["create", "save", "cancel"],

Answer 3

确保您的 id 设置在您的读取操作返回的对象上。

我的更新操作没有被击中，我也遇到了同样的问题。我检查了 Fiddler 并且正在制作 POST，但我的 id 字段没有设置。我追溯了这一点，发现当我的读取操作返回对象时，我的 id 没有设置在对象上。

如果没有在 POST 中发送 id 字段，我的控制器无法识别参数，因此不会触发我的操作。