Gregory's Blog

Using ColdFusion to Populate Kendo UI Widgets


There are multiple ways to populate Kendo widgets with data. Take a simple dropdown, you can populate a dropdown the same way that you would build a simple HTML dropdown using a ColdFusion query loop or create a static dropdown by building the HTML option tags in the dropdown manually. You can also use Javascript arrays as the data source for a dropdown, or other Kendo HTML5 widgets, but to leverage the full dynamic potential of the Kendo widgets, you need to use a server-side language, such as ColdFusion, to query a database and return the data as JSON. 


Table of Contents


Populating a Kendo widget with static HTML

Here is an example of a simple Kendo dropdown list using static HTML:

<script>
	// ---------------------------- Kendo datasource for the dropdown. ----------------------------
	var bestLanguageDs = new kendo.data.DataSource({
		transport: {
			read: {
				cache: false,
				// Note: since this template is in a different directory, we can't specify the cfc template without the full path name.
				url: function() { // The cfc component which processes the query and returns a json string. 
					return "<cfoutput>#application.baseUrl#</cfoutput>/demo/Demo.cfc?method=getBestLanguage"; 
				}, 
				dataType: "json",
				contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page.
				type: "GET" //Note: for large payloads coming from the server, use the get method. The post method may fail as it is less efficient.
			}
		} //...transport:
	});//...var bestLanguageDs...

	// ---------------------------- Kendo dropdown. ----------------------------
	var serverSideLanguageDropdown = $("#serverSideLanguageDropdown").kendoDropDownList({
		optionLabel: "Select...",
		autoBind: false,
		dataTextField: "label",
		dataValueField: "value",
		filter: "contains",
		dataSource: bestLanguageDs,
	}).data("kendoDropDownList");
</script>


 

Populating the Kendo DataSource with a local Javascript array

For most widgets, you can also bind the Kendo dataSource of the widget to a local Javascript array. This is useful if you don't have the data in the database. Note the arrServerSideLanguage Javascript array is bound to the DataSource variable in the Kendo dropdown. We will cover the Kendo DataSource more extensively in the section below.

<script>
	// Create a Javascript array to populate the Kendo dropdown
	var arrServerSideLanguage = [
		{"label":"Adobe ColdFusion","value":"ACF"},
		{"label":"Lucee","value":"Lucee"}
	]	

	// Create the Kendo dropdown
	var serverSideLanguage = $("#serverSideLanguage").kendoDropDownList({
		optionLabel: "Select...",// Default label
		dataTextField: "label",// Dropdown label
		dataValueField: "value",// Dropdown value
		filter: "contains",// Search filter on the dropdown
		dataSource: arrServerSideLanguage,// The datasource takes the Javascript array to populate the control
	}).data("kendoDropDownList");
</script>


Binding the Kendo control to a ColdFusion remote data service

Most often you will be binding a Kendo widget to a remote endpoint. This will be a multi-step process. 

Don't worry if you don't completely understand this tutorial, this article is meant as an introduction to the process and we will cover these steps again.

  1. First, we need to create a Kendo DataSource that will handle our Ajax operations and call a ColdFusion server-side template. In this example, our service endpoint is Demo.cfc.
  2. Our endpoint will be a component on a ColdFusion server that retrieves data from a database and packages the data into a JSON object. In order to do this, we need to download the CfJson component for ColdFusion.
  3. Once the data is prepared on the server, we will return it to the client using Ajax and pass the JSON data object to the Kendo widgets DataSource.

Create a Kendo DataSource and the dropdown on the client to invoke the ColdFusion service

The Kendo DataSource is a component that allows you to use local Javascript arrays or remote XML, JSON, or JSONP data to populate the various Kendo controls. The DataSource allows for server-side sorting, paging filtering, grouping, and data aggregates. 

The Kendo DataSource handles the necessary AJAX operations and makes an AJAX post to the server found in the URL argument below.

You will see other Kendo examples where all of the Kendo DataSource logic is embedded inside of the widget. I typically separate the Kendo DataSource from the widget as it allows me to potentially reuse the data for other controls. 

