Kendo grid editable multiselect grid cell - kendo-ui

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.

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