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.
-
Show the task progress by adding a
div
with theprogress
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>
-
In the
dataBound
event handler of the Gantt, append adiv
with thek-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>