In the previous post we see how to to use templates in our Kendo UI grids and how we could use functions in our templates to make the code more readable and easy to maintain.

We can, still, make more improvements over the code we saw in the last post. Let’s, first, remember how it worked.

We used a template:

{
field:null,
template: "#=generateObjectivesTemplate(data.Price,data.Qty,data.Objective)#"
}

And we implemented a function that returned the content to display:

function generateObjectivesTemplate(Price,Qty,Objective)
{
          if ((Price * Qty) > Objective)
          {
            return "<span> : -) </span>"
          }
          else
          {
            return (Price * Qty)+"<span> (: -() </span>"
          }
}

Now there is one thing bothering me about this implementation: we are using string concatenation to create the content to display. Once again, as the code grows in size, complexity it will lead to maintenance difficulties.

If you are using ES6 template literals you may get away with the above approach (after having rewritten it to take advantage of that ES6 feature ) , but if that is no the case it’s time to give a look at Kendo UI external templates.

Kendo UI external templates

We can use external templates  to rewrite the above example and keep the following advantages:

  • Reusability
  • Ability to include logic in an easy manner.

To declare external templates we use the tag using "text/x-kendo-template" as the script type. Just like this:

<script id="priceTemplate" type="text/x-kendo-template">
       <!-- template goes here ->
</script>

Notice we are assigning also the script tag an identifier:priceTemplate. We will be using this identifier later to retrieve and load the template.

The next step would be to actually define the content of the template. We will use HTML tags to lay the layout, and as we saw in the previous post we will use #= # to render the values:

<script id="priceTemplate" type="text/x-kendo-template">
       <b>#= Price#</b>
</script>

Now we can use this template in the Price column like this:

{
   field: 'Price',
   title: 'Price',
   template: $("#priceTemplate").html()
}

Adding JavaScript to our external Kendo UI Template

Now let’s create a template that contains logic: a template to replace the function generateObjectivesTemplate that we have seen at the beginning of this post.

In order to add JavaScript to an external template it suffices to use the same syntax we use in the in-line templates: we wrap our JavaScript lines between ##:

<script id="objectivesTemplate" type="text/x-kendo-template">
       #if ((Price * Qty) > Objective) {#
            <span> : -) </span>
       #} else {#
            #=(Price * Qty)# <span> (: -() </span>
       # }#
</script>

Now we replace this call:

{
field:null,
template: "#=generateObjectivesTemplate(data.Price,data.Qty,data.Objective)#"
}

with this one, and we are done:

{
field:null,
template: $("#objectivesTemplate").html()
}

Conclusion

In this post we have learned to use Kendo UI external templates, and see what their advantages are over the in-line templates we saw earlier.

The advantages of using external templates become more evident as the templates we want to create grow in complexity: templates that extensively use HTML tags, and JavaScript, if defined as in-line templates, are more difficult to maintain since we are mixing JavaScript with HTML.

So to keep our code in order we should either use Telerik external templates, or integrate Kendo UI with other JavaScript templating system (earlier in this post I mentioned ES Template literals, but you could also consider, for example,Handlebars: in the Telerik official documentation there are demos on how to integrate Handlebars with Kendo UI.

Also the usage of local external templates has its own drawbacks (I am sure you saw this one coming):

  • We cannot share the template between different pages: leads to problems reusing to code, and to evil code-and-paste.
  • Clutter: we have our templates defined in our page together with the rest of the markup.

The solution for that? Creating what we call remote external templates. In other words the template is not defined statically in the page but load via Ajax. This tactic allows us to really reuse the templates between different pages.

Thanks for reading. If you found this post useful you can subscribe to my blog to be notified of new posts.

Advertisements