Kendo grid редактируемая ячейка сетки multiselect

Question

Я уже несколько дней пытаюсь выяснить, как добавить элемент управления mutliselect в столбец сетки пользовательского интерфейса кендо. У меня есть следующие структуры:

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

У меня 2 вопроса:

1. В настоящее время, в столбце "Организации" только показывает [объект Object] для каждой строки. Я знаю, что мне нужно использовать шаблон столбца для отображения имен организации, но я не знаю, как это сделать. Я рассмотрел примеры и не могу понять, как заставить его работать для моего сценария.

2. Мне нужен мульти-выбор, позволяющий пользователю выбирать из всего списка доступных организаций. Не только те, которые назначены выбранной строке. например: могут быть [«Org 1», «Org 2», «Org 3»], но редактируемая строка может быть назначена только «Org1». в этом примере «Org 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 
     }] 
    }); 
});