Post
Ask Question

Using Kendo UI Templates

Template Overview

A template is a form or pattern used as a guide to making something. It is pre-formatted in some way. A simple and consistent programming interface a rock-solid datasource, validation, internationalization of templates. A Kendo UI template provides high performance JavaScript templates in the UI framework. It offers creation of HTML chunks. The HTML chunks can be automatically merged with JavaScript data. Kendo UI templates will trade convenience for improved performance and distinguish from other JavaScript template libraries.

Template Syntax

There are three types of syntax available in Kendo UI Templates.

  • Render values as HTML: #= #
  • Uses HTML encoding to display values: #: #
  • Execute arbitrary JavaScript code: # if(...){# ... #}#

Render values as HTML: #= #

The render values as HTML is a most basic template is rendering a value as in a templates 

  1. <div id="template"></div>    
  2. <script>    
  3. var template = kendo.template("<div id='box'>#= firstname #</div>");    
  4. var data = { firstName: "Todd" };    
  5. var result = template(data)    
  6. $("#tamplate").html(result)    
  7. </script>  

Uses HTML encoding to display values: #: #

Render an encoded HTML value in a template. The Kendo UI templates can automatically handle the encoding. 

  1. <div id="template"></div>    
  2. <script>    
  3. var template = kendo.template("<div id='box'>#: firstname #</div>");    
  4. var data = { firstName: "<b>Todd</b>" };    
  5. var result = template(data)    
  6. $("#tamplate").html(result)    
  7. </script>  

Execute arbitrary JavaScript code: # if(...){# ... #}#

It is common for templates to include an expression. The Kendo UI template allows the execution of a normal JavaScript inside of a template. 

  1. <script id="javascriptTemplate" type="text/x-kendo-template">    
  2. <ul>   
  3. # for (var i = 0; i < data.length; i++) { #    
  4. <li>#= data[i] #</li>   
  5. # } #    
  6. </ul>    
  7. </script>  

These three types of syntax is a basic syntax for Kendo UI templates. Now we start to learn how to use the Kendo UI templates in a web application in ASP.NET. 

Creating ASP.NET Web Application

Step 1: Open Visual Studio 2012 and click on "New Project". 



Step 2: Select ASP.NET Empty Web Application and enter the name and browse the location then click on ok.
 
 

Visual Studio creates the empty application.

Step 3: Now, add the the New Folder named "Scripts".

 

Step 4: Add the new JavaScript file in under the Scripts folder.

Step 5: Add the new HTML page in the application.

 

Step 6: Now add the Kendo UI. In the Solution Explorer, just right-click on the application and click on Manage NuGet Packages.

 

Step 7: Now go to the search option and search the Kendo and install it.

 

Now the Kendo UI is installed in the application and you can find the Scripts folder and content folder.

Step 8: Now we will work with the Kendo UI. First update the HTML page code using the following code. 

  1. <!DOCTYPE html>      
  2. <html xmlns="http://www.w3.org/1999/xhtml">      
  3. <head>    
  4.     <title>Welcome to Kendo UI Template</title>      
  5.     <link href="Content/kendo/2014.1.318/kendo.default.min.css" rel="stylesheet" />      
  6.     <link href="Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />      
  7.     <script src="Scripts/kendo/2014.1.318/jquery.min.js"></script>      
  8.     <script src="Scripts/kendo/2014.1.318/kendo.web.min.js"></script>      
  9.     <script src="Scripts/JavaScript1.js"></script>      
  10. </head>      
  11. <body>      
  12.     <div>      
  13.         <input id="autocomplete" />     
  14.     </div>      
  15. </body>      
  16. </html> 

In the code above, some references that were added to the HTML page and the newly created JavaScript file reference are also added.

Step 9: Now update the JavaScript file using the following code. 

  1. /// <reference path="kendo/2014.1.318/kendo.web.min.js" />  
  2. /// <reference path="kendo/2014.1.318/jquery.min.js" />  
  3.   
  4. $(document).ready((function () {  
  5.     $("#autocomplete").kendoAutoComplete({  
  6.         dataSource: [  
  7.           { id: 1, name: "Apples" },  
  8.           { id: 2, name: "Oranges" },  
  9.           { id: 3, name: "Banana" },  
  10.           { id: 4, name: "Blackberry" },  
  11.           { id: 5, name: "Guava" },  
  12.           { id: 6, name: "Grapes" }  
  13.         ],  
  14.         dataTextField: "name",  
  15.         headerTemplate: '<div><h2>Fruits</h2></div>'  
  16.     });  
  17. }));  

In the code above, we created a datasource in the variety of fruits name and displayed the output using the header template.

Now go to the Solution Explorer and right-click on the HTML Page and click Set as start page and run the application.

 

Summary

This article described the use of the Kendo UI Template in a web application of ASP.NET. This article will help you to learn the Kendo UI Templates. Thanks for reading the article.


Similar Articles