Post
Ask Question

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 :
  1. <!-- add the at least required css-->  
  2. <!-- start of Kendo UI jQuery related CSS-->  
  3. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css">  
  4. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.rtl.min.css">  
  5. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default.min.css">  
  6. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.mobile.all.min.css">  
  7. <!-- end of Kendo UI Jquery related CSS-->  
  8.   
  9. <!-- add the kendo ui library-->  
  10. <!-- start of Kendo UI jQuery Scripts-->  
  11. <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>  
  12. <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jszip.min.js"></script>  
  13. <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>  
  14. <!-- end of Kendo UI jQuery Scripts-->  
Full layout structure
  1. @{    
  2.     Layout = null;    
  3. }    
  4. <!DOCTYPE html>    
  5. <html>    
  6. <head>    
  7.     <meta name="viewport" content="width=device-width" />    
  8.     <title>__Layout</title>    
  9.     <!-- add the at least required css-->    
  10.     <!-- start of Kendo UI jQuery related CSS-->    
  11.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css">    
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.rtl.min.css">    
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default.min.css">    
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.mobile.all.min.css">    
  15.     <!-- end of Kendo UI Jquery related CSS-->    
  16.     @RenderSection("styles", required: false)    
  17.     <!-- add the kendo ui library-->    
  18.     <!-- start of Kendo UI jQuery Scripts-->    
  19.     <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>    
  20.     <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jszip.min.js"></script>    
  21.     <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>    
  22.     <!-- end of Kendo UI jQuery Scripts-->    
  23. </head>    
  24. <body>    
  25.     <div>    
  26.         @RenderBody()    
  27.     </div>    
  28. </body>    
  29. @RenderSection("script", required: false)    
  30. </html>    
Layout structure usage within the project structure:

