Question

我正在尝试制作简单的组合框内联编辑器。我设法通过在kendoComboBox更改上添加愚蠢的解决方法来创建新行，但更新仍然无效（除非您使用默认编辑器更改字段）并且组合框也未显示所选值。

网格：

$("#pseudo-category-grid").kendoGrid({
    dataSource: {
        type: "json",
        transport: {
            // CRUD stuff..
        },
        schema: {
            data: "Data",
            total: "Total",
            errors: "Errors",
            model: {
                id: "Id",
                fields: {
                    PseudoCategory: {editable: true, type: "string" },
                    PseudoCategoryId: {editable: true, type: "number" },
                    DisplayOrder2: {editable: true, type: "number" },
                    IncludeAllChildren: {editable: true, type: "boolean" }
                }
            }
        },
        requestEnd: function(e) {
            if(e.type=="update") {
                this.read();
            }
        },
        error: function(e) {
            display_kendoui_grid_error(e);
            this.cancelChanges();
        },
        pageSize: @(defaultGridPageSize),
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    pageable: {
        refresh: true,
        pageSizes: [@(gridPageSizes)]
    },
    toolbar: [{ name: "create", text: "@T("Admin.Common.AddNewRecord")" }],
    editable: {
        confirmation: false,
        mode: "inline"
    },
    scrollable: false,
    columns: [{
        field: "PseudoCategoryId",
        title: "Pseudo Category",
        editor: pseudoCategoryDropDownEditor,
        template: "#:PseudoCategory#"
    // other unrelated fields removed...
    }, {
        command: [{
            name: "edit",
            text: {
                edit: "@T("Admin.Common.Edit")",
                update: "@T("Admin.Common.Update")",
                cancel: "@T("Admin.Common.Cancel")"
            }
        }, {
            name: "destroy",
            text: "@T("Admin.Common.Delete")"
        }],
        width: 200
    }]
});

自定义编辑器：

function pseudoCategoryDropDownEditor(container, options) {
    $.ajax({
        cache: false,
        type: 'POST',
        url: '@Html.Raw(Url.Action("PseudoCategoryList", "Category"))',
        dataType: 'json',
        data: addAntiForgeryToken(),
        success: function (data) {
            $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:PseudoCategoryId"/>')
                .appendTo(container)
                .kendoComboBox({
                    autoBind: false,
                    dataSource: data.Data,
                    dataTextField: "Name",
                    dataValueField: "Id",
                    filter: "contains",
                    change: function(e) {
                        var value = this.value();
                        options.model.PseudoCategoryId = value;
                        for (var i = 0; i < data.Data.length; i++) {
                            if (value == data.Data[i].Id)
                                options.model.PseudoCategory = data.Data[i].Name;
                        }
                    }
                });
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Failed to get pseudo categories');
        }
    });
}

调用@Html.Raw(Url.Action("PseudoCategoryList", "Category"))只返回数据字段中的ID和名称数组。

Answer 1

通过manually binding组合框进行管理以使其工作：

function pseudoCategoryDropDownEditor(container, options) {
    $.ajax({
        cache: false,
        type: 'POST',
        url: '@Html.Raw(Url.Action("PseudoCategoryList", "Category"))',
        dataType: 'json',
        data: addAntiForgeryToken(),
        success: function (data) {
            var elem = $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:PseudoCategoryId"/>')
                .appendTo(container)
                .kendoComboBox({
                    autoBind: false,
                    dataSource: data.Data,
                    filter: "contains"
                });
            if (options.model.PseudoCategoryId == 0)
                options.model.PseudoCategoryId = data.Data[0].Id;
            kendo.bind(elem, options.model);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Failed to get pseudo categories');
        }
    });
}

使用自定义编辑器的Kendo Grid内联编辑不会绑定

1 个答案: