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

Template

methods

Compiles a template to a function that builds HTML. Useful when a template will be used several times. Templates offer way of creating HTML chunks. Options such as HTML encoding and compilation for optimal performance are available.

template

Parameters:templateString

The template that will be compiled.

Returns:Function

the compiled template as a JavaScript function. When called this function will return the generated HTML string.

<span id="output"></span>
<script>
var template = kendo.template("Hello, #= firstName # #= lastName #");
var data = { firstName: "John", lastName: "Doe" };
$("#output").html(template(data));
</script>

<span id="output"></span>
<script>
var template = kendo.template("HTML tags are encoded: #: html #");
var data = { html: "<strong>lorem ipsum</strong>" };
$("#output").html(template(data));
</script>

<span id="output"></span>
<script>
var template = kendo.template("#if (foo) {# foo is true #}#");
var data = { foo: true };
$("#output").html(template(data));
</script>

<span id="output"></span>
<script>
var template = kendo.template("<a href='\\#'>link</a>");
$("#output").html(template({}));
</script>

<span id="output"></span>
<script type="text/x-kendo-template" id="template">
<a href="\#">link</a>
</script>
<script>
var template = kendo.template($("#template").html());
$("#output").html(template({}));
</script>

<div id="example"></div>
<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    # for (var i = 0; i < data.length; i++) { #
        <li>#= myCustomFunction(data[i]) #</li>
    # } #
    </ul>
</script>
<script type="text/javascript">
    // Use a custom function inside the template and define it in the global JavaScript scope.
    function myCustomFunction (str) {
        return str.replace(".", " ");
    }
    // Get the external template definition by using a jQuery selector.
    var template = kendo.template($("#javascriptTemplate").html());
    // Create some dummy data.
    var data = ["Todd.Holland", "Steve.Anglin", "Burke.Ballmer"];
    var result = template(data); //Execute the template
    $("#example").html(result); //Append the result
</script>