All Components
Theme

Themes

    Templates / Expressions

    Basic template

    Source:

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

    Output:

    Template as script element

    Source:

    <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

    Source:

    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

    Source

    <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:

    HTML5/JavaScript source

    API Reference
    • expressions.html

    Support & learning resources