javascript - 如何自定义剑道甘特图中的编辑器？

Question

双击任务时，将打开一个编辑器弹出窗口。我需要在此弹出窗口中自定义以下内容。

1. 删除任务字段。
2. 格式化开始和结束日期
3. 根据业务规则限制开始和结束日期
4. 工作负载接受 0-1 的浮动。我需要它是 0-100 (int)。
5. 对于某些任务，不应打开弹出窗口。（业务要求它是只读的）。

Answer 1

这可以通过以下editable.template属性轻松完成：

$('#gantt').kendoGantt({
    dataSource: taskDataSource,
    editable: {
        template: $("#task-editor-template").html()
    }, 
});

下面是一个模板示例：

<script id="task-editor-template" type="text/x-kendo-template">
    <div class="k-edit-label"><label for="title">Title</label></div>
    <div data-container-for="title" class="k-edit-field"><span name="title" data-bind="text: title"></span></div>

    <div class="k-edit-label"><label for="start">Start</label></div>
    <div data-container-for="start" class="k-edit-field"><input data-role="datepicker" name="start" data-bind="value: start" /></div>

    <div class="k-edit-label"><label for="start">End</label></div>
    <div data-container-for="start" class="k-edit-field"><input data-role="datepicker" name="end" data-bind="value: end" /></div>
</script>

对于如何做每一点，我建议你阅读以下内容：

• 剑道 MVVM 文档

• DatePicker文件

• NumericTextBox文件