Kendo grid editable multiselect grid cell

Question

I have worked for days now trying to figure out how to add a mutliselect control to a kendo UI grid column. I have the following structures:

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

and my UI is:

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

I have 2 issues:

Currently, the "Organizations" column only shows [object object] for each row. I know I have to use a column template to show the Organization names but I don't know how to do that. I have looked at examples and can't figure out how to make it work for my scenario.
I need the multi-select to allow the user to select from the entire list of organizations available. Not just the ones that are assigned to the selected row. for example: there may be ["Org 1", "Org 2", "Org 3"] available but the row i'm editing may only be assigned to "Org1". in this example, "Org 1" should show in the grid but all 3 need to show in the multi-select editor to allow the user to add additional organizations to the campaign.

Harsh Harsh · Accepted Answer · 2015-03-06T09:39:33

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 grid editable multiselect grid cell

1 Answers