Kendo UI Gantt - Custom Task Edit Template

Question

I have created a custom template for a task using this example:

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>

Now I need to add a 'Resources - Assign' button, just like the one in this example (Edit Task Form): http://demos.telerik.com/kendo-ui/gantt/resources

What do I need to do to create this button? I can't find any API documentation for this part of the Gantt control.

Answer 1

There are a few steps needed to accomplish this. First, add something like this to your Kendo template:

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

Next, you'll want to add the following two event handlers to the options when you initialize the widget:

edit: editHandler,
save: saveHandler

Finally, you'll want to create the two handlers referenced above. You are basically intercepting the default functionality and opening the popup yourself, then saving the results when complete (if they were modified).

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));
    }
}

I'm glad you asked this question because it's something I needed to know too, and you're right, the Telerik/Kendo documentation doesn't mention anything on how to do this!