columns.template String|Function

The template which renders the column content. The Gantt renders table rows (<tr>) which represent the data source items. Each table row consists of table cells (<td>) which represent the GanttList columns. By default, the HTML-encoded value of the field is displayed in the column.

To customize the way the column displays its value, use template.

Example - setting the template as a string (wrapping the column value in HTML)

<div id="gantt"></div>
<script>
  $("#gantt").kendoGantt({
    dataSource: [
      {
        id: 1,
        orderId: 0,
        parentId: null,
        title: "Task1",
        start: new Date("2014/6/17 9:00"),
        end: new Date("2014/6/17 11:00")
      },
      {
        id: 2,
        orderId: 1,
        parentId: null,
        title: "Task2",
        start: new Date("2014/6/17 12:00"),
        end: new Date("2014/6/17 14:00")
      },
      {
        id: 3,
        orderId: 2,
        parentId: null,
        title: "Task3",
        start: new Date("2014/6/17 13:00"),
        end: new Date("2014/6/17 15:00")
      }
    ],
    columns: [
      { field: "id" },
      { field: "title", template: "<strong>#: title #</strong>" }
    ]
  });
</script>

Example - setting an external template with conditional formatting and a button handler

<script type="text/x-kendo-template" id="template">
    # if (data.summary) { #
        <button class='k-button btn-summary'>Click summary</button>
    # } #
</script>

<div id="gantt"></div>

<script>
  $("#gantt").kendoGantt({
    dataSource: [
      {
        id: 1,
        orderId: 0,
        parentId: null,
        title: "Task1",
        summary: true,
        start: new Date("2014/6/17 9:00"),
        end: new Date("2014/6/17 11:00")
      },
      {
        id: 2,
        orderId: 1,
        parentId: null,
        title: "Task2",
        summary: false,
        start: new Date("2014/6/17 12:00"),
        end: new Date("2014/6/17 14:00")
      },
      {
        id: 3,
        orderId: 2,
        parentId: 1,
        title: "Task3",
        summary: false,
        start: new Date("2014/6/17 13:00"),
        end: new Date("2014/6/17 15:00")
      }
    ],
    columns: [
      { field: "id" },
      { field: "title" },
      { field: "summary", template: $("#template").html() }
    ]
  })
  .on("click", ".btn-summary", function(e) {
    var gantt = $(e.delegateTarget).data("kendoGantt");
    var dataItem = gantt.dataItem($(e.currentTarget).closest("tr"));
    alert("Summary clicked: " + dataItem.title)
  });
</script>