JQuery

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!

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs