向 Kendo Grid 显示添加自定义验证？

Question

我们有一个内部工具，用于将用户批量添加到我们的数据库中。为此，用户将上传一个 CSV 文件，该文件在客户端读取并显示在 Kendo Grid 中。

我正在尝试实现某种形式的验证，将集合推送到 Web 服务并返回经过验证的集合，显示哪些字段需要更正，哪些字段有效。

目前该对象的结构如下：

export interface IBulkUserObject {
    FirstName: string;
    GlobalLogin: string;
    JobTitle?: string;
    LastName: string;
    Organization?: string;
    PhoneNumber: string;
}

基本上我需要弄清楚如何对这个对象进行基本验证。显然，从客户端获取这些信息非常简单，但我不完全确定如何指示哪些字段有效，哪些无效，然后将此信息传递给 kendo 网格。

this.fullGrid = $("#verifyGrid").kendoGrid({
    dataSource: {
        data: this.gridData,
        schema: {
            model: {
                id: "GlobalLogin",
                fields: {
                    Organization: { type: "string" },
                    GlobalLogin: { type: "string" },
                    FirstName: { type: "string" },
                    LastName: { type: "string" },
                    PhoneNumber: { type: "string" },
                    JobTitle: { type: "string" }
                }
            }
        },
        pageSize: 100
    },
    height: 650,
    scrollable: true,
    sortable: true,
    filterable: true,
    pageable: {
        input: true,
        numeric: false
    },
    columns: [
        { command: ["edit"], width: "100px" },
        {
            field: "Organization",
            title: "Organization",
            width: "200px"
        },
        {
            field: "GlobalLogin",
            title: "Global Login",
            width: "200px"
        },
        {
            field: "FirstName",
            title: "First Name",
            width: "200px"
        },
        {
            field: "LastName",
            title: "Last Name",
            width: "200px"
        },
        {
            field: "PhoneNumber",
            title: "Phone Number",
            width: "200px"
        },
        {
            field: "JobTitle",
            title: "Job Title",
            width: "200px"
        }
    ],
    editable: "inline",
    save() {
        alert("edited");
    }
});

---

编辑

发布了一个可能的解决方案。

Answer 1

好吧，我这一天大部分时间都在玩这个，我相信我已经想出了一些可行的方法，但我不确定是否有更好的方法。

我修改了我的初始对象结构如下：

export interface IBulkUserObjectTest {
    Email?: string;
    FirstName: IVerificationProperty<string>;
    GlobalLogin: IVerificationProperty<string>;
    JobTitle?: IVerificationProperty<string>;
    LastName: IVerificationProperty<string>;
    Organization?: IVerificationProperty<string>;
    PhoneNumber: IVerificationProperty<string>;
}

export interface IVerificationProperty<T> {
    Value?: T;
    Valid: boolean;
    VerificationMessage?: string;
}

但是，由于我的 CSV 仍然生成一个平面对象，我需要对数据进行整形，所以我创建了一个方法来做到这一点：

private shapeGridData = (data: Array<Models.IBulkUserObject>): Array<Models.IBulkUserObjectTest> => {
    var newItems: Array<Models.IBulkUserObjectTest> = new Array();
    data.forEach(item => {
        var newItem: Models.IBulkUserObjectTest = {
            Organization: { Value: item.Organization, Valid: true },
            GlobalLogin: { Value: item.GlobalLogin, Valid: true },
            Email: item.GlobalLogin,
            FirstName: { Value: item.FirstName, Valid: true },
            LastName: { Value: item.LastName, Valid: true },
            PhoneNumber: { Value: item.PhoneNumber, Valid: true },
            JobTitle: { Value: item.JobTitle, Valid: true }
        };
        newItems.push(newItem);
    });

    return newItems;
}

现在剑道网格似乎真的讨厌复杂的物体，所以需要进行一些认真的调整。

this.fullGrid = $("#verifyGrid").kendoGrid({
    dataSource: {
        data: this.gridDataVerified,
        schema: {
            model: {
                id: "Email",
                fields: {
                    Email: { },
                    GlobalLogin: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    Organization: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    FirstName: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    LastName: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    PhoneNumber: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    CompanyName: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    JobTitle: [{ Value: { type: "string" }, Valid: { type: "boolean" } }]
                }
            }
        },
        pageSize: 100
    },
    height: 650,
    scrollable: true,
    sortable: true,
    filterable: true,
    pageable: {
        input: true,
        numeric: false
    },
    columns: [
        { command: ["edit"], width: "100px" },
        {
            field: "GlobalLogin",
            title: "Global Login",
            width: "200px",
            template: "<span #= GlobalLogin.Valid ? \"\" : 'class=\"errorClass\"' #>#=GlobalLogin.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
            //template: "<span #= GlobalLoginValid ? \"\" : 'class=\"errorClass\"' #>#: GlobalLogin #</span>"
        },
        {
            field: "Organization",
            title: "Organization",
            width: "200px",
            template: "<span #= Organization.Valid ? \"\" : 'class=\"errorClass\"' #>#=Organization.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        },
        {
            field: "FirstName",
            title: "First Name",
            width: "200px",
            template: "<span #= FirstName.Valid ? \"\" : 'class=\"errorClass\"' #>#=FirstName.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        },
        {
            field: "LastName",
            title: "Last Name",
            width: "200px",
            template: "<span #= LastName.Valid ? \"\" : 'class=\"errorClass\"' #>#=LastName.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        },
        {
            field: "PhoneNumber",
            title: "Phone Number",
            width: "200px",
            template: "<span #= PhoneNumber.Valid ? \"\" : 'class=\"errorClass\"' #>#=PhoneNumber.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        },
        {
            field: "JobTitle",
            title: "Job Title",
            width: "200px",
            template: "<span #= JobTitle.Valid ? \"\" : 'class=\"errorClass\"' #>#=JobTitle.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        }
    ],
    editable: "inline",
    save() {
        alert("Postback");
    }
});

最后，我必须修复编辑器，让它知道我在编辑什么以及在哪里编辑，所以我创建了一个函数来做这件事。

private kendoEditor = (container, options) => {
    var input = $("<input/>");
    input.attr("name", options.field + ".Value");
    input.appendTo(container);
    input.addClass("k-input k-textbox");
}