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

Kendo ui 剑道网格可编辑多选网格单元,kendo-ui,kendo-grid,kendo-asp.net-mvc,Kendo Ui,Kendo Grid,Kendo Asp.net Mvc,我已经工作了好几天,试图弄清楚如何将mutliselect控件添加到剑道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

我已经工作了好几天,试图弄清楚如何将mutliselect控件添加到剑道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; }
}
我有两个问题:

目前,Organizations列仅显示每行的[object]。我知道我必须使用列模板来显示组织名称,但我不知道如何做到这一点。我已经看了一些例子,但不知道如何使其适用于我的场景

我需要multi-select以允许用户从可用组织的整个列表中进行选择。不仅仅是指定给选定行的行。例如:可能有[Org1、ORG2、ORG3]可用,但我正在编辑的行可能只分配给Org1。在本例中,组织1应显示在网格中,但所有3个组织都需要显示在多选编辑器中,以允许用户将其他组织添加到活动中

链接


谢谢你的回复。所以orgEditor数据源不可能包含组织的名称和DB索引?谢谢,但使用filterable:{mode:row}。。。它不适用于任何解决方案的过滤器
        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"
                }
            ]
        });
//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
        }]
    });
});