New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Templates

To customize the way the tasks of the Gantt are rendered, use the TaskTemplateId configuration option.

Razor

    @(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
        .Name("gantt")
        .Columns(columns =>
        {
            columns.Bound(c => c.Title).Editable(true).Sortable(true);
            columns.Resources("resources").Editable(true).Title("Assigned Resources");
        })
        .Views(views =>
        {
            views.DayView();
            views.WeekView(weekView => weekView.Selected(true));
        })
        .Height(700)
        .TaskTemplateId("task-template")
        .RowHeight(62)
    )

     <!-- 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>

For a runnable example, refer to the Task Templates demo.

For more information on the capabilities and syntax of the templates, refer to the Kendo UI Templates Overview documentation article.

Templates

See Also