This article will help to show you what options are available when incorporating ColdFusion with Kendo UI. We will discuss the open source and commercial versions of Kendo UI, the various sources that can be used, how to incorporate Kendo UI libraries with ColdFusion, and how to lazy load the library sources.

Table of Contents

Determine if you want to use Kendo jQuery or Kendo Core

If you don't already own a Kendo license, you first need to determine which Kendo UI version you want to use. I have covered the different versions along with the licensing models here.

In a nutshell, if you have a large set of data that you want to share and need the power of the Kendo UI grids, you will need a professional license for Kendo for jQuery. If you don't want to spend money and are mainly interested in adding cool HTML5 widgets to an existing page or want to open source your project, go with Kendo Core. You also can use the professional Kendo for jQuery for 30 days if you want to investigate Kendo UI.

I will cover both versions in this article.

Download the Kendo UI software or use the CDN

There is a debate in the developer community regarding using self-hosting your libraries or using a Content Delivery Network (CDN).

Using a CDN is generally preferred if you have a large website with users from a wide variety of different locations. It is commonly accepted that you don't need a CDN if you have a website with the majority of users from one location or a website that will not generate a lot of traffic, such as a site running on a local intranet.

I am not going to wade into the details of this argument more but there is another important concern to consider if you want to use Kendo Core.

In the past, Telerik, the former company that provided Kendo, completely scrubbed their previous open-source version of Kendo UI. Unlike the current Kendo Core version, the former open-source Kendo version, Kendo UI Web Open Source, had support for the immensely popular Kendo UI grids. Telerik made a business decision to rebrand the new Kendo UI open source as Kendo Core and removed support for the grids and a lot of other widgets. In a matter of days, it was nearly impossible to find this open-source software anymore.

My ColdFusion readers can probably relate and remember when Mura, a popular open-source CMS, suddenly eliminated all of its open-source packages from the net.

If you decide to use the CDN to host Kendo Core, be sure to download the latest version and store it as a backup. You may need it if the CDN suddenly no longer supports Kendo Core.

Kendo Professional for jQuery Recommended Sources

Kendo Core Recommended Sources

jQuery Version Support

If you are using Kendo Professional, please check the Telerik site regarding official jQuery support for the version that you are using at https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support. However, take Teliriks default recommendations with a grain of salt.

I have noticed that the default versions that Telerik recommends are quite old and have some known security issues. Most of the modern Kendo UI Professional versions support jQuery 3.5.1 and this version of jQuery is secure and quite stable when using Kendo.

jQuery is already included in the professional installation packages, so if you are already on a fast and secure private intranet, you can use the included default jQuery library from your installation, however, I would still consider upgrading your jQuery to 3.5.1.  

If you are using Kendo Core, I recommend using jQuery 3.4.1. I have tested scores of jQuery versions with Kendo Core and v3.4.1 is the latest version that I could get working with Kendo Core. This is the jQuery version that I am using here with Galaxie Blog.

jQuery Recommended Sources

When it comes to the CDN argument, jQuery is a completely different beast than Kendo UI or any other software. jQuery is hosted on Google's Hosted Libraries CDN which is one of the fastest and most geographically diverse content delivery networks in the world. Since jQuery is one of the most widely used software libraries with over 75% of the websites using it, your end-users likely already have a primed jQuery cached in their browsers from Google's network. Here I would strongly recommend using Google's CDN when incorporating jQuery, it will be the fastest way to deliver jQuery to the client devices,  however, the choice is yours.

Add the required libraries on a web page

Once you have the required libraries in place, it is time to use them on a web page. When using Kendo UI for jQuery, this process is identical for all the web languages, whether it's PHP or ColdFusion.

  1. If you're self-hosting, upload Kendo UI and jQuery to your web server
  2. Use <!DOCTYPE html> in the very first line of the code. This will inform the browser that this page should be rendered as an HTML5 page.
  3. Include Kendo UI Javascript and CSS files into the head tag of your file
    1. jQuery needs to be loaded before the Kendo UI script
    2. Place the common base Kendo UI stylesheet before the theme stylesheet.

Kendo UI Professional Code Examples

Here is a sample if you are self-hosting and using the default Kendo Professional scripts:

<!DOCTYPE html>
<head>
<!-- Load jQuery from the default Kendo installation, though you should consider using Google's CDN instead. -->
<script src="/common/libs/kendo/js/jquery.min.js"></script>
<!-- Load Kendo -->
<script src="/common/libs/kendo/js/kendo.all.min.js"></script>
<link href="/common/libs/kendo/styles/kendo.common.min.css" rel="stylesheet">
<!-- Load the Kendo theme style. -->
<link href=" /common/libs/kendo/styles/kendo.metro.min.css" rel="stylesheet">
</head>

Here is an example if you want to use one of the CDNs:

<!DOCTYPE html>
<head>
<!-- Load jQuery from Googles CDN -->
<script
	  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
	  crossorigin="anonymous"></script>
<!-- Load Kendo UI -->
<script src="http://kendo.cdn.telerik.com/<cfoutput>#kendoVersion#</cfoutput>/js/kendo.all.min.js"></script>
<!-- Load the stylesheets -->
<link href="http://kendo.cdn.telerik.com/<cfoutput>#kendoVersion#</cfoutput>/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/<cfoutput>#kendoVersion#</cfoutput>/styles/kendo.default.min.css" rel="stylesheet" />
</head>

Kendo Core Code Examples

Self Hosted

<!DOCTYPE html>
<head>
<!-- Load jQuery from Googles CDN -->
<script
	  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
	  crossorigin="anonymous"></script>
<!-- Load Kendo UI -->
<script src="http://kendo.cdn.telerik.com/<cfoutput>#kendoVersion#</cfoutput>/js/kendo.ui.core.min.js"></script>
<!-- Load the stylesheets -->
<link href="http://kendo.cdn.telerik.com/<cfoutput>#kendoVersion#</cfoutput>/styles/kendo.common.min.css" rel="stylesheet" />
<!-- Load the theme styles -->
<link href="http://kendo.cdn.telerik.com/<cfoutput>#kendoVersion#</cfoutput>/styles/kendo.default.min.css" rel="stylesheet" />
</head>

Kendo Core example from CDN

<!DOCTYPE html>
<head>
<!-- Load jQuery from Googles CDN -->
<script
	  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
	  crossorigin="anonymous"></script>
<!-- Load Kendo Core from jsdeliver.net -->
<script src="https://cdn.jsdelivr.net/npm/kendo-ui-core@2022.2.621/js/kendo.ui.core.min.js"></script>
<!-- Load the stylesheets from a local source -->
<link href="http://kendo.cdn.telerik.com/<cfoutput>#kendoVersion#</cfoutput>/styles/kendo.common.min.css" rel="stylesheet" />
<!-- Load the theme styles -->
<link href="http://kendo.cdn.telerik.com/<cfoutput>#kendoVersion#</cfoutput>/styles/kendo.default.min.css" rel="stylesheet" />
</head>

Lazy Loading Kendo UI

To optimize the time that it takes to load your page, you can also defer these Kendo scripts.

Please see my blog article at https://www.gregoryalexander.com/blog/2019/9/9/How-to-speed-up-your-site-with-lazy-loading

Further Information