1
我正在使用Kendo Scheduler和一个自定义模板来编辑事件。该模板有一个下拉列表（下面模板中的'ownerId'）。我不知道如何动态加载列表的数据源。所有示例仅显示如下的静态数据源。如果有人能帮助我，我将非常感激。如何在Kendo Scheduler模板中动态加载下拉列表？
<script id="customEditorTemplate" type="text/x-kendo-template">
<div class="k-edit-label"><label for="title">Title</label></div>
<div data-container-for="title" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">
</div>
<div class="k-edit-label">
<label for="start">Start</label>
</div>
<div data-container-for="start" class="k-edit-field">
<input type="text"
data-role="datetimepicker"
data-interval="15"
data-type="date"
data-bind="value:start,invisible:isAllDay"
name="start"/>
<input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />
<span data-bind="text: startTimezone"></span>
<span data-for="start" class="k-invalid-msg" style="display: none;"></span>
</div>
<div class="k-edit-label"><label for="end">End</label></div>
<div data-container-for="end" class="k-edit-field">
<input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
<input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
<span data-bind="text: endTimezone"></span>
<span data-bind="text: startTimezone, invisible: endTimezone"></span>
<span data-for="end" class="k-invalid-msg" style="display: none;"></span>
</div>
<div class="k-edit-label"><label for="isAllDay">All day event</label></div>
<div data-container-for="isAllDay" class="k-edit-field">
<input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
</div>
<div class="k-edit-label"><label for="recurrenceRule">Repeat</label></div>
<div data-container-for="recurrenceRule" class="k-edit-field">
<div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
</div>
<div class="k-edit-label"><label for="description">Description</label></div>
<div data-container-for="description" class="k-edit-field">
<textarea name="description" class="k-textbox" data-bind="value:description"></textarea>
</div>
<div class="k-edit-label"><label for="ownerId">Owner</label></div>
<div data-container-for="ownerId" class="k-edit-field">
<select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
data-value-field="value" data-text-field="text">
<option value="1">Alex</option>
<option value="2">Bob</option>
<option value="3">Charlie</option>
</select>
</div>
</script>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda"
],
editable: {
template: $("#customEditorTemplate").html(),
},
eventTemplate: $("#event-template").html(),
edit: function(e) {
var recurrenceEditor = e.container.find("[data-role=recurrenceeditor]").data("kendoRecurrenceEditor");
//set start option value, used to define the week 'Repeat on' selected checkboxes
recurrenceEditor.setOptions({
start: new Date(e.event.start)
});
},
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>这就是我想要动态加载下拉列表数据源的模板。
感谢。非常感谢..该演示非常有帮助。 – Siva
@Siva乐于帮助！ – DontVoteMeDown