KendoUI-Figure_bigger

What is a Template?

more...

Kendo UI provides a concept of encapsulated html/javascript that can have additional markup to hold repeated, variable data. There are multiple ways to declare, store and use templates. There does not appear to be documentation on the Kendo UI site specifically covering the entirety of templates, so I am going to attempt to collect some here based on examples I find and uses I develop that are reusable. If you come across this and know of a more complete or authoritative source of information please add in the comments.

The Kendo template is not a single implementation or technique to be defined. So I will attempt to arrange a series of template implementations along a range of complexity.

  • The simplest might be an inline declaration that is part of a dataSource definition for a grid.
  • In the middle might be a template defined in a script tag that is bound to a Kendo Observable object that replaces a named div tag and includes some JavaScript
  • The most complex might be an external script file that can be used in multiple documents as a mutable form definition and makes extensive use of abstracted JavaScript.

Kendo Template Definition Methods

  • Script I find the concept of stuffing anything you want inside script tags convenient and readable, if a bit hacky, but it is a popular technique. Kendo UI uses it so you can create a template that looks like the HTML and JavaScript that will be derived from it.
<script id="template" type="text/x-kendo-template">
anything html and Javascript can go here plus #template stuff inside these#
</script>
  • JavaScript object: According to Kendo UI these are equivalent. When the template is a simple one-liner it might be better to use a JavaScript declaration inline to keep everything in one place. Using the JavaScript approach for a complex template leads to readability problems. Since a template defined via script can be converted into a JavaScript Template Object via:
var template = kendo.template($("#template").html());

…there is no reason to use a Javascript declaration to define a template.

See Example...

 Template Inclusion Syntax

Kendo lists the very limited template syntax in their documentation:

  1. Render literal values: #= #
  2. Render HTML-encoded values: #: #
  3. Execute arbitrary JavaScript code: # if(…){# … #}#

They note that you can escape any literal “#” in JavaScript strings using “\\#” and in HTML script templates using “\#”.

escaped vs. unescaped example:

See Example...

Kendo does not employ any other syntax inside templates. The design decisions around using the # delimiter for templates is refreshingly public. Kendo’s Template overview is buried here.

Simplest Template Applications

 

Inline JavaScript by assignment:

In the context of a Kendo object definition, such as kendoGrid columns:

Template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'

or
Populating a list view so that data elements returned by the dataSource are displayed within the list. For example:

 template: "#:name#"

A template can be applied to a div tag, replacing it’s contents with a mix of static template contents and variable data.

more...

Intermediate Template Applications

Use a template with Javascript to process a list and spit out an unordered list that replaces a target div:

See Example...