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
- <div id="template"></div>
- <script>
- var template = kendo.template("<div id='box'>#= firstname #</div>");
- var data = { firstName: "Todd" };
- var result = template(data)
- $("#tamplate").html(result)
- </script>
Uses HTML encoding to display values: #: #
Render an encoded HTML value in a template. The Kendo UI templates can automatically handle the encoding.
- <div id="template"></div>
- <script>
- var template = kendo.template("<div id='box'>#: firstname #</div>");
- var data = { firstName: "<b>Todd</b>" };
- var result = template(data)
- $("#tamplate").html(result)
- </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.
- <script id="javascriptTemplate" type="text/x-kendo-template">
- <ul>
- # for (var i = 0; i < data.length; i++) { #
- <li>#= data[i] #</li>
- # } #
- </ul>
- </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.
Join the conversation! Your thoughts help the community grow.