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

Question

我有一个简单的 Kendo Scheduler Demo：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 个按钮。

我现在正在尝试向编辑弹出窗口添加第 4 个按钮，然后捕获其单击事件并执行其他操作（创建一个填充事件之一的新弹出窗口 - “编辑为新的”功能）。

在编辑实际事件（弹出模板加载时触发）的情况下，我通过 kendo 的编辑事件添加此按钮。

  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 事件永远不会触发。

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

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

任何帮助表示赞赏！

Answer 1

答案：

需要特别添加点击事件（我不知道为什么），但这有效：

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

Answer 2

也许你可以使用 columns.command.click 功能

$("#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" } ]
});