Kendo Scheduler自定义编辑弹出模板中的附加按钮

Kendo Scheduler additional button in custom edit popup template

本文关键字：按钮 自定义 Scheduler 编辑 Kendo      更新时间：2023-09-26

我有一个简单的Kendo Scheduler演示：http://dojo.telerik.com/IqIYI/7

在这个演示中，我有一个自定义的编辑模板定义如下：

<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>End: <input data-role="datetimepicker" name="end" /></label>
   </p>
</script>

默认情况下，此模板在创建新模式下有2个按钮，在编辑模式下有3个按钮。

我现在正试图在编辑弹出窗口中添加第四个按钮，然后捕捉它的点击事件并做其他事情（创建一个新的弹出窗口，其中包含一个事件-"编辑为新的"功能）。

在编辑实际事件的情况下，我通过剑道的编辑事件添加了这个按钮（每当加载弹出模板时就会触发）。

  edit: function(e) {
            if (!e.event.isNew()) {
                $(".k-edit-buttons.k-state-default").prepend('<a class="k-button" id="editasnew">Edit as New</a>');
          }
  },

该按钮有一个id="editasnew"，然后是一个点击事件捕捉器：

  $('#editasnew').click(function(){
    console.log("edit now");
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.cancelEvent();
    setTimeout(function(){
      console.log("add new event now");
      scheduler.addEvent({ title: "(No title)" });
    }, 2000);
  });

但是！click事件永远不会被触发。

所以我想知道，有没有一种方法可以用不同的方式添加按钮？（参数通过剑道函数-我没有在文档中找到）

或者重组点击事件捕捉器（也许点击这个按钮有剑道给出的停止传播功能）？

感谢您的帮助！

答案：

点击事件需要特别添加（我不确定为什么），但这是有效的：

  1. 将单击处理程序包装在函数中

_

function addClickEvent(){
    $('#editasnew').click(function(){
      console.log("edit now");
      var scheduler = $("#scheduler").data("kendoScheduler");
      scheduler.cancelEvent();
      setTimeout(function(){
        console.log("add new event now");
        scheduler.addEvent({ title: "(No title)" });
      }, 2000);
    });
  }
  1. 在调度程序的编辑事件中执行上述功能

_

  edit: function(e) {
            if (!e.event.isNew()) {
                $(".k-edit-buttons.k-state-default").prepend('<a class="k-button" id="editasnew">Edit as New</a>');
          addClickEvent();
          }
  },

对于任何感兴趣的人，这里是我更新的例子：

http://dojo.telerik.com/IqIYI/21

也许您可以使用columns.comand.click Function

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [ {
        name: "details",
        click: function(e) {
          // e.target is the DOM element representing the button
          var tr = $(e.target).closest("tr"); // get the current table row (tr)
          // get the data bound to the current table row
          var data = this.dataItem(tr);
          console.log("Details for: " + data.name);
        }
      } ]
   }
  ],
  dataSource: [ { name: "Jane Doe" } ]
});
相关文章：