将对象数组绑定到Kendo网格弹出式多选对象 [英] Binding array of object to Kendo grid popup multiselect

问题描述

我正在尝试将一组ID值对绑定到kendo网格弹出编辑器.

I'm trying to bind an array of id-value pairs to a kendo grid popup editor.

让一切都可以用来创建新记录.弹出编辑器将加载自定义编辑器，并成功将数据提交到控制器.

Got everything to work for creating a new record. Popup editor loads the custom editor and successfully submits the data to the controller.

问题是当我尝试编辑记录时.记录正确显示在该行中，但是当我尝试对其进行编辑时，multiselect无法保存这些值.

The problem is when I try to edit records. The records displays properly in the row, but when I try to edit it, the multiselect does not hold the values.

网格标记

    $("#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- 伙计们使用此方法遍历对象列表并合并名称.

parseScopeOfWork - this method guys iterates through the object list and concats the name.

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;
}

以下是屏幕截图:

推荐答案

您要将SpaceOfWork绑定到新的小部件，但是该小部件如何知道您的模型?我的意思是，仅使用data-bind不会将模型绑定到小部件，它本身无法确定.我有两个建议:

You're binding the SpaceOfWork to the new widget, but how that widget knows your Model ? I mean, just using data-bind doens't binds the model to the widget, it can't figure that by itself. I have two suggestions:

1. 在小部件的初始化中设置值:

1. Set the value in the widget's initialization:

.kendoMultiSelect({
    value: options.model.ScopeOfWork

演示

将模型永久绑定到小部件:

Bind the model to the widget for good:

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

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

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

演示

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

这篇关于将对象数组绑定到Kendo网格弹出式多选对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！