如何使用调度程序将DropDownList绑定到编辑器模板中的DataSource？

我正在尝试自定义我对Kendo UI kendoScheduler小部件的使用.我在为调度程序中添加/编辑约会时弹出的可编辑窗口指定了一个自定义模板,如下所示:

editable: {
                template: $("#editor").html()
            },

我正在定义这样的模板:

所以现在我想添加一个Kendo UI DropDownList并将其配置为从远程数据源填充.你如何在模板中配置这样的东西？

示例代码(不起作用):

    Type: 

# var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } });
# $("#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ) ;

上面代码给出的错误是: 未捕获错误:模板无效:'

可能这只是一个脚本编码问题; 我对将绑定的DropDownList放在模板中的正确方法更感兴趣.

更新 - 这个jsfiddle URL提供了我正在尝试做的最新简化版本.目标只是以最直接的方式绑定下拉列表.谢谢!