Task Progress Shading

[Ken]

How do you color a task to represent the percent completion?

The demo's at https://demos.telerik.com/aspnet-core/gantt/task-template and https://demos.telerik.com/aspnet-core/gantt/api show it but I couldn't tell how it was being done.  I am looking to do something like these demo's do.

Thanks

Ken

[Dimitar]

Hello Ken,

Customizing the Gantt tasks markup in the specified demo, and in general, is achieved through the TaskTemplateId option. It allows you to specify a template that will be used for rendering the widget events. The template also receives the related data item and allows to use it inside the template through the special hash(#) syntax:

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
  .Name("gantt")
  ...
  .TaskTemplateId("task-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="../shared/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>

Refer to the Kendo UI Templates Overview article for additional information regarding the usage of templates.

Regards,
Dimitar
Progress Telerik