Many years ago when I started my journey into the development world I was all about VB. Somewhere along that journey, I jumped over to C# because it made sense and all of my websites quickly transitioned to ASP.NET Web Forms. In order to make things look pretty I found UI for ASP.NET Ajax and many websites were born.
Over the past year I’ve been on a mission to move from the server to the client. Take advantage of newer technologies and features but one tool never left me in Telerik (now Progress). So although I’ve played with ReactJS, Angular and others, I keep coming back to Telerik and now we move to KendoUI for JQuery. Great libraries, ability to quickly create content without all of the crazy that goes along with React (for now). Thought for my normal readers it would be good to know why I’m posting about this because it doesn’t seem to make any sense on this blog.
So, what is the ask and the need. I really wanted to start using Kendo UI for my new SfB/Teams Portal I’m writing. And although I really love the new world of lots of JavaScript and objects there is something great about having externally referenced files for content. Templates. You know, those things we used since the dawn of time.
Kendo UI with External Templates
The Telerik team has created a great starting point with their post about External Template Loading. And although at first glance you would think that is enough it really isn’t for a handful of reasons. So lets start with the finished code and explain what is happening in each item:
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<!-- Kendo UI -->
<link rel="stylesheet" href="/styles/kendo/kendo.common.min.css" />
<link rel="stylesheet" href="/styles/kendo/kendo.material.min.css" />
<link rel="stylesheet" href="/styles/kendo/kendo.material.mobile.min.css" />
<script src="/javascript/kendo/jquery.min.js"></script>
<script src="/javascript/kendo/kendo.all.min.js"></script>
<!-- Global Custom JS -->
<!-- NOTE #1 -->
<script src="/javascript/global/templateloader.js"></script>
</head>
<body>
<!-- Note #2 -->
<div id="divContent"></div>
<script type="text/javascript">
// Note #3
templateLoader.loadExtTemplate("/views/templates/training-files.htm");
// Note #4
//Subscribe to the event triggered when the templates are loaded
//Do not load use templates before they are available
$(document).bind("TEMPLATE_LOADED", function(e, path) {
console.log('Templates loaded');
//Compile and cache templates
// Note #5
var template = kendo.template($("#TrainingFilesTemplate").html(),{useWithBlock:false});
var data = [];
var result = template(data);
//Replace Data
// Note #6
$("#divContent").html(result);
})
</script>
</body>
</html>
The first part that is of value to look at is the templateloader.js. This is a straight copy/paste directly from the above mentioned post from Telerik.
//Creates a gloabl object called templateLoader with a single method "loadExtTemplate"
var templateLoader = (function ($, host) {
//Loads external templates from path and injects in to page DOM
return {
//Method: loadExtTemplate
//Params: (string) path: the relative path to a file that contains template definition(s)
loadExtTemplate: function (path) {
//Use jQuery Ajax to fetch the template file
var tmplLoader = $.get(path)
.success(function (result) {
//On success, Add templates to DOM (assumes file only has template definitions)
$("body").append(result);
})
.error(function (result) {
alert("Error Loading Templates -- TODO: Better Error Handling");
})
tmplLoader.complete(function () {
//Publish an event that indicates when a template is done loading
$(host).trigger("TEMPLATE_LOADED", [path]);
});
}
};
})(jQuery, document);
In it, we are writing a function to load a template from file based on a singular parameter and that is the file path.
Note #2 is where we are going to put the content on the page. In our case, id=divContent.
Note #3 is where we actually load the file. We call the templateLoader function we added previously and specific the content of the file. In my case, the file content is simply a single paragraph. The key is the type and remember the ID.
<script type="text/x-kendo-template" id="TrainingFilesTemplate">
<p>
<span class="PageLabel2" style="font-weight: bold;">CLIENT (WINDOWS, MOBILE, ETC.)</span>
</p>
</script>
Note #4 is where we start to deviate from the provided text. A few reasons for this. First off, there is a straight up typo in the Telerik sample code. Load it and you will find a missing ) in the middle of the code. That will throw you at first.
There are two items of note I want to call out.
Note #5 is where we load the template file into a variable. If we don’t do this process of waiting, then the template file won’t load before we try to load it to the template variable and everything will fall apart. In this line we also see the useWithBlock set to false. There isn’t much for documentation on this but I did find this post which describes it really well. Basically, if you are going to use this template a lot then you want to set to false for performance.
As you can see, in my case I set data to a blank array. You of course would add whatever data you need there.
The very last line, Note #6, is where we actually replace the id=divContent with what we have in memory. And that is it. We have created our externally referenced template.
Happy Coding!
