將對象數組綁定到Kendo網格彈出式多選對象

Question

我正在嘗試將一組ID值對綁定到kendo網格彈出編輯器。

使一切都能工作以創建新記錄。 彈出編輯器將加載自定義編輯器，並成功將數據提交到控制器。

問題是當我嘗試編輯記錄時。 記錄正確顯示在行中，但是當我嘗試對其進行編輯時，multiselect不保存值。

網格標記

    $("#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;
}

這是屏幕截圖：

Answer 1

您正在將SpaceOfWork綁定到新的小部件，但是該小部件如何知道您的Model？ 我的意思是，僅使用data-bind不會將模型data-bind到小部件，它本身無法確定。 我有兩個建議：

1. 在小部件的初始化中設置值：

    .kendoMultiSelect({ value: options.model.ScopeOfWork 

   演示

2. 將模型永久綁定到小部件：

    let $multiSelect = $('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>'); kendo.bind($multiSelect, options.model); $multiSelect .appendTo(container) .kendoMultiSelect({ ... 

   演示

^{注意：編輯兩個演示中的類別單元以查看更改。}