Working With Templates In Kendo UI

Gowtham K
9y
4.4k
0
1

Article

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!

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all