New to Kendo UI for jQuery? Download free 30-day trial

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.

<script id="template" type="text/x-kendo-tmpl">
            #= firstName #
            #= lastName #
            <a href="mailto:#= email #">#= email #</a>

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.

    rowTemplate: kendo.template($("#template").html()),
   // Other configuration.

Figure 1: A Grid with an applied row template

Grid with row template

KB Articles on Row Templates

See Also

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