У меня есть форма с DropDownList внутри окна Kendo, и я хочу привязать к ней существующие данные.Примеров для этого предостаточно, и я делал это раньше в других ситуациях, но этот (который кажется очень простым) ускользает от меня, потому что я не могу представить, что DropDownList покажет правильныйзначение.Я полагаю, что я упускаю что-то действительно простое, но я не делал Кендо более года, и просмотр моей предыдущей работы тоже мне не помогает.
Чрезвычайно упрощенный код:
<button onclick="OnButtonClick();">Click Me</button>
<div id="form-window"></div>
<script type="text/x-kendo-template" id="form-template">
<div class="form-group">
<label for="Url">URL</label>
<input name="Url" type="text" value="#= Url #" required="required" />
</div>
<div class="form-group">
<label for="HttpVerb">HTTP verb</label>
<input name="HttpVerb" data-bind="value:HttpVerb" data-source="httpVerbsDataSource" data-value-field="verb" data-text-field="verb" data-role="dropdownlist" />
</div>
</script>
<script type="text/javascript">
var formWindow = $("#form-window")
.kendoWindow({
title: "Form",
modal: true,
visible: false,
resizable: false,
scrollable: false,
width: 500,
actions: ["Close"],
open: function () {
kendo.init($("#form-window"));
}
}).data("kendoWindow");
var formTemplate = kendo.template($("#form-template").html());
var httpVerbsDataSource = new kendo.data.DataSource({
data: [
{ verb: "GET" },
{ verb: "POST" },
{ verb: "PUT" }
]
});
function OnButtonClick(e) {
var dataItem = {
Url: "abcdef",
HttpVerb: "POST"
};
var windowContent = formTemplate(dataItem);
formWindow.content(windowContent);
formWindow.center().open();
}
</script>
Когда я нажимаю кнопку, открывается окно, и текстовое поле формы заполняется правильно, а DropDownList правильно привязан к источнику данных, но значение в моем элементе данных не выбрано.
JS Bin: https://jsbin.com/wariyorilo/edit?html,js,output
Чего мне не хватает?Заранее спасибо.