Post
Ask Question

Working With Templates In Kendo UI

Introduction

Kendo UI Templates provide a simple to use, high-performance JavaScript templating engine in the Kendo UI Framework. Templates offer a way to create HTML chunks that can be automatically merged with JavaScript data.

Description

In this this article we are going to discuss the following topics: 

  1. Basic Usage of Template in Kendo UI.
  2. Working with Data source in Kendo template.
  3. Remote binding in kendo template.
Basic Usage of the Kendo UI

HTML Design

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  11.     <title></title>  
  12. </head>  
  13. <body>  
  14.     <div class="container" id="example1"></div>  
  15.     <script id="product-template1" type="text/x-kendo-template">  
  16.         <h3>Kendo UI Template with current date </h3>  
  17.         </br>  
  18.         <article>  
  19.             <time> #= new Date().toLocaleDateString() #</time>  
  20.         </article>  
  21.     </script>  
  22.     <script>  
  23.         var template1 = kendo.template($("#product-template1").html());  
  24.         $('#example1').html(template1);  
  25.     </script>    
  26.       
  27. </body>  
  28. </html>  

The Result in Browser

   
Working with Data source in Kendo Template

HTML Design

  1. <div id="products"></div>  
  2.   
  3. <script type="text/x-kendo-template" id="template">  
  4.     <table class="tabl">  
  5.         <tr>  
  6.             <td><label>FIRST NAME:</label></td>  
  7.             <td><label>  #:FirstName# </label></td>  
  8.         </tr>  
  9.         <tr>  
  10.             <td><label>LAST NAME:</label></td>  
  11.             <td><label>   #:LastName# </label></td>  
  12.         </tr>  
  13.           
  14.     </table>  
  15. </script>  

JavaScript

  1. $(function () {  
  2.           var template = kendo.template($("#template").html());  
  3.   
  4.           var dataSource = new kendo.data.DataSource({  
  5.                 
  6.               data: [  
  7.             {FirstName: "Arun",LastName:"Kumar"  },  
  8.             { FirstName: "Sathyian",LastName:"Rathinam"}  
  9.               ],  
  10.               change: function () {  
  11.                   $("#products").html(kendo.render(template, this.view()));  
  12.               }  
  13.           });  
  14.   
  15.           dataSource.read();  
  16.       });  

The Result in Browser

  
Remote Binding in Kendo Template using ASP.NET WEB API

I am going to use the following REST service to explain how to perform event handling in the Kendo Grid.

REST service end point: api/products.

Please refer my previous article Export grid data to excel in advance Kendo UI using MVC WEB API and Entity Framework to get an idea about how to create an ASP. NET WEB API Service.

The api/products service response in POSTMAN as in the following figure. 



Now it’s time to consume the REST service in the Kendo UI.

Create an HMTL page in your project, in my case I named it KendoTemplate.html.

Design in KendoTemplate.html 
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  11.     <title></title>  
  12. </head>  
  13. <body>  
  14. <div id="products"></div>  
  15.   
  16.     <script type="text/x-kendo-template" id="template">  
  17.         <div class="container">  
  18.             <div class="row">  
  19.                 <div class="col-lg-8">  
  20.                     <div class="form-inline">  
  21.                         <label>Product Name:</label>  
  22.   
  23.   
  24.                         <label style="color:green">  #:ProductName# </label>  
  25.                     </div>  
  26.                 </div>  
  27.                 </div>  
  28.           
  29.             <div class="row">  
  30.                 <div class="col-lg-8">  
  31.                     <div class="form-inline">  
  32.                         <label>Unit Price:</label>  
  33.                       
  34.                
  35.                         <label style="color:green">   #:UnitPrice# </label>  
  36.                     </div>  
  37.                 </div>  
  38.   
  39.             </div>  
  40.             </div>  
  41.     </script>  
  42. </body>  
  43. </html>   
JavaScript 
  1. $(function () {  
  2.            var template = kendo.template($("#template").html());  
  3.   
  4.            var dataSource = new kendo.data.DataSource({  
  5.   
  6.                transport: {  
  7.                    read: {  
  8.                        url: "api/Products",  
  9.                        dataType: "json"  
  10.                    }  
  11.                },  
  12.                change: function () {  
  13.                    $("#products").html(kendo.render(template, this.view()));  
  14.                }  
  15.            });  
  16.   
  17.            dataSource.read();  
  18.        });       
Result in Browser

 
Conclusion

From this article we learned how to use the Kendo template in a basic way with data source and with the remote binding using WEB API.

I hope you enjoyed this article. Thank you!


Similar Articles