columns.template String|Function

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

Use the template to customize the way the column displays its value.

For additional and more complex examples that utilize column templates, visit the Knowledge Base documentation, and use the following search terms:

• column template
• grid column template
• Column Template | Kendo UI Grid

Example - set the template as a string (wrap the column value in HTML)

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    template: "<strong>#: name # </strong>"
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

Example - set the template as a function returned by kendo.template

<div id="grid"></div>
<script id="name-template" type="text/x-kendo-template">
  <strong>#: name #</strong>
</script>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    template: kendo.template($("#name-template").html())
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

Example - set the template as a function which returns a string

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    template: function(dataItem) {
      return "<strong>" + kendo.htmlEncode(dataItem.name) + "</strong>";
    }
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>