Expressions

Back

Basic template

var inlineTemplate = kendo.template("Hello, #= firstName # #= lastName #");
var inlineData = { firstName: "John", lastName: "Doe" };
$("#inline").html(inlineTemplate(inlineData));

Output:

Template as script element

<script id="scriptTemplate" type="text/x-kendo-template">
    Hello, #= firstName # #= lastName #
</script>

<script>
    var scriptTemplate = kendo.template($("#scriptTemplate").html());
    var scriptData = { firstName: "John", lastName: "Doe" };
    $("#script").html(scriptTemplate(scriptData));
</script>

Output:

Encoding HTML

var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
var encodingData = { html: "<strong>lorem ipsum</strong>" };
$("#encoding").html(encodingTemplate(encodingData));

Output:

Using JavaScript code inside the template definition

<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    # for (var i = 0; i < data.length; i++) { #
        <li>#= data[i] #</li>
    # } #
    <ul>
<script>

<script>
    var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
    var javascriptData = ["First", "Second", "Third"];
    $("#javascript").html(javascriptTemplate(javascriptData));
<script>

Output: