Kendo UI jQuery Templates

Introduction

In this article, we’re going to explore the Kendo UI Template for jQuery. Furthermore, on the server-side of things, ASP.NET MVC was used. We weren’t going to cover ASP.NET MVC here, because the focus is the Kendo UI jQuery templates. I know that sometimes or more often, we can’t ignore the combinations of two or more technologies, and consolidating into one solution.

Basically, using templates is a useful way to separate your markup and logic within your application to take advantage of maintainability. There are several types of JavaScript templating engines out there on the internet such as Mustache, Handlebars, jQuery Templates, and EJS just to name a few.

Before proceeding to the next section, I just want to point out the importance of learning this subject (Kendo UI template). Learning and mastering it, can be leverage all throughout the different components of Kendo UI for jQuery.

In this article, we are going to answer the following questions:

What is Kendo UI Template?
Types of Kendo UI Template

Difference between Inline Templates and External Templates

Kendo UI Template Syntax More Examples

HTML encoding to display values
Execute JavaScript code
Kendo UI Template using the MVVM pattern

Project Setup and Prerequisites

I know that there are a lot of ways to set up your dev environment with Kendo UI for jQuery. However, I won’t make it complex, I just want to make it simple for the demo purposes. I just used the CDNs, used by Telerik UI Dojo. Furthermore, inside the project, I just created the main layout, so it can be used by the entire Views. See the screenshot below and the related links and scripts using CDNs within the project layout.

For the list of Kendo UI for jQuery CDNs :

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>

Full layout structure

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>__Layout</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.mobile.all.min.css">
@RenderSection("styles", required: false)
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
@RenderSection("script", required: false)
</html>

Layout structure usage within the project structure:

What is Kendo UI Template?

It's basically a script block that contains a small section of page markup that is used by other Kendo UI widgets to display repeating content. Let's see a quick example below.

//define a simple template
var template = kendo.template("<p>#= myContent #</p>");
//call the template referencing kendo.template and pass the data content
var result = template({ myContent: 'This is the content i need to see' });
//set the html of output div with the variable result
$("#output").html(result); //=> => <p>This is the content i need to see</p>

Types of Kendo UI Template

Difference between Inline Template and External Templates

The main difference between the two is that inline templates are simple HTML content, defined as string while external-templates use a markup tag having a type of text/x-kendo template which has more complexities. Therefore, if you are going to use a complex JavaScript, I suggest using the external-templates. If not, meaning if it is just a straightforward template, use the inline-template. See the examples below.

Inline Template

@{
ViewBag.Title = "InlineTemplate";
Layout = "~/Views/Shared/__Layout.cshtml";
}
@section styles{
<style>
.myParagraphClass {
color: red;
font-size: large;
}
</style>
}
<div id="output"></div>
@section script{
<script>
//define an inline kendo template
var inlineTemplate = kendo.template("<p class='#= myCssClassName#'> #= myParagraphContent #</p>");
//deinfe the data and initialize the related properties
var dataWithParameterToPass = { myCssClassName: "myParagraphClass", myParagraphContent: "This is the content i need to see and color red" };
//call the template referencing the kendo.template and pass the data content
var result = inlineTemplate(dataWithParameterToPass);
console.log(result); //result => <p class='myParagraphClass'> This is the content i need to see and color red</p>
$("#output").html(result);
</script>
}

Output

External Template

@{
ViewBag.Title = "ExternalTemplate";
Layout = "~/Views/Shared/__Layout.cshtml";
}
<div id="output">
</div>
<script type="text/x-kendo template" id="myExternalTemplate">
#console.log(data);#
#if (header){#
<h2>#=content#</h2>
#}else{#
#=content#
#}#
</script>
<script>
//initialize and get the external template
var externalTemplate = kendo.template($("#myExternalTemplate").html());
//initialize an array that will be passed to the external template
var data = [{ header: true, content: "Hello External Template" }, { header: false, content: "I'm a content" }];
var result = kendo.render(externalTemplate, data);
console.log(result); // result =>
/*
<h2>Hello External Template</h2>
I'm a content
*/
$("#output").html(result);
</script>

Output

Kendo UI Template Syntax More Examples

Based on the previous examples, we have tacked the inline and external templates. Most of the examples are straightforward. Now, in this section, we are going to have more examples.

HTML encoding to display values

There are times, that you want to display HTML snippets within HTML. See the example below.

@{
ViewBag.Title = "HtmlEncoding_DisplayValues";
Layout = "~/Views/Shared/__Layout.cshtml";
}
<div id="result">
</div>
<script type="text/x-kendo template" id="htmlOutput">
<pre>#:htmlContent#</pre>
</script>
<script>
var template = kendo.template($("#htmlOutput").html());
var result = template({ htmlContent: "<h2>This is my header</h2><p><strong>I'm strong</strong></p>" });
console.log(result);
$("#result").html(result);
</script>

Output

Execute JavaScript code

Again, based on the previous examples, especially the external-template we have just shown the if-else syntax. In this example, we are going to cover the switch, for loop and if-else syntax. Just remember that the syntax has strict rules to follow in order for the if-else, switch and for loop to work.

<!--
#switch (condition){
case value: #
#=value#
#break;#
#case value: #
#=value#
#break;#
#default:#
#=value#
#}#
-->
<!--
#if (condition){#
#=value#
#}else{#
#=value#
#}#
-->

See the example below:

