Row Templates
The Kendo UI Grid supports row templates which enable you to place custom content into a Grid row.
For runnable examples, refer to:
- Demo on using the row template of the Grid
- Demo on using the detail-row template of the Grid
- Demo on using the toolbar template of the Grid
If you initialize the Grid from a <div> element, you can format any cell within the Grid by using templates within a script tag or within the template option on the column object.
The following example demonstrates how to use a template for formatting the email address as a hyperlink through a template declared in a script block.
Example
<script id="template" type="text/x-kendo-tmpl">
<tr>
<td>
#= firstName #
</td>
<td>
#= lastName #
</td>
<td>
<a href="mailto:#= email #">#= email #</a>
</td>
</tr>
</script>
The following example demonstrates how to specify the previous approach as a template for each row by passing it in to the rowTemplate option and by initializing it with the kendo.template function. As a result, the email address is an interactive hyperlink which opens a new email message when the user clicks it.
Example
$("#grid").kendoGrid({
rowTemplate: kendo.template($("#template").html()),
// other configuration
});
Figure 1: A Grid with an applied row template
