I am using Kendo Scheduler with a custom template for editing the event. This template has a dropdown list ('ownerId' in the template below). I am not sure how to load the data source of the list dynamically. All the examples show only static data sources as below. It would much appreciate if anyone helps me on this.
<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>This is the template where I'm trying to load dropdownlist data source dynamically.
You can create your DropDownList inside the edit event:
edit: function(e) {
e.container.find("#ownerId").kendoDropDownList();
}