剑道网格可编辑多选网格单元

Question

我已经工作了好几天，试图弄清楚如何将多选控件添加到 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; }
}

我的用户界面是：

        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 个问题：

1. 目前，“组织”列仅显示每一行的 [object object]。我知道我必须使用列模板来显示组织名称，但我不知道该怎么做。我查看了示例，但无法弄清楚如何使其适用于我的场景。

2. 我需要多重选择以允许用户从可用组织的整个列表中进行选择。不仅仅是分配给所选行的那些。例如：可能有 ["Org 1", "Org 2", "Org 3"] 可用，但我正在编辑的行可能只分配给“Org1”。在此示例中，“Org 1”应显示在网格中，但所有 3 个都需要显示在多选编辑器中，以允许用户将其他组织添加到活动中。

Answer 1

链接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
        }]
    });
});