Getting Started with the Inline Kendo UI Templates

This guide demonstrates how to define a Kendo UI Template by using JavaScript strings, which are suitable for small templates.

After the completion of this guide, you will be able to create and compile an inline template and display the returned HTML result, as demonstrated in the following example:

EditPreviewOpen In Dojo

    <div id="example"></div>
    <script>
      var templateString = "<b>Name: #: firstName #</b> --> Age: <i> #: age # </i>";

      var data = { firstName: "Todd", age: 16 };
      var template = kendo.template(templateString);
      var result = template(data); 
      $("#example").html(result); 
    </script>

1. Create the Inline Template

First, create the inline template by setting up a JavaScript string.

    var templateString = "<b>Name: #: firstName #</b> --> Age: <i> #: age # </i>";
    var template = kendo.template(templateString);

2. Compile the Template

Next, compile the inline template to a function that builds HTML by using the Kendo UI template method.

    var data = { firstName: "Todd", age: 16 };
    var template = kendo.template(templateString);
    var result = template(data);

3. Display the Returned HTML

You can now display the returned HTML. In the example below, the returned HTML from the template is set as a content to a div#example element.

    $("#example").html(result);

This is it! Now you are ready to dive more deeply into the Kendo UI Templates, learn how to define external templates, and use them in more advanced and complex scenarios!

Next Steps

• Loading Templates from External Files
• Demo Page for the Kendo UI Templates