编辑或创建Kendo Grid条目时检测服务器端错误

Question

我有一个可编辑的Kendo Grid来管理(创建/修改)用户帐户.编辑是在弹出窗口中完成的(与内联或批处理相比).我有客户端验证以帮助确保向服务器提供有效数据,但是如果创建/更新在服务器端失败,我无法弄清楚如何处理来自服务器的响应.我不是说'失败',因为请求失败了,例如HTTP 404或500; 我正在谈论失败,因为在服务器上的脚本不喜欢有关数据的东西,并拒绝承担.

有人可以告诉我如何才能做到这一点？我希望能够做的是将更新发送到服务器后,等待响应.如果回复说一切都好,那就好了.如果响应说某些事情没有那么顺利,我希望能够(A)保持弹出编辑窗口打开和填充,以及(B)向用户提供关于拒绝原因的反馈.除非响应表明一切正常,否则不应将数据提交到网格.同样,编辑弹出窗口应保持打开状态,直到服务器显示OK.

我很灵活,应该如何格式化服务器的响应,只要我能完成我想要的.

在您引导我访问Kendo官方API文档之前,我已经很清楚它并且每天都会参考它.但是,至少可以说,它是不完整的,我找不到任何与此主题相关的内容.如果您在文档中发现了一些您认为可以帮助我的内容,那么请务必指向我的文档=)

根据要求,下面是我创建网格的代码.

$("#kendo_user_grid").kendoGrid({
    columns: [{
        title: "Last name",
        field: "lName"
    },{
        title: "First name",
        field: "fName"
    },{
        title: "Business unit",
        field: "businessUnit"
    },{
        title: "Username",
        field: "loginId"
    },{
        title: "Email address",
        field: "email"
    },{
        title: "Phone",
        field: "phone"
    },{
        title: "Address",
        field: "address"
    },{
        title: "City",
        field: "city"
    },{
        title: "State",
        field: "state"
    },{
        title: "Zip code",
        field: "zipcode"
    },{
        title: "Country",
        field: "country"
    },{
        title: "Time zone",
        field: "timezone"
    },{
        title: "Privileges",
        field: "privs"
    },{
        command: ["edit","destroy"],
        title: " "
    }],
    scrollable: false,
    dataSource: {
        transport: {
            read: {
                url: "manageUsers.phtml",
                data: { mode: "fetch" },
                dataType: "json",
                type: "POST"
            },
            update: {
                url: "manageUsers.phtml",
                data: { mode: "update" },
                type: "POST"
            },
            destroy: {
                url: "manageUsers.phtml",
                data: { mode: "destroy" },
                type: "POST"
            },
            create: {
                url: "manageUsers.phtml",
                data: { mode: "create" },
                type: "POST"
            },
            batch: false
        },
        schema: {
            data: "records",
            total: "total",
            model: {
                id: "userId",
                fields: {
                    userId: { editable: false, nullable: true },
                    lName: { type: "string", editable: true, validation: { required: true } },
                    fName: { type: "string", editable: true, validation: { required: true } },
                    businessUnit: { type: "string", editable: true, validation: { required: true } },
                    loginId: { type: "string", validation: { required: true } },
                    email: { type: "string", validation: { required: true } },
                    phone: { type: "string" },
                    address: { type: "string" },
                    city: { type: "string" },
                    state: { type: "string" },
                    zipcode: { type: "string" },
                    country: { type: "string" },
                    timezone: { type: "string" },
                    privs: { type: "string" }
                }
            }
        },
        pageSize: 20,
        serverPaging: false,
        serverFiltering: false,
        serverSorting: false
    },
    filterable: true,
    sortable: true,
    pageable: true,
    editable: {
        mode: "popup",
        template: kendo.template($("#kendo_edit_user_template").html())
    },
    toolbar: ["create","save","cancel"]
});

Answer 1

要记住两点:

1. Schema.errors 服务器响应中包含服务器端错误的字段.
2. error 是一个如果出现错误将被触发的事件.

基本上你需要:

1. 向您的架构添加一个errors定义,该定义提供对从服务器发回的状态的访问权限.
2. 实现error事件处理程序,例如,恢复以前的值.

如果您的服务器在调用的字段中返回错误消息,myError那么您将具有以下内容:

schema: {
    errors: "myError", 
    data: "records",
    total: "total",
    model: {
        id: "userId",
        fields: {
            userId: { editable: false, nullable: true },
            lName: { type: "string", editable: true, validation: { required: true } },
            fName: { type: "string", editable: true, validation: { required: true } },
    ...

要么:

schema: {
    errors: function(response) {
        if (response.myError && response.myError !== "OK") {
            return response.myError;
        }
        return false;
    }, 
    data: "records",
    total: "total",
    model: {
        id: "userId",
        fields: {
            userId: { editable: false, nullable: true },
            lName: { type: "string", editable: true, validation: { required: true } },
            fName: { type: "string", editable: true, validation: { required: true } },
    ...

而事件将是:

dataSource: {
    error : function (e) {
        if (e.errors !== false) {
            alert("Error: " + e.errors);
            // This will cancel any change done
            this.cancelChanges();
        }
    },
    transport: {
        read: {
            url: "manageUsers.phtml",
            data: { mode: "fetch" },
            dataType: "json",
            type: "POST"
        },

编辑:如果您想要保持弹出窗口打开,您应该这样做:

dataSource: {
    error : function (e) {
        if (e.errors !== false) {
            alert("Error: " + e.errors);
            // This will keep the popup open
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind
            });
        }
    },
    transport: {
        read: {
            url: "manageUsers.phtml",
            data: { mode: "fetch" },
            dataType: "json",
            type: "POST"
        },

我使用jQuery.one绑定到数据绑定事件一次