Show Gantt Task Progress Handle When Using Task Template

Environment

Product	Progress® Kendo UI® Gantt for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I display a task progress drag handle when I set a taskTemplate for the Gantt?

Solution

For the full implementation of the approach, refer to this Dojo example.

1. Show the task progress by adding a div with the progress class in the template.

       <script id="task-template" type="text/x-kendo-template">
           # if (resources[0]) { #
           <div class="template" style="background-color: #= resources[0].color #;">
               <img class="resource-img" src="../content/web/gantt/resources/#:resources[0].id#.jpg" alt="#: resources[0].id #" />
               <div class="wrapper">
                   <strong class="title">#= title # </strong>
                   <span class="resource">#= resources[0].name #</span>
               </div>
               <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div>
           </div>
           # } else { #
           <div class="template">
               <div class="wrapper">
                   <strong class="title">#= title # </strong>
                   <span class="resource">no resource assigned</span>
               </div>
               <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div>
           </div>
           # } #
       </script>
   

2. In the dataBound event handler of the Gantt, append a div with the k-task-draghandle class to the element which wraps the task.

       <script>
           var handleIsAppended = false;
   
           function onDataBound(e) {
               if(!handleIsAppended) {
                   $(".k-task-wrap").append("<div class='k-task-draghandle'></div>");
                   handleIsAppended = true;
               }
           }
       </script>