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

我的用户界面是：

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

我有两个问题：

目前，“组织”列仅显示每行的[对象对象]。我知道我必须使用列模板来显示组织名称，但我不知道如何做到这一点。我查看了一些示例，但无法弄清楚如何使其适用于我的场景。
我需要多选以允许用户从可用的整个组织列表中进行选择。不仅仅是分配给所选行的那些。例如：可能有[“组织1”，“组织2”，“组织3”]，但我正在编辑的行只能分配给“Org1”。在此示例中，“组织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
        }]
    });
});

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

1 个答案: