All Components
Theme

Themes

    Widget size

      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