我使用以下示例为任务创建了一个自定义模板:
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>
现在我需要添加一个"资源 - 分配"按钮,就像此示例中的按钮(编辑任务表单)一样:http://demos.telerik.com/kendo-ui/gantt/resources
创建此按钮需要执行哪些操作?我找不到甘特图控件这一部分的任何 API 文档。
此操作需要几个步骤。首先,将类似以下内容添加到您的剑道模板中:
<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 文档没有提到任何关于如何做到这一点的内容!