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:

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

Basic Usage of the Kendo UI

HTML Design

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<title></title>
</head>
<body>
<div class="container" id="example1"></div>
<script id="product-template1" type="text/x-kendo-template">
<h3>Kendo UI Template with current date </h3>
</br>
<article>
<time> #= new Date().toLocaleDateString() #</time>
</article>
</script>
<script>
var template1 = kendo.template($("#product-template1").html());
$('#example1').html(template1);
</script>
</body>
</html>

The Result in Browser

Working with Data source in Kendo Template

HTML Design

<div id="products"></div>
<script type="text/x-kendo-template" id="template">
<table class="tabl">
<tr>
<td><label>FIRST NAME:</label></td>
<td><label> #:FirstName# </label></td>
</tr>
<tr>
<td><label>LAST NAME:</label></td>
<td><label> #:LastName# </label></td>
</tr>
</table>
</script>

JavaScript

$(function () {
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
data: [
{FirstName: "Arun",LastName:"Kumar" },
{ FirstName: "Sathyian",LastName:"Rathinam"}
],
change: function () {
$("#products").html(kendo.render(template, this.view()));
}
});
dataSource.read();
});

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<title></title>
</head>
<body>
<div id="products"></div>
<script type="text/x-kendo-template" id="template">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="form-inline">
<label>Product Name:</label>
<label style="color:green"> #:ProductName# </label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="form-inline">
<label>Unit Price:</label>
<label style="color:green"> #:UnitPrice# </label>
</div>
</div>
</div>
</div>
</script>
</body>
</html>

JavaScript

$(function () {
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/Products",
dataType: "json"
}
},
change: function () {
$("#products").html(kendo.render(template, this.view()));
}
});
dataSource.read();
});

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!

13 Comments

Join the conversation! Your thoughts help the community grow.

Arul R11y ago
Nice share!!!
Ankit Bansal11y ago
nice one..thanks for sharing with us..
- Gowtham K11y ago
  Thanks a lot
Nilesh Jadav11y ago
Good Share !!
- Gowtham K11y ago
  Thank You
Harshad Pansuriya11y ago
Nice one
- Gowtham K11y ago
  Thank You
Kamlesh Bhor11y ago
Thanks for sharing...
- Gowtham K11y ago
  Thank you
Priyaranjan K S11y ago
Nice Share
- Gowtham K11y ago
  Thank You
Mukesh Kumar11y ago
Good Job
- Gowtham K11y ago
  Thank You