kendo-ui-template-sturcture
 

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. 
  1. //define a simple template  
  2. var template = kendo.template("<p>#= myContent #</p>");  
  3.   
  4. //call the template referencing kendo.template and pass the data content  
  5. var result = template({ myContent: 'This is the content i need to see' });  
  6.   
  7. //set the html of output div with the variable result  
  8. $("#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
  1. @{  
  2.     ViewBag.Title = "InlineTemplate";  
  3.     Layout = "~/Views/Shared/__Layout.cshtml";  
  4. }  
  5.   
  6. @section styles{  
  7.     <style>  
  8.         .myParagraphClass {  
  9.             color: red;  
  10.             font-size: large;  
  11.         }  
  12.     </style>  
  13. }  
  14. <div id="output"></div>  
  15.   
  16. @section script{  
  17.   
  18.     <script>  
  19.   
  20.         //define an inline kendo template  
  21.         var inlineTemplate = kendo.template("<p class='#= myCssClassName#'> #= myParagraphContent #</p>");  
  22.   
  23.         //deinfe the data and initialize the related properties  
  24.         var dataWithParameterToPass = { myCssClassName: "myParagraphClass", myParagraphContent: "This is the content i need to see and color red" };  
  25.   
  26.         //call the template referencing the kendo.template and pass the data content  
  27.         var result = inlineTemplate(dataWithParameterToPass);  
  28.   
  29.         console.log(result); //result => <p class='myParagraphClass'> This is the content i need to see and color red</p>  
  30.   
  31.         $("#output").html(result);  
  32.   
  33.     </script>  
  34. }  
Output
Kendo UI jQuery Templates
External Template
  1. @{  
  2.     ViewBag.Title = "ExternalTemplate";  
  3.     Layout = "~/Views/Shared/__Layout.cshtml";  
  4. }  
  5.   
  6. <div id="output">  
  7.   
  8. </div>  
  9.   
  10. <script type="text/x-kendo template" id="myExternalTemplate">  
  11.     <!-- Template content goes and starts here-->  
  12.     #console.log(data);#  
  13.     #if (header){#  
  14.     <h2>#=content#</h2>  
  15.     #}else{#  
  16.     #=content#  
  17.     #}#  
  18.     <!-- Template content ends here-->  
  19. </script>  
  20.   
  21. <script>  
  22.   
  23.     //initialize and get the external template  
  24.     var externalTemplate = kendo.template($("#myExternalTemplate").html());  
  25.   
  26.     //initialize an array that will be passed to the external template  
  27.     var data = [{ header: true, content: "Hello External Template" }, { header: false, content: "I'm a content" }];  
  28.   
  29.     var result = kendo.render(externalTemplate, data);  
  30.   
  31.     console.log(result); // result =>   
  32.                             /*<!-- Template content goes and starts here--> 
  33.      
  34.      
  35.                             <h2>Hello External Template</h2> 
  36.      
  37.                             <!-- Template content ends here--> 
  38.  
  39.                             <!-- Template content goes and starts here--> 
  40.      
  41.      
  42.                             I'm a content 
  43.      
  44.                             <!-- Template content ends here-->*/  
  45.   
  46.     $("#output").html(result);  
  47.   
  48. </script>  
Output
Kendo UI jQuery Templates 

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. 
  1. @{  
  2.     ViewBag.Title = "HtmlEncoding_DisplayValues";  
  3.     Layout = "~/Views/Shared/__Layout.cshtml";  
  4. }  
  5.   
  6. <div id="result">  
  7.   
  8. </div>  
  9. <script type="text/x-kendo template" id="htmlOutput">  
  10.     <pre>#:htmlContent#</pre>  
  11. </script>  
  12.   
  13. <script>  
  14.   
  15.     var template = kendo.template($("#htmlOutput").html());  
  16.   
  17.     var result = template({ htmlContent: "<h2>This is my header</h2><p><strong>I'm strong</strong></p>" });  
  18.   
  19.     console.log(result);  
  20.   
  21.     $("#result").html(result);  
  22.   
  23. </script>  
Output
Kendo UI jQuery Templates
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. 
  1. <!-- switch syntax -->  
  2. <!--  
  3.     #switch (condition){  
  4.         case value: #  
  5.             #=value#  
  6.         #break;#  
  7.         #case value: #  
  8.             #=value#  
  9.         #break;#  
  10.         #default:#  
  11.             #=value#  
  12.     #}#  
  13. -->  
  14. <!-- end of switch syntax -->  
  15.   
  16. <!-- if-else syntax -->  
  17. <!--  
  18.     #if (condition){#  
  19.         #=value#  
  20.     #}else{#  
  21.         #=value#  
  22.     #}#  
  23. -->  
  24. <!-- end of if-else syntax -->   
See the example below:
  1. @{  
  2.     ViewBag.Title = "Execute_Complex_JavaScriptCode";  
  3.     Layout = "~/Views/Shared/__Layout.cshtml";  
  4. }  
  5.   
  6. @section styles{  
  7.     <style>  
  8.         table {  
  9.             border-collapse: collapse;  
  10.             margin: auto;  
  11.         }  
  12.   
  13.         table, th, td {  
  14.             border: 1px solid black;  
  15.         }  
  16.   
  17.         .textItalic {  
  18.             font-style: italic;  
  19.             color: red;  
  20.         }  
  21.     </style>  
  22. }  
  23.   
  24. <div id="moviesContainer">  
  25.   
  26.     <table id="movies">  
  27.         <thead>  
  28.             <tr>  
  29.                 <th>Rank</th>  
  30.                 <th>Rating</th>  
  31.                 <th>Year</th>  
  32.                 <th>Title</th>  
  33.                 <th>Staffs</th>  
  34.             </tr>  
  35.         </thead>  
  36.         <tbody>  
  37.         </tbody>  
  38.     </table>  
  39.   
  40. </div>  
  41.   
  42. <!-- switch syntax -->  
  43. <!--  
  44.     #switch (condition){  
  45.         case value: #  
  46.             #=value#  
  47.         #break;#  
  48.         #case value: #  
  49.             #=value#  
  50.         #break;#  
  51.         #default:#  
  52.             #=value#  
  53.     #}#  
  54. -->  
  55. <!-- end of switch syntax -->  
  56.   
  57. <!-- if-else syntax -->  
  58. <!--  
  59.     #if (condition){#  
  60.         #=value#  
  61.     #}else{#  
  62.         #=value#  
  63.     #}#  
  64. -->  
  65. <!-- end of if-else syntax -->  
  66.   
  67. <script type="text/x-kendo template" id="movieTemplate">  
  68.     <tr>  
  69.         <td>#=rank#</td>  
  70.         <td>#=rating#</td>  
  71.         <td>  
  72.             #switch(year){  
  73.             case 1994:#  
  74.             <span>#=year# <sub>90's is awesome </sub></span>  
  75.             # break;#  
  76.             #default:#  
  77.             <span>#=year#</span>  
  78.             #break;#  
  79.             #}#  
  80.         </td>  
  81.         <td>#=title#</td>  
  82.         <td>  
  83.             <ul>  
  84.                 #for(var i=0;i< staffs.length; i++){#  
  85.                 #if(staffs[i] === "X"){#  
  86.                 <li class="textItalic">#=staffs[i]#</li>  
  87.                 #}else{#  
  88.                 <li>#=staffs[i]#</li>  
  89.                 #}#  
  90.                 #}#  
  91.             </ul>  
  92.         </td>  
  93.     </tr>  
  94. </script>  
  95.   
  96. @section script{  
  97.   
  98.     <script>  
  99.   
  100.         $(function () {  
  101.   
  102.             var movies = [  
  103.                 { 'rank': 1, 'rating': 9, 'year': 1994, 'title': 'Terminator', staffs: ['X', 'Y', 'Z'] },  
  104.                 { 'rank': 1, 'rating': 6, 'year': 2000, 'title': 'The God Father', staffs: ['X', 'Y', 'Z'] },  
  105.                 { 'rank': 1, 'rating': 5, 'year': 2000, 'title': 'Terminator 2', staffs: ['X', 'Y', 'Z'] },  
  106.                 { 'rank': 1, 'rating': 7, 'year': 2000, 'title': 'Terminator 3', staffs: ['X', 'Y', 'Z'] },  
  107.                 { 'rank': 1, 'rating': 8, 'year': 2000, 'title': 'Avengers The Movie', staffs: ['X', 'Y', 'Z'] }  
  108.             ];  
  109.   
  110.             var templateIdLocation = $("#movieTemplate"),  
  111.                 template = kendo.template(templateIdLocation.html());  
  112.   
  113.             var result = kendo.render(template, movies);  
  114.   
  115.             console.log(result);  
  116.   
  117.             $("#movies tbody").html(result);  
  118.   
  119.         });  
  120.     </script>  
  121.   
  122. }  
Output
Kendo UI jQuery Templates
 

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:
  1. @{  
  2.     ViewBag.Title = "MVVM_Kendo_UI_Template_Example";  
  3.     Layout = "~/Views/Shared/__Layout.cshtml";  
  4. }  
  5.   
  6. @section styles{  
  7.     <style>  
  8.         table {  
  9.             border-collapse: collapse;  
  10.             margin: auto;  
  11.         }  
  12.   
  13.         table, th, td {  
  14.             border: 1px solid black;  
  15.         }  
  16.   
  17.         .textItalic {  
  18.             font-style: italic;  
  19.             color:red;  
  20.         }  
  21.     </style>  
  22. }  
  23.   
  24.   
  25. <div id="moviesContainer">  
  26.     <table>  
  27.         <thead>  
  28.             <tr>  
  29.                 <td>Rank</td>  
  30.                 <td>Rating</td>  
  31.                 <td>Year</td>  
  32.                 <td>Title</td>  
  33.                 <td>Stafss</td>  
  34.             </tr>  
  35.         </thead>  
  36.         <tbody data-template="movieTemplate" data-bind="source: movies"></tbody>  
  37.     </table>  
  38. </div>  
  39.   
  40. <script type="text/x-kendo template" id="movieTemplate">  
  41.     <tr>  
  42.         <td>#=rank#</td>  
  43.         <td>#=rating#</td>  
  44.         <td>  
  45.             #switch(year){  
  46.             case 1994:#  
  47.             <span>#=year# <sub>90's is awesome </sub></span>  
  48.             # break;#  
  49.             #default:#  
  50.             <span>#=year#</span>  
  51.             #break;#  
  52.             #}#  
  53.         </td>  
  54.         <td>#=title#</td>  
  55.         <td>  
  56.             <ul>  
  57.                 #for(var i=0;i< staffs.length; i++){#  
  58.                 #if(staffs[i] === "X"){#  
  59.                 <li class="textItalic">#=staffs[i]#</li>  
  60.                 #}else{#  
  61.                 <li>#=staffs[i]#</li>  
  62.                 #}#  
  63.                 #}#  
  64.             </ul>  
  65.         </td>  
  66.     </tr>  
  67. </script>  
  68.   
  69. @section script{  
  70.   
  71.     <script>  
  72.   
  73.         $(function () {  
  74.   
  75.             var viewModel = kendo.observable({  
  76.                 movies: new kendo.data.DataSource({  
  77.                     data: [  
  78.                         { 'rank': 1, 'rating': 9, 'year': 1994, 'title': 'Terminator', staffs: ['X', 'Y', 'Z'] },  
  79.                         { 'rank': 1, 'rating': 6, 'year': 2000, 'title': 'The God Father', staffs: ['X', 'Y', 'Z'] },  
  80.                         { 'rank': 1, 'rating': 5, 'year': 2000, 'title': 'Terminator 2', staffs: ['X', 'Y', 'Z'] },  
  81.                         { 'rank': 1, 'rating': 7, 'year': 2000, 'title': 'Terminator 3', staffs: ['X', 'Y', 'Z'] },  
  82.                         { 'rank': 1, 'rating': 8, 'year': 2000, 'title': 'Avengers The Movie', staffs: ['X', 'Y', 'Z'] }  
  83.                     ]  
  84.                 })  
  85.             });  
  86.   
  87.             var divOutput = $("#moviesContainer");  
  88.   
  89.             kendo.bind(divOutput, viewModel);  
  90.         });  
  91.   
  92.     </script>  
  93. }  

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!


Similar Articles