columns.template String|Function

The template which renders the column content. The TreeList renders table rows (<tr>) which represent the data source items. Each table row consists of table cells (<td>) which represent the TreeList 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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position", template: "<strong>#: position #</strong>" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
        { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
      ]
    }
  });
</script>

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

<div id="treelist"></div>

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

<script>
$("#treelist")
  .kendoTreeList({
    columns: [
      { field: "name" },
      { template: $("#template").html() }
    ],
    dataSource: [
      { allowVote: true, name: "Jane Doe" },
      { allowVote: true, name: "Joseph Doe" },
      { name: "John Doe" }
    ]
  })
  .on("click", ".btn-vote", function(e) {
    var treelist = $(e.delegateTarget).data("kendoTreeList");
    var dataItem = treelist.dataItem(e.currentTarget);
    alert("Voted for " + dataItem.name)
  });
</script>