Telerik Kendo UI(Jquery) Templates Quick Hands On Overview and Reference

Kendo UI by Telerik is a powerful UI library it has support for jquery, anugular, react and it also has a wrapper for .Net MVC and the .Net Core. Installation and setting up the environment will not be discussed here. We will be going quickly over the various different ways to perform tempalting in Kedo UI(Jquery). This article can be used as a quick reference.

When i first used Kendo Template i got pretty confused because it is bare bones as compared to others which i was using previously i.e Jinja 2(Python) and Razor engine. Using Kendo Tempaltes inside Dot Net Razor was even more confusing(Actually reading other developers code ;) ) . So i decided to write a mini article with few samples for Jquery only and soon i will be writing another one for .Net. Lets start with template types

Template Type: Inline Template

Inline template comes really handy for small manipulation but i usually don’t prefer it or use it. But it’s good to know that it exists so that if some other developer is using it in code you may know what’s happening.

When to use? Use for smaller templates.

Code available At Github

Output

Things to notice Kendo has it’s own hash syntax. We are using two of them here

1. #= variableName #
   Used for Raw html i.e consume html tags properly as in our case 7 habits by Stephen is displayed as bold
2. #: variableName #
   Used for encoding html i.e display html tags as string. In our case you can see that instead of italics we ware displaying <i>Stephen</i>. Use it when data is coming from untrusted sources

Yes, it gets pretty confusing as both are similar just keep this page as bookmark and look back, with time it gets on hand and you won’t need to look back here

Template Type : Kendo External Template

External templates are used when we have larger template, more html and we can even use loops. Lets use the previous example to keep things simple and convert it to External Template

Code available At Github

The only difference is that we have introduced new script section which actually acts as html not as javascript(important thing to remember). This prevents the browser from executing it as javascript at runtime

<script id=”externalTemplate” type=”text/x-kendo-template”>

The second difference is that we are now using jquery to fetch this new external template

var template = kendo.template($("#externalTemplate").html());

External templates can include logic. We will discuss it below because obviously that’s where the true power and usefulness comes in. You are almost ready ;) but we also need to learn one more thing that is ‘Expressions’

Expressions

Kendo claims that for better performance instead of adding syntax sugar they opt to use plain javascript to execute expressions.

#if(yourCondtion){#
    <p> html here </p>
#} #

It’s simple you add # inside your template when you want to mark something as Javascript but important to note that you must end with # when JS code ends. Here is example just to cover case and to give you an idea

Just notice the # symbol it was pure javascript so there was no need to close it on each line. Just the start and the end. If you add html somewhere in the middle of this it will for sure break. In that scenario just close the JS with # and start it again after html ends

Finally Putting The Pieces Together External Templates + Conditions + Logic (Expressions) + Hash Syntax

So now let’s combine expressions and our previous books external template example but with some additional data to see things in action. This example will be using logic inside external template

Output of External template with logic

I added some additional data and attributes such as price and showPrice in existing data. All we have to do is be-careful about starting and ending of # symbol and use javascript as usual we do. I left a quick tip above in expressions section about # stuff

So, do you use Kendo ? What do you think about it?. Don’t forget to leave your thoughts in comments

Github Code Ref