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.