<script>
	// ---------------------------- Kendo datasource for the dropdown. ----------------------------
	var bestLanguageDs = new kendo.data.DataSource({
		transport: {
			read: {
				cache: false,
				// Note: since this template is in a different directory, we can't specify the cfc template without the full path name.
				url: function() { // The cfc component which processes the query and returns a json string. 
					return "<cfoutput>#application.baseUrl#</cfoutput>/demo/Demo.cfc?method=getBestLanguage"; 
				}, 
				dataType: "json",
				contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page.
				type: "GET" //Note: for large payloads coming from the server, use the get method. The post method may fail as it is less efficient.
			}
		} //...transport:
	});//...var bestLanguageDs...

	// ---------------------------- Kendo dropdown. ----------------------------
	var serverSideLanguageDropdown = $("#serverSideLanguageDropdown").kendoDropDownList({
		optionLabel: "Select...",
		autoBind: false,
		dataTextField: "label",
		dataValueField: "value",
		filter: "contains",
		dataSource: bestLanguageDs,
	}).data("kendoDropDownList");
</script>

Download the CfJson component for ColdFusion (if you don't already have it)

In order to query a database and return the data as a JSON object to the client, we need to use ColdFusion on the server-side with a custom CFJson component. If you want to follow along, you can download this component from GitHub at https://github.com/GregoryAlexander77/CfJson.

Of course, we also need to use jQuery for the Ajax operations, but Kendo UI for jQuery requires jQuery so this should not be an issue.

Create a server-side function to use as the ColdFusion endpoint.

This function will query the database and return the data as a JSON object back to the client. The following function will be placed in the Demo.cfc component that I use for demonstration purposes. The function access argument must be remote when performing Ajax operations. Note the returnFormat="json" argument. This must be set to json, otherwise, the function will return plain text or WDDX and the client-side Ajax will fail.

Note: I don't exactly have a 'ServerLanguage' table anywhere in a database, so in this example, I will mimic a query object by building it in code.

<cffunction name="getBestLanguage" access="remote" returnformat="json" output="true"
	hint="Returns a JSON object back to the client to populate a Kendo dropdown. This function does not take any arguments">

	<!--- Create a ColdFusion query using CFScript. --->
	<cfscript>
		serverLanguage = queryNew("label,value","varchar,varchar", 
			[ 
				 {label="Adobe ColdFusion",value="ACF"}, 
				 {label="Lucee", value="Lucee"}
			]); 
	</cfscript>

	<!--- Now convert the query object into JSON using the convertCfQuery2JsonStruct in the CFJson.cfc and pass in the 'serverLanguage' query --->
	<cfinvoke component="#application.cfJsonComponentPath#" method="convertCfQuery2JsonStruct" returnvariable="jsonString" >
		<cfinvokeargument name="queryObj" value="#serverLanguage#">
		<cfinvokeargument name="contentType" value="json">
		<cfinvokeargument name="includeTotal" value="false">
		<!--- Don't include the data handle for Kendo dropdowns --->
		<cfinvokeargument name="includeDataHandle" value="false">
		<cfinvokeargument name="dataHandleName" value="">
		<!--- Set to true to force the column names into lower case. --->
		<cfinvokeargument name="convertColumnNamesToLowerCase" value="false">
	</cfinvoke>

	<cfreturn jsonString>

</cffunction>


Further Reading

This entry was posted on July 13, 2022 at 10:04 PM and has received 219 views.

Convert a ColdFusion Query into a JSON Object


I have used various HTML5 widgets extensively for the last decade and will share the functions that I use to convert ColdFusion objects returned from a database into JSON. In this article, I will highlight some of the logic in the code and show you how to use this for a variety of use cases.



What Does This Component Do?

These functions are a critical component of all of my HTML5 applications. These functions will convert both a ColdFusion query as well as a ColdFusion ORM array object into JSON that is passed back to the calling Ajax function. Unlike ColdFusion's native JSON functions, this will return the column names in the proper case rather than returning the column names in uppercase.

The function was originally created by Adrian Moreno. I modified this function nearly a decade ago and has been in use in several production environments over the last 10 years.  It is also used extensively in my open-source Galaxie Blog which is an HTML5 application. These two functions have been tested thoroughly and have handled server-side data operations on nearly every jQuery-based HTML5 widget that I have used. 

There may be something in the CF world that is a little more modern than this, however, I have written these functions to handle all of the common use cases that I have found when preparing JSON data. For example, some widgets want a data handle in the JSON, while others don't. These functions have handled all use cases that I have thrown at them when using Kendo UI and have handled other HTML5 libraries, such as jsGrid. I have tested a dozen different similar functions and this approach offered the best performance.

I am also using this component extensively in my how-to ColdFusion and Kendo blog series. If you are working with Kendo UI while reading this series, please download this component.


Download the CFJson Component from GitHub

This component can be found on GitHub at https://github.com/GregoryAlexander77/CfJson. It has been tested on ColdFusion 10 all the way through the most modern ColdFusion version, CF2021.


Working with ColdFusion Queries

When dealing with a native ColdFusion query object, use the convertCfQuery2JsonStruct function to convert it into JSON. This function takes a native ColdFusion query object and converts it into JSON.

There are several arguments, the queryObj is required, and the rest of the arguments are optional. 


Function Arguments

  • queryObj (required)
    Pass in the name of the ColdFusion query. This must be a ColdFusion query object.

  • contentType 
    Default value: json
    This argument, for now, is always set to json. This argument was put into the function as eventually, I hope to add JSONP support. 

  • includeDataHandleName
    Default value: false
    This inserts a data handle in front of the JSON. It is used for special use cases when using the Kendo widgets, and also is used for other HTML libraries, such as jsGrid.

  • dataHandleName
    Default value: false
    Specify your data handle name when setting the includeDataHandle argument to true.

  • includeTotal 
    Default value: false
    Used for the Kendo Grids and for Pagination.

  • overRideTotal
    Default value: false
    Used for pagination when filtering records in a Kendo Grid. 
  • newTotal
    Default value: false
    Used to indicate the total number of records after applying filters to a Kendo Grid. 

  • removeStringHtmlFormatting
    Default value: false
    Removes HTML and special characters in the JSON. This is used to create a sanitized string that is displayed in a grid (works with both Kendo and jsGrid grids)

  • columnThatContainsHtmlStrings
    default value: empty string
    When removeStringHtmlFormatting is set to true, specify the column that you want to be sanitized.

  • convertColumnNamesToLowerCase
    Default value: empty string
    This argument is rarely used. In certain situations, you may want to force all of the JSON element names to a lower case to avoid any case sensitivity issues.

Example ColdFusion Query

Here is a simple query that grabs the Galaxie Blog built-in roles. Here we are getting the role Id, name, and description and output this to JSON to populate our HTML5 widgets.

After obtaining the data, we will pass the name of this query, Data, to the convertCfQuery2JsonStruct method to convert this ColdFusion query into a JSON string. This query will be used for all of the examples below using the convertCfQuery2JsonStruct method that converts a ColdFusion query object into a JSON object.

Note: I am only getting the top two records to make it easier to view the JSON output below.

<!--- Make the query --->
<cfquery name="Data" datasource="#dsn#">
	SELECT TOP 2 RoleId
			,RoleName
			,Description
		FROM Role
</cfquery>

Common Usage Using Default Settings

This takes the ColdFusion query object that we just made, in this case, "Data", and it converts it into JSON without a total, data handle or any special formatting.

This particular usage supports most of the Kendo Widgets, other than the Kendo Grid or other specialized use cases. All of the other arguments are set at default and are not used. 

<!--- Convert the query object into JSON using the default parameters of convertCfQuery2JsonStruct method --->
<cfinvoke component="#application.cfJsonComponentPath#" method="convertCfQuery2JsonStruct" returnvariable="jsonString" >
	<cfinvokeargument name="queryObj" value="#Data#">
</cfinvoke>

This is what the JSON that the function returns when using the default arguments:

[
   {
      "Description":"All functionality.",
      "RoleId":1,
      "RoleName":"Administrator"
   },
   {
      "Description":"Can create and edit their own posts.",
      "RoleId":2,
      "RoleName":"Author"
   }
]

Getting the JSON with a Data Handle

If you need to use a data handle, use the following arguments:

<!--- Convert the query object into JSON --->
<cfinvoke component="cfJson" method="convertCfQuery2JsonStruct" returnvariable="jsonString" >
	<cfinvokeargument name="queryObj" value="#Data#">
	<cfinvokeargument name="contentType" value="json">
	<cfinvokeargument name="includeTotal" value="false">
	<!--- Don't include the data handle for Kendo grids ---> 
	<cfinvokeargument name="includeDataHandle" value="true">
	<cfinvokeargument name="dataHandleName" value="myData">
	<!--- Set to true to force the column names into lower case. --->
	<cfinvokeargument name="convertColumnNamesToLowerCase" value="false">
</cfinvoke>

Using this Function with a ColdFusion ORM Array

This component also works when using ColdFusion ORM. When you query a database using ColdFusion ORM using the map keyword in the query, the object returned is typically an object in an array of structures. 


Function Output

Here is what the function returns:

[ 
   {
      "blogurl":"https://www.gregoryalexander.com/blog/",
      "blogdescription":"A technical blog powered by Galaxie Blog - the most beautiful and functional open source ColdFusion/Kendo UI based blog in the world.",
      "blog":"Gregory's Blog"
   }
]

I will cover the other less common use cases in future blog posts as needed when I discuss the Kendo UI widgets.


Further Reading

This entry was posted on July 12, 2022 at 11:40 PM and has received 387 views.

Incorporate Kendo UI into a ColdFusion Application



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

This entry was posted on July 10, 2022 at 3:24 PM and has received 302 views.

The Different Flavors of Kendo UI and Kendo Licensing Terms



Flavors of Kendo UI 

There are many flavors of Kendo UI. Kendo offers native libraries for jQuery, Vue, Angular and React. Kendo also natively supports .Net and provides Kendo UI wrappers that support both PHP and JSP.

Kendo has a free version of Kendo Core, which is open source, Kendo Professional, which is a paid license, and Kendo DevCraft, a premium commercial license that provides all of the Kendo Professional functionality and offers additional .Net support.

ColdFusion requires either Kendo Core or the professional version of Kendo UI for jQuery.

For a breakdown of the functionality offered in the different versions see https://github.com/telerik/kendo-ui-core#features-of-kendo-ui-core.


Licensing


Professional License

Progress's licensing model for Kendo UI is a little bit confusing. I am not a lawyer, but I have purchased an annual developer license for over a decade now and the legal team where I work, the University of Washington, has researched the EULA thoroughly. A decade ago, this legal team was able to remove one of the vague distribution provisions of the EULA with Telerik before we purchased this software.

I have also called Telerik on multiple occasions to discuss licensing issues as I have open-sourced my own personal projects using Kendo Core. The Telerik representatives were often vague when I asked them detailed questions, but I made sure to try to get as much information as possible from them before releasing Galaxie Blog 1.0 several years ago.

As I understand it- if you are going to use any version other than the open-source version of Kendo Core- you are bound by the end-user license agreement. This agreement states that if a developer uses the professional version for more than 30 days, each developer must purchase an annual developer license. Once the license has been obtained, the developer can continue to use the software perpetually as long as they remain at, or under, the latest version that was available at the time of the license window, which typically lasts for a year.

For example, if you purchased your license in July of 2022 you can continue to use the latest version at that time which is v2022.2.62. Generally, there are 2-3 new versions that come out per year, unless you decide not to make another annual purchase, you can probably update your version at least twice before your annual license term expires.

However, the developer is not allowed to distribute the code¹.

'Distribute' is a tricky term, but this is how I have come to understand it- at any time, even after the expiration of the subscription window, the developer can create new applications for their customers and place them on multiple servers, but they can't make the application publically available by open-sourcing it. Also, the end-users cannot alter the Kendo UI portion of the licensed code. The owner of the license needs to inform the customer that they must buy their own license if they were to modify the Kendo UI portion of the code. Only a developer who owns a license (or is in the 30-day trial period) can modify the Kendo UI portion of the code.


Open Source

The only way around this is to use Progress's open-sourced version of Kendo Core.

Kendo Core uses a permissive Apache 2.0 license that allows you to freely use and distribute your code with no license restrictions. Kendo Core offers most of the major Kendo widgets, but it does not offer the Kendo UI grids or other advanced widgets. That said, I have incorporated other open source libraries to fill in the functional gaps that are missing in Kendo Core and will blog about them in future posts.

If you are considering using Kendo UI, you should review the Kendo licensing terms on your own.


Further Reading


¹See section 4.A.2. Redistribution under Developer License

This entry was posted on July 8, 2022 at 8:59 PM and has received 243 views.

Benefits of ColdFusion and Kendo UI



My Background

I have been in the web development field for over 25 years and have worked on some very prestigious projects, such as working in the Human Genome Project in the early 2000s. I have also programmed critical medical-oriented applications that were used to deliver critical care patients to the closest ER that was used in every ER across various states. During this time I have mainly used ColdFusion to develop these critical applications. 

In the last decade, I have also been using Kendo UI on the front end. Progress, the company that delivers Kendo UI, does not market Kendo to the ColdFusion community, however, it is easy to incorporate ColdFusion and Kendo UI and this set of articles will show you how. 


Why ColdFusion?

ColdFusion is one of the original server-side middle-ware technologies. ColdFusion operates between the client and the database and is a Java-based server that runs on a variety of server platforms. ColdFusion is a rapid development environment that allows the user to quickly deploy sophisticated web applications. ColdFusion's main strength in the scientific world is that it can natively invoke Java objects. For example, in the genomics field, there is an extensive set of tools available with BioJava. If you're already a Java programmer and want to get involved with Kendo UI on the front end, ColdFusion is a great place to start.

There is an assumption from many developers that 'ColdFusion is dead'. This misguided perception may be due to a lack of marketing on Adobe's part and other factors, but it is far from the truth!  I remember in the early 2000's when people thought that Apple was dead! ColdFusion is updated constantly and it still remains one of the most powerful web technologies around.

For more information see https://www.adobe.com/products/coldfusion-family.html


Why Kendo UI?

Kendo UI is one of the most beautiful and functional HTML5 front-end libraries in the world. Kendo UI also offers a full set of front-end widgets. Every widget that Kendo UI offers has similar functionality and they all match each other so whatever front-end component that you design will complement each other.

Kendo's HTML5 grids are one of the most powerful and functional grid widgets around. I routinely deal with records that have over 70k records and the Kendo grids allow the users to quickly visualize data from a large set of data. I will show you how to create fast and responsive grids with thousands of records in future articles.

Each Kendo widget also works flawlessly on tablets and mobile devices. Kendo automatically delivers HTML5 mobile widgets when it detects a mobile device.

For more detailed information see https://www.telerik.com/kendo-ui


Why use ColdFusion and Kendo UI?

Kendo UI offers some front-end UI widgets, however, these widgets are often proprietary to Adobe and are not often updated. You're often not able to update the included libraries or develop additional functionality.  It is also difficult to add new libraries that work with the ColdFusion UI widgets. With Kendo UI and jQuery, the updates are much more frequent and there is a ton of other functionality or other components that you can add at a later time. You can always add new jQuery-based libraries if you want to extend functionality. Kendo UI also separates the business logic, where ColdFusion shines, from the presentation logic which improves the overall maintainability of the application.

If you're reading this, you're already seeing an application built with both ColdFusion and Kendo UI. Galaxie Blog uses both ColdFusion and Kendo UI Core, which is the open-sourced implementation of Kendo UI. If you select other themes, note how the various widget properties and characteristics change with your selected theme. One of my initial goals in creating Galaxie Blog was to create one of the most themeable blogs in the world. I am biased, but due to the elegance of Kendo UI, I think that we have come close to achieving this goal.


Where are we going from here?

In the next several months I will be writing a series of detailed articles showing how to incorporate ColdFusion with Kendo UI.

This entry was posted on July 7, 2022 at 8:32 PM and has received 247 views.




Footer Logo

Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Galaxie Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Galaxie Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site.

Version:

Galaxie Blog Version 3.0 (Toby's Edition) June 14th 2022 Pillars Of Creation theme