Kendo UI网格不会触发创建,更新和销毁事件

时间:2014-06-16 13:48:33

标签: javascript jquery datagrid kendo-ui kendo-grid

我试图在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"
            }
            ]
        });
    };


});

3 个答案:

答案 0 :(得分:2)

面临同样的问题。但我已经解决了这个问题。

要触发创建/删除/更新,我们需要在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"
        }
    }

答案 1 :(得分:1)

您已将数据源配置为批处理模式batch: true,但您无法保存更改。请记住,批处理模式会排除所有创建,更新和销毁操作。当dataSource同步时,它们都被立即触发(即dataSource.sync())。

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

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

答案 2 :(得分:0)

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

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

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