Kendo UI 甘特图 - 显示任务更新的自定义模式

Question

我知道以下内容 http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template 但这不是我需要的。

我需要为应用程序的其他部分使用的任务版本显示自定义模式对话框，而不是默认的 kendo 对话框。

Answer 1

这里有一个可行的方法：

为编辑事件实施处理程序并使用 e.preventDefault() 取消 kendo 的内置处理。这将阻止他们的对话框（或模板）显示。

现在显示您自己的对话框（无论您是否需要这样做）并推入传递给编辑事件的 GanttTask 数据。

关闭对话框后，将已编辑数据的值推送到 GanttTask 中……这很重要！由于您取消了内置功能，现在您有责任更新基础数据模型。

示例编辑处理程序：

edit: function(e) {
    // Cancel the built-in editing functionality
    e.preventDefault();
    var editResult = showMyDialog(e.task);
    if (editResult.ok) {
      // User clicked OK instead of Cancel...or whatever mechanism your dialog uses.
      e.task.set("title", editResult.data.title);
      // other data...
    }
}

示例自定义对话框：

function showMyDialog(task) {
    // Fetch/show your actual window, push in the data from the GanttTask
    alert("This is my window: " + task.title);

    // Simulate user editing of GanttTask.
    var editedTitle = "NeW tAsK!";
    // other data...

    return {
      ok: true, // or false if user clicked cancel.
      data: {
        title: editedTitle
        // other data...
      }
    };
  }

简单演示：http://dojo.telerik.com/@Stephen/apEYa

Kendo UI 甘特图 - 显示任务更新的自定义模式

Kendo UI Gantt - Display a custom modal for task update

kendo-ui

kendo-gantt