Как я могу создавать новые строки в сетке пользовательского интерфейса Kendo с помощью ClientTemplate и EditorTemplateName в MVC?

Я пытаюсь создать сетку кендо для списка контактов со следующими требованиями:

1. На панели инструментов должна быть кнопка для создания новых контактов
2. Должен быть столбец «Действия» с кнопками «Изменить» и «Удалить».
3. Должна быть колонка под названием «Контактные группы»:
   • В моей модели просмотра это определяется как список строк
   • Пока сетка находится в режиме отображения, она должна отображаться в виде строки, разделенной запятыми.
   • Пока сетка находится в режиме редактирования, это должен быть элемент Kendo MultiSelect, позволяющий пользователю выбрать один или несколько из жестко запрограммированного списка доступных вариантов.

Чтобы добиться этого, это представление, которое я создал до сих пор:

@using MyProject.Contacts.Models;
@using Kendo.Mvc.UI;

@{
    ViewBag.Title = "Contacts";
}

<div id = "contactsContainer" class = "">
    @(Html.Kendo().Grid<ContactsViewModel>()
          .Name("ContactsGrid")
          .Columns(columns =>
          {
              columns.Bound(p => p.ContactName).Title("Contact Name").Width(200);
              columns.Bound(p => p.ContactGroups).ClientTemplate("#= displayContactGroups(ContactGroups)#").EditorTemplateName("ContactGroupsEditor").Title("ContactGroups").Width(200);
              columns.Command(command =>
              {
                  command.Edit().IconClass("k-icon k-i-edit");
                  command.Destroy().IconClass("k-icon k-i-delete");
              }
              ).Title("Actions").Width(200);
          })
          .NoRecords(n => n.Template("No Contacts to display"))
          .ToolBar(tools =>
          {
              tools.Create().Text("Create New Contact");
          })
          .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Model(model =>
                {
                    model.Id(m => m.kendoId);
                }
                )
                .Create(create => create.Action("CreateContact", "Contacts"))
                .Read(read => read.Action("GetContacts", "Contacts"))
                .Update(update => update.Action("UpdateContact", "Contacts"))
                .Destroy(destroy => destroy.Action("DeleteContact", "Contacts"))

          )

      )

</div>

<script>
    function displayContactGroups(contactGroups) {
        if (contactGroups == null) {
            return "";
        }
        return contactGroups.join(", ");
    }
</script>

А вот частичное представление, которое я определил для ContactGroupsEditor:

@model List<string>

@(Html.Kendo().MultiSelect()
    .Name("ContactGroups")
    .DataValueField("Text")
    .DataTextField("Text")
    .BindTo(new List<SelectListItem> 
    {
        new SelectListItem { Text = "GalacticEmpire"},
        new SelectListItem { Text = "RebelAlliance"}
    })
    .Value(Model)
)

Это очень близко к тому, чтобы работать так, как я хочу. Когда я загружаю страницу, сетка отображается так, как я хочу, кнопка «Удалить» работает должным образом, а кнопка «Редактировать» правильно переключает столбец «Группы контактов» на элемент «Множественный выбор». У меня проблема с кнопкой «Создать новый контакт». Когда я нажимаю на нее, я получаю сообщение об ошибке консоли: Uncaught ReferenceError: ContactGroups не определен. Я подозреваю, что это происходит потому, что когда я создаю новую строку, она пытается оценить оператор JavaScript в операторе ClientTemplate в сетке и терпит неудачу, потому что ему еще не присвоено значение. Как я могу это исправить?