Adding DropDownList with remote data to Kendo Scheduler popup modal - kendo-ui

Question

I am trying to add a kendo dropdown with remote data (http://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource) to the kendo scheduler - Here is a code sample in their dojo: http://dojo.telerik.com/ebeMo I have been working on getting this working for a week and am completely baffled. I really need to get this working for my job.

Answer 1

You need to do couple of things to achieve that:
Create a custom template
<div id="scheduler"></div>
<script id="customEditorTemplate" type="text/x-kendo-template">
<input id="dropdownlist" />
</script>
Configure custom template in editable section
Attach the dropdownlist component in edit section
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
dataSource: [
{
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Breakfast"
}
],
editable: {
template: $("#customEditorTemplate").html()
},
edit: function (e) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
}
});
$("#dropdownlist").kendoDropDownList({
dataSource: dataSource,
dataTextField: "ProductName",
dataValueField: "ProductID"
});
}
});
</script>
Sample code: http://dojo.telerik.com/ETilE
Hope that helps.