时间戳

首页 > 解决方案 > 如何向我的 Kendo UI 调度程序添加新的布尔值？

kendo-ui - 如何向我的 Kendo UI 调度程序添加新的布尔值？

问题描述

我已将该字段添加到数据源架构中，但编辑器上没有显示该字段。

schema: {
    model: {
        id: "id",
        fields: {
            id: { from: "Id", type: "number" },
            title: { from: "Title", validation: { required: true } },
            start: { type: "datetime", from: "Start" },
            end: { type: "datetime", from: "End" },
            description: { from: "Description" },
            isAllDay: { from: "IsAllDay" },
            isFollowUp: { type: "boolean", from: "IsFollowUp" }, // This is the one I'm trying to add.
            patients: { from: "Patients", nullable: true, title: "Patients" },
            patientId: { from: "PatientId", type: "number" }
        }
    }
}

我已经排除了资源，因为由于不需要布尔值的数据源，因此我没有该字段的资源。

我很困惑为什么添加一个新的布尔值与内置布尔值的工作方式不同，内置isAllDay布尔值除了包含在模型模式中之外不需要任何东西。

我在调度程序上获得的资源实际上只是该patients字段的列表，因此与问题无关。

如何获取编辑器模板来为IsFollowUp布尔字段构建新的复选框字段？

标签： kendo-uitelerik

解决方案

您需要将新字段添加到编辑器模板。有关演示，请参阅随附的代码段。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
</head>
<body>
  
<script id="editor" type="text/x-kendo-template">
    <h3>Edit meeting</h3>
    <p>
        <label>Title: <input data-bind="value: title" /></label>
    </p>
    <p>
        <label>Start: <input data-role="datetimepicker" data-bind="value: start" /></label>
  </p>
    <p>
        <label>End: <input data-role="datetimepicker" data-bind="value: end" /></label>
  </p>
    <p>
        <label>Followup:</label>
        <select data-bind="value: isFollowUp">
            <option value="true">True</option>
            <option value="false">False</option>
        </select>
    </p>
   
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    template: $("#editor").html()
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview",
      isFollowUp: true
    },
    {
      id: 2,
      start: new Date("2013/6/6 10:00 AM"),
      end: new Date("2013/6/6 11:00 AM"),
      title: "Test",
      isFollowUp: false
    }
  ]
});
</script>
</body>
</html>

推荐阅读