Editor template and resource editor

[Rami]

Hello,

 

I am in need of a custom editor for the Gantt task because I need to validate and/or have a dropdown for a field. I can see how to achieve that by following https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template but that doesn't show me how I can get the resource editor to work. Neither have I found anything from searching the Internet or these forums.

 

So my question is, how to achieve the normal resource editor for Gantt tasks while using a custom editor template?

[Dimitar]

Hello Rami,

The assignments of a Gantt Task resources can be set through the assignments object, which creates a one-to-one mapping between a gantt task and a gantt resource containing the number of units for which a resource is assigned to a task. This can be also observed on the Gantt Resources Demo.

To further transform a column to allow editing, the Gantt's column.editable property has to be set to true. However, the current implementation of the Gantt widget does not offer build-in support for column templates. One could manually inject additional DOM content though, as demonstrated on the following Dojo example.

There is already a similar feature request logged in our Feedback Portal for providing support for column templates. I would suggest voting for this request, as usually highly demanded features get approved and subsequently implemented with precedence in future releases of Kendo UI.  

 

Regards,
Dimitar
Progress Telerik

[Rami]

Hello Dimitar,

 

If I understood you correctly, I would have to write my own resource editor that manipulated the assignments object? No way to launch the default resource editor from a custom editor template? I mean the editor that launches by pressing the "Assign"-button in the attached image.

[Dimitar]

Hello Rami,

I have prepared a Dojo example, where a similar scenario to the one described is demonstrated (Opening the Gantt resource editor from a custom editor template).

To achieve the desired result, I have followed these steps:

1) Configure the custom editor template through the Gantt's editable option:

editable: {
  template: $("#editor").html()
}

2) Add the required resources markup to the template:

<script id="editor" type="text/x-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>
</script>

3) Subscribe to the Gantt edit and save events:

edit: onEdit,
save: onSave

4) Handle the edit event, to get a reference to the editor popup and attach a click handler that will programmatically open the resource editor through the _createResourceEditor() method. Upon saving the data call the _updateAssignments() method to update the item resources:

<script>
  var resoucesdEdited = false;

  function onEdit(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 onSave(e) {
    if (e.task && resoucesdEdited) {
      this._updateAssignments(e.task.get("id"), e.task.get(this.resources.field));
    }
  }
</script>

Regards,
Dimitar
Progress Telerik

[Rami]

Hello Dimitar,

 

That seems to be exactly what I was looking for. Thank you very much.