New to Kendo UI for jQuery? Download free 30-day trial

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>
    
In this article