@{
ViewBag.Title = "Execute_Complex_JavaScriptCode";
Layout = "~/Views/Shared/__Layout.cshtml";
}
@section styles{
<style>
table {
border-collapse: collapse;
margin: auto;
}
table, th, td {
border: 1px solid black;
}
.textItalic {
font-style: italic;
color: red;
}
</style>
}
<div id="moviesContainer">
<table id="movies">
<thead>
<tr>
<th>Rank</th>
<th>Rating</th>
<th>Year</th>
<th>Title</th>
<th>Staffs</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--
#switch (condition){
case value: #
#=value#
#break;#
#case value: #
#=value#
#break;#
#default:#
#=value#
#}#
-->
<!--
#if (condition){#
#=value#
#}else{#
#=value#
#}#
-->
<script type="text/x-kendo template" id="movieTemplate">
<tr>
<td>#=rank#</td>
<td>#=rating#</td>
<td>
#switch(year){
case 1994:#
<span>#=year# <sub>90's is awesome </sub></span>
# break;#
#default:#
<span>#=year#</span>
#break;#
#}#
</td>
<td>#=title#</td>
<td>
<ul>
#for(var i=0;i< staffs.length; i++){#
#if(staffs[i] === "X"){#
<li class="textItalic">#=staffs[i]#</li>
#}else{#
<li>#=staffs[i]#</li>
#}#
#}#
</ul>
</td>
</tr>
</script>
@section script{
<script>
$(function () {
var movies = [
{ 'rank': 1, 'rating': 9, 'year': 1994, 'title': 'Terminator', staffs: ['X', 'Y', 'Z'] },
{ 'rank': 1, 'rating': 6, 'year': 2000, 'title': 'The God Father', staffs: ['X', 'Y', 'Z'] },
{ 'rank': 1, 'rating': 5, 'year': 2000, 'title': 'Terminator 2', staffs: ['X', 'Y', 'Z'] },
{ 'rank': 1, 'rating': 7, 'year': 2000, 'title': 'Terminator 3', staffs: ['X', 'Y', 'Z'] },
{ 'rank': 1, 'rating': 8, 'year': 2000, 'title': 'Avengers The Movie', staffs: ['X', 'Y', 'Z'] }
];
var templateIdLocation = $("#movieTemplate"),
template = kendo.template(templateIdLocation.html());
var result = kendo.render(template, movies);
console.log(result);
$("#movies tbody").html(result);
});
</script>
}

Output

Kendo UI Template using MVVM Pattern

Now, in this last section, we are going to convert our last example to the MVVM pattern in order for us to learn how to use Kendo UI templates in this kind of code convention. Thus, the example has the same output as the previous one.

Before looking at the entire example, a good point to mention is that with the MVVM pattern, the important attribute is the data-template and data-bind. Once used within your specific HTML tag, you need to specify your external template by setting the data-template while for the source of your data you need to set a data-bind attribute.

See the example below:

@{
ViewBag.Title = "MVVM_Kendo_UI_Template_Example";
Layout = "~/Views/Shared/__Layout.cshtml";
}
@section styles{
<style>
table {
border-collapse: collapse;
margin: auto;
}
table, th, td {
border: 1px solid black;
}
.textItalic {
font-style: italic;
color:red;
}
</style>
}
<div id="moviesContainer">
<table>
<thead>
<tr>
<td>Rank</td>
<td>Rating</td>
<td>Year</td>
<td>Title</td>
<td>Stafss</td>
</tr>
</thead>
<tbody data-template="movieTemplate" data-bind="source: movies"></tbody>
</table>
</div>
<script type="text/x-kendo template" id="movieTemplate">
<tr>
<td>#=rank#</td>
<td>#=rating#</td>
<td>
#switch(year){
case 1994:#
<span>#=year# <sub>90's is awesome </sub></span>
# break;#
#default:#
<span>#=year#</span>
#break;#
#}#
</td>
<td>#=title#</td>
<td>
<ul>
#for(var i=0;i< staffs.length; i++){#
#if(staffs[i] === "X"){#
<li class="textItalic">#=staffs[i]#</li>
#}else{#
<li>#=staffs[i]#</li>
#}#
#}#
</ul>
</td>
</tr>
</script>
@section script{
<script>
$(function () {
var viewModel = kendo.observable({
movies: new kendo.data.DataSource({
data: [
{ 'rank': 1, 'rating': 9, 'year': 1994, 'title': 'Terminator', staffs: ['X', 'Y', 'Z'] },
{ 'rank': 1, 'rating': 6, 'year': 2000, 'title': 'The God Father', staffs: ['X', 'Y', 'Z'] },
{ 'rank': 1, 'rating': 5, 'year': 2000, 'title': 'Terminator 2', staffs: ['X', 'Y', 'Z'] },
{ 'rank': 1, 'rating': 7, 'year': 2000, 'title': 'Terminator 3', staffs: ['X', 'Y', 'Z'] },
{ 'rank': 1, 'rating': 8, 'year': 2000, 'title': 'Avengers The Movie', staffs: ['X', 'Y', 'Z'] }
]
})
});
var divOutput = $("#moviesContainer");
kendo.bind(divOutput, viewModel);
});
</script>
}

Summary

In this article, we have discussed the following:

What is Kendo UI Template?
Types of Kendo UI Template

Difference between Inline Templates and External Templates

Kendo UI Template Syntax More Examples

HTML encoding to display values
Execute JavaScript code
Kendo UI Template using the MVVM pattern

I hope you have enjoyed this article, as I have enjoyed writing it. You can also find the sample code here at GitHub. Until next time, happy programming!