Question

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

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

我正在定义这样的模板：

<script id="editor" type="text/x-kendo-template">
<h3>Edit Appointment</h3>
   <p>
       <label>Patient: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
</script>

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

示例代码（不起作用）：

<p>
    <label>Type: </label><input id="appointmentTypeDropDownList" />
</p>
# 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提供了我正在尝试执行的最新简化版本。目标只是以最直接的方式绑定下拉列表。谢谢！

Answer 1

如果将调度程序DataSource移动到viewModel中，则可以使用kendo Observable的父级功能将DropDownList绑定到正确的DataSource。

var viewModel = new kendo.observable({
    appointmentTypes : new kendo.data.DataSource({
        data: [{
            id: 1,
            text: "Wellness Exam"
        }, {
            id: 2,
            text: "Diagnostic Exam"
        }, {
            id: 3,
            text: "Nail Trim"
        }]
    }),
    schedulerData: [{
        id: 1,
        start: new Date("2014/1/27 08:00 AM"),
        end: new Date("2014/1/27 09:00 AM"),
        title: "Breakfast"
    }]
});

现在，当您创建调度程序时，您只需使用视图模型上的schedulerData属性作为调度程序的DataSource。

$("#scheduler").kendoScheduler({
    ...
    dataSource: viewModel.schedulerData,
    ...
});

最后一部分只是更改DropDownList声明以使用视图模型上的appointmentTypes属性。

<select id="appointmentTypeDropDownList" data-bind="source:appointmentTypes, value:id" data-text-field="text" data-value-field="id" data-role="dropdownlist" data-autobind="true" />

由于您的模板将绑定到schedulerData DataSource中的Observable对象，因此Kendo将爬上对象的父树，直到它能够解析appointmentTypes上的viewModel属性。

Answer 2

模板抛出一个错误，因为选择器“#appointmentTypeDropDownList”应该被转义，看起来像这个“\\＃appointmentTypeDropDownList”（Kendo UI Documentation）。

修复此问题后，您将不会收到模板错误，但仍未将数据绑定到KendoDropDownList。在这种情况下，我检查了一个KendoUI MVC帮助器将呈现什么，似乎如果你的模板看起来像这样，它就可以工作。

<script id="editor" type="text/x-kendo-template">
       <h3>Edit meeting</h3>
       <p>
           <label>Title: <input name="title" /></label>
       </p>
       <p>
           <label>Start: <input data-role="datetimepicker" name="start" /></label>
       </p>
       <p>
           <label>Start: <input data-role="datetimepicker" name="end" /></label>
       </p>

        <p>
            <label>Type: </label><input id="appointmentTypeDropDownList" />

                <script>
                    var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } }); 

                    jQuery(function() { jQuery("\\#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ); });
                 <\/script>
        </p></script>

Answer 3

没有必要在模板中放置任何javascript，您可以使用Kendo的数据属性初始化功能。

因此，您的模板看起来像：

<label>Type: </label>
<input id="appointmentTypeDropDownList" data-text-field="ProductName" data-value-field="ProductID" data-bind="value:ProductID" data-source="dataSource" data-role="dropdownlist" data-autobind="true" />

然后你会在你的模板之外使用Javascript：

var dataSource = new kendo.data.DataSource({
  transport: { 
    read: { 
      url: "http://demos.kendoui.com/service/products", 
      dataType: "jsonp"
    }
  }
});

只要dataSource在全球范围内定义，您就可以开始了。这里有关于数据属性初始化的更多信息http://docs.telerik.com/kendo-ui/getting-started/data-attribute-initialization

编辑：刚注意到您的评论“数据将取决于所选的日期时间”。您始终可以尝试在edit事件中重新定义数据源选项，该事件在显示弹出编辑器窗口之前调用。我没有使用过这种情况，但我不明白为什么它不起作用。

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

3 个答案: