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:

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

Grid with row template

See Also

In this article
Not finding the help you need? Improve this article