KendoUI DropDownList — при выборе «Новый» отображать текстовое поле

У меня есть список элементов в KendoUI DropDownList. Генерируется с использованием синтаксиса Razor.

Что я хочу сделать:

• Если пользователь не находит в списке то, что ищет, он выбирает "Новый..." (статическое значение).

• должно отображаться скрытое текстовое поле, позволяющее им добавить новое значение

• новое значение должно быть отправлено обратно в метод контроллера (WIP)

Что я понял:

• Получить данные

• статически добавить опцию «Новый»

Пока это работает хорошо:

• Он извлекает данные из метода действия контроллера и отображает список, как и ожидалось.

• Я могу привязать его к двум событиям: «Change» и «DataBound».

Проблема:

Я использую "готовый" метод jQuery для добавления статического значения под названием "Новый..". Это дублирует это значение. Я думаю, что это бесконечный цикл.

Так что застрял на этом этапе

В частичном представлении:

 @(Html.Kendo().DropDownListFor(model => model.ClientType)
                              .DataSource(ds => ds.Read(read => read.Action("FetchAllClientTypes", "ClientType")))
                              .DataTextField("Description")
                              .DataValueField("Id")
                              .AutoBind(true)
                              .Events(e =>
                               {
                                   e.Change("onClientTypeChange").DataBound("onClientTypeDataBound");
                               })
                              .ToClientTemplate()
                      )
                @Html.ValidationMessageFor(model => model.ClientType)

Javascript:

/*When dropdown is bound, add "New..."*/
/* Duplicates "New". Appears to be infinite. */
function onClientTypeDataBound() {
    var clientTypesDropDownList = $('#ClientType').data('kendoDropDownList');
    clientTypesDropDownList.dataSource.add({ Description: 'New...', value: '-1' });

};

/**Works**/
function onClientTypeChange() {

    alert('Testing On change');
};