Templates

The Kendo UI Gantt allows you to load a template for its tasks.

This example illustrates how to use template to customize the appearance of the tasks. You can use the task-template prop to define a function that return built HTML through kendo.template.

<style>
  /*center treelist cell content vertically*/
  .k-gantt .k-treelist td
  {
      vertical-align: middle;
  }

  /*hide the resource labels, as they are present in the task template*/
  .k-gantt .k-resource
  {
      display: none;
  }

  /*style the task template*/
  .k-task-template {
      height: 100%;
      padding: 0 !important;
  }

  .template {
      height: 100%;
      overflow: hidden;
  }

  .resource-img {
      float: left;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin: 8px;
  }

  .wrapper {
      padding: 8px;
      color: #fff;
  }

  .k-task-template .wrapper > * {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .title {
      font-weight: bold;
      font-size: 13px;
  }

  .resource {
      text-transform: uppercase;
      font-size: 9px;
      margin-top: .5em;
  }

  .progress
  {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0%;
      height: 4px;
      background: rgba(0, 0, 0, .3);
  }
</style>
<div id="vueapp" class="vue-app">
    <kendo-ganttdatasource ref="ganttdatasource1"
                           :transport-read-url="serviceRoot + '/GanttTasks'"
                           transport-read-data-type="jsonp"
                           :transport-update-url="serviceRoot + '/GanttTasks/update'"
                           transport-update-data-type="jsonp"
                           :transport-create-url="serviceRoot + '/GanttTasks/create'"
                           transport-create-data-type="jsonp"
                           :transport-destroy-url="serviceRoot + '/GanttTasks/destroy'"
                           transport-destroy-data-type="jsonp"
                           :transport-parameter-map="parameterMap"
                           schema-model-id="id"
                           :schema-model-fields="fields"
                           :resources="resources"
                           :assignments="assignments">
    </kendo-ganttdatasource>

    <kendo-ganttdependencydatasource ref="ganttdependencydatasource1"
                                     :transport-read-url="serviceRoot + '/GanttDependencies'"
                                     transport-read-data-type="jsonp"
                                     :transport-update-url="serviceRoot + '/GanttDependencies/update'"
                                     transport-update-data-type="jsonp"
                                     :transport-create-url="serviceRoot + '/GanttDependencies/create'"
                                     transport-create-data-type="jsonp"
                                     :transport-destroy-url="serviceRoot + '/GanttDependencies/destroy'"
                                     transport-destroy-data-type="jsonp"
                                     :transport-parameter-map="parameterMap"
                                     schema-model-id="id"
                                     :schema-model-fields="dependencyfields">
    </kendo-ganttdependencydatasource>

    <kendo-gantt id="gantt"
                 data-source-ref="ganttdatasource1"
                 dependencies-data-source-ref="ganttdependencydatasource1"
                 :show-work-hours="false"
                 :show-work-days="false"
                 :snap="false"
                 :height="'700'"
                 :resources="resources"
                 :assignments="assignments"
                 :row-height="64"
                 :task-template="getTaskTemplate">
        <kendo-gantt-view :type="'day'"></kendo-gantt-view>
        <kendo-gantt-view :type="'week'" :selected="true"></kendo-gantt-view>
        <kendo-gantt-view :type="'month'"></kendo-gantt-view>
        <kendo-gantt-column :field="'title'" :title="'Title'" :editable="true" :sortable="true"></kendo-gantt-column>
        <kendo-gantt-column :field="'resources'" :title="'Assigned Resources'" :editable="true" :sortable="true"></kendo-gantt-column>
    </kendo-gantt>
    <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>
</div>
Vue.use(DataSourceInstaller);
Vue.use(GanttInstaller);

new Vue({
    el: '#vueapp',
    data: {
      serviceRoot: "https://demos.telerik.com/kendo-ui/service",
      resources: {
        field: "resources",
        dataColorField: "Color",
        dataTextField: "Name",
        dataSource: {
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/GanttResources",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { from: "ID", type: "number" }
                    }
                }
            }
        }
      },
      assignments: {
        dataTaskIdField: "TaskID",
        dataResourceIdField: "ResourceID",
        dataValueField: "Units",
        dataSource: {
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/GanttResourceAssignments",
                    dataType: "jsonp"
                },
                update: {
                    url: "https://demos.telerik.com/kendo-ui/service/GanttResourceAssignments/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "https://demos.telerik.com/kendo-ui/service/GanttResourceAssignments/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/GanttResourceAssignments/Create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read") {
                        return { models: kendo.stringify(options.models || [options]) };
                    }
                }
            },
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { type: "number" },
                        ResourceID: { type: "number" },
                        Units: { type: "number" },
                        TaskID: { type: "number" }
                    }
                }
            }
        }
      },
      fields: {
          id: { from: 'ID', type: 'number' },
          orderId: { from: 'OrderID', type: 'number', validation: { required: true } },
          parentId: { from: 'ParentID', type: 'number', defaultValue: null, validation: { required: true } },
          start: { from: 'Start', type: 'date' },
          end: { from: 'End', type: 'date' },
          title: { from: 'Title', defaultValue: '', type: 'string' },
          percentComplete: { from: 'PercentComplete', type: 'number' },
          summary: { from: 'Summary', type: 'boolean' },
          expanded: { from: 'Expanded', type: 'boolean', defaultValue: true }
      },
      dependencyfields: {
          id: { from: 'ID', type: 'number' },
          predecessorId: { from: 'PredecessorID', type: 'number' },
          successorId: { from: 'SuccessorID', type: 'number' },
          type: { from: 'Type', type: 'number' }
      }
    },
    methods: {
        parameterMap: function(options, operation) {
           if (operation !== 'read') {
               return {models: kendo.stringify(options.models || [options])}
           }
        },
        getTaskTemplate: function (data) {
          return kendo.template(kendo.jQuery("#task-template").html())(data);
        }
    }
})

In this article