Kendo 网格可编辑多选网格单元格

Question

我已经工作了几天，试图找出如何将 mutliselect 控件添加到 kendo UI 网格列。我有以下结构：

public class CampaignOrgModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class CampaignViewModel
{
    public int CampaignID { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public List<CampaignOrgModel> CampaignOrgList { get; set; }
}

我的 UI 是：

        var dataSource = new kendo.data.DataSource({
            ...
            schema:
            {
                model:
                {
                    id: "CampaignID",
                    fields:
                    {
                        id: { type: "number", editable: false },
                        Name: { type: "string" },
                        Descirption: { type: "string" },
                        CampaignOrgList: { }
                    }
                }
            }
        });

        $("#campaignGrid").kendoGrid({
            dataSource: dataSource,
            ...
            columns:
            [
                { field: "Name", title: "Name" },
                { field: "Description", title: "Description" },
                {
                    field: "CampaignOrgList",
                    title: "Organizations"
                }
            ]
        });

我有 2 个问题：

目前，"Organizations" 列每行仅显示 [object object]。我知道我必须使用列模板来显示组织名称，但我不知道该怎么做。我查看了示例，但无法弄清楚如何让它适用于我的场景。
我需要 multi-select 以允许用户从可用的整个组织列表中 select。不仅仅是分配给 selected 行的那些。例如：可能有 ["Org 1"、"Org 2"、"Org 3"] 可用，但我正在编辑的行可能只分配给 "Org1"。在此示例中，"Org 1" 应显示在网格中，但所有 3 个都需要显示在多 select 编辑器中，以允许用户将其他组织添加到活动中。

Answer 1

Link http://dojo.telerik.com/@harsh/Uceba

//organizations array datasource for multiselect
var organizations_arr = ['org1', 'org2', 'org3', 'org4'];

//grid data
var data = [{
    Name: 'abc',
    Organizations: ['org1', 'org4']
}, {
    Name: 'def',
    Organizations: ['org3']
}];

//multiselect editor for Organization field
function orgEditor(container, options) {
    $("<select multiple='multiple' data-bind='value :Organizations'/>")
        .appendTo(container)
        .kendoMultiSelect({
        dataSource: organizations_arr
    });
}

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            data: data
        },
        height: 150,
        sortable: true,
        editable: true,
        columns: [{
            field: "Name",
            width: 200
        }, {
            field: "Organizations",
            width: 150,
            template: "#= Organizations.join(', ') #",
            editor: orgEditor
        }]
    });
});

Kendo 网格可编辑多选网格单元格

Kendo grid editable multiselect grid cell

kendo-ui

kendo-grid

kendo-asp.net-mvc