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