将对象数组绑定到 Kendo 网格弹出多选答案

【问题标题】：Binding array of object to Kendo grid popup multiselect将对象数组绑定到 Kendo 网格弹出多选
【发布时间】：2019-02-06 15:02:21
【问题描述】：

我正在尝试将一组 id-value 对绑定到剑道网格弹出编辑器。

为创建新记录做好了一切准备。弹出编辑器加载自定义编辑器，并成功将数据提交给控制器。

问题是当我尝试编辑记录时。记录在行中正确显示，但是当我尝试编辑它时，多选不保存值。

网格标记

    $("#ProjectSites-SubContract-grid").kendoGrid({
        dataSource: {
            type: "json",                
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "Id",
                    fields: {
                        DateOfContract: { type: 'date', editable: true },
                        DateOfCompletion: { type: 'date', editable: true },
                        AmountOfContract: { type: 'number', editable: true },
                        Contractor: { defaultValue: { id: "", name: "" } }
                    }
                }
            },
        },
        columns: [            
        {
            field: "ScopeOfWork",
            title: "Scope of Work",
            template: "#=parseScopeOfWork(ScopeOfWork)#",
            editor: scopeOfWorkEditor
        },            
        ]
    });
});

工作范围编辑器

function scopeOfWorkEditor(container, options) {
    $('<input  data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>')
        .appendTo(container)
        .kendoMultiSelect({
            dataSource: {
                data: [
                    @foreach (var scopeOfWork in Model.AvailableScopeOfWork)
                    {
                        <text>{ id : "@scopeOfWork.Value", name : "@scopeOfWork.Text" },</text>
                    },
                ]
            }
        });

parseScopeOfWork - 这个方法家伙遍历对象列表并连接名称。

function parseScopeOfWork(scopeOfWork) {
    var result = "";
    for (var i = 0; i < scopeOfWork.length; i++) {
        result += scopeOfWork[i].Name;
        if (i < scopeOfWork.length - 1)
        {
            result += ", <br/>";
        }
    }
    return result;
}

截图如下：

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

您将SpaceOfWork 绑定到新小部件，但是该小部件如何知道您的模型？我的意思是，仅使用 data-bind 不会将模型绑定到小部件，它自己无法计算出来。我有两个建议：

在小部件的初始化中设置值：

.kendoMultiSelect({
    value: options.model.ScopeOfWork

Demo

将模型绑定到小部件：

let $multiSelect = $('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>');

kendo.bind($multiSelect, options.model);

$multiSelect
    .appendTo(container)
    .kendoMultiSelect({ ...

Demo

^{注意：编辑两个演示中的类别单元格以查看更改。}

【讨论】：