Kendo UI 甘特图 - 自定义任务编辑模板

Question

我使用此示例为任务创建了自定义模板：

http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template

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

现在我需要添加一个 'Resources - Assign' 按钮，就像本例（编辑任务表单）中的按钮一样： http://demos.telerik.com/kendo-ui/gantt/resources

我需要做什么来创建这个按钮？我找不到关于这部分甘特图控件的任何 API 文档。

Answer 1

完成此操作需要几个步骤。首先，将如下内容添加到您的 Kendo 模板中：

<div>
  <label for='resources'>Resources:</label>
  <div class='k-gantt-resources' style='display: none;'>
  </div>
  <div class='k-edit-field' data-container-for='resources'>
    <a class='k-button' href='\#'>Assign</a>
  </div>
</div>

接下来，您需要在初始化小部件时将以下两个事件处理程序添加到选项中：

edit: editHandler,
save: saveHandler

最后，您需要创建上面提到的两个处理程序。您基本上是拦截默认功能并自己打开弹出窗口，然后在完成时保存结果（如果它们被修改）。

var resoucesdEdited = false;

function editHandler(e)
{
    var gantt = e.sender;
    resoucesdEdited = false;

    if (e.task)
    {
        e.container.on('click', 'div[data-container-for="resources"] > a', function (event)
        {
            event.preventDefault();
            resoucesdEdited = true;
            gantt._createResourceEditor(e.container.find('div.k-gantt-resources'), e.task);
        });
    }
}

function saveHandler(e)
{
    if (e.task && resoucesdEdited)
    {
        this._updateAssignments(e.task.get("id"), e.task.get(this.resources.field));
    }
}

很高兴你问了这个问题，因为这也是我需要知道的，你是对的，Telerik/Kendo 文档没有提到如何做到这一点！

Kendo UI 甘特图 - 自定义任务编辑模板

Kendo UI Gantt - Custom Task Edit Template

telerik

gantt-chart

kendo-ui

kendo-gantt