New to Kendo UI for jQueryStart a free 30-day trial

Show Gantt Task Progress Handle When Using Task Template

Environment

ProductProgress® Kendo UI® Gantt for jQuery
Operating SystemAll
BrowserAll
Preferred LanguageJavaScript

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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support