2

我正在尝试自定义我对 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获得。目标只是以最直接的方式绑定下拉列表。谢谢！

4

3 回答 3

5

如果您将调度程序 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视图模型上的属性作为调度程序的数据源。

$("#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" />

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

于 2014-01-30T02:49:04.477 回答
0

无需在模板中放入任何 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显示弹出编辑器窗口之前被调用。我没有使用过这种情况，但我不明白为什么它不起作用。

于 2014-01-27T12:41:27.467 回答
0

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

修复此问题后，您不会收到模板错误，但仍不会将数据绑定到 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>
于 2014-01-26T01:29:12.080 回答