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="https://demos.telerik.com/kendo-ui/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>