Editor template and resource editor

5 posts, 1 answers
  1. Rami
    Rami avatar
    19 posts
    Member since:
    Sep 2017

    Posted 13 Feb Link to this post

    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?

  2. Dimitar
    Admin
    Dimitar avatar
    454 posts

    Posted 15 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Rami
    Rami avatar
    19 posts
    Member since:
    Sep 2017

    Posted 16 Feb in reply to Dimitar Link to this post

    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.

  4. Answer
    Dimitar
    Admin
    Dimitar avatar
    454 posts

    Posted 20 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Rami
    Rami avatar
    19 posts
    Member since:
    Sep 2017

    Posted 20 Feb in reply to Dimitar Link to this post

    Hello Dimitar,

     

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

Back to Top