如何向我的 Kendo UI 调度程序添加新的布尔值?

Posted

技术标签:

【中文标题】如何向我的 Kendo UI 调度程序添加新的布尔值?【英文标题】:How do I add a new bool value to my Kendo UI scheduler? 【发布时间】:2021-01-21 11:55:20 【问题描述】:

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

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 布尔字段构建新的复选框字段?

【问题讨论】:

【参考方案1】:

您需要将新字段添加到编辑器模板中。有关演示,请参阅随附的 sn-p。

<!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>

【讨论】:

我从未使用过定义的编辑器模板,尽管如此,我的其他一些自定义字段仍然存在;这是怎么发生的?

以上是关于如何向我的 Kendo UI 调度程序添加新的布尔值?的主要内容,如果未能解决你的问题,请参考以下文章

如何以编程方式为 Kendo Ui 调度程序调用导航事件

如何删除我不想显示的部分 Kendo UI 调度程序?

更改 Kendo UI 调度程序中事件的宽度

有没有办法在 kendo ui 调度程序中禁用特定事件?

在 kendo ui 的调度程序导航中更改日期格式

过滤 kendo ui 调度程序