How to customize the editor in kendo gantt chart?

Question

When task is double clicked an editor pop up opens. I need to customize the following in this pop up.

1. Remove the task field.
2. Format Start and End date
3. Restrict start and end date according to business rules
4. Work load accepts floats btw 0-1. I need it to be 0-100 (int).
5. For some tasks, the pop-up should not open. (business demands it to be read- only).

Answer 1

This can easily be done with the editable.template property:

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

Here's an example of template:

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

For how to do each of the various points, I suggest you read the following:

• Kendo MVVM documentation

• DatePicker documentation

• NumericTextBox documentation