In this article, I will be walking you through how to use the Kendo Window. I will share some tips and tricks and show you how to create a dynamic server-side window with ColdFusion.

Table of Contents

What are the Benefits of a Windowing Interface?

The main benefit of a window-based interface is that it allows the users to perform multiple tasks at the same time. In a web-based interface, you have can have many web interfaces (or applications) in multiple windows. For example, in the Galaxie Blog administrative interface, every post editor has its own window that is launched by clicking on a list of posts in an HTML5 grid interface. Nearly every single administrative interface opens up in a window. Having different information available in multiple windows has several advantages, for example, you can copy the content from one post to another or research the current post that you are creating by looking at prior posts. Once you're done with the research, all of the windows that you opened can be minimized and shoved out of the way to maximize your working space. 

Windows Conserve Working Space

Every window can be configured programmatically to take up a certain size. The windows can be minimized, resized, moved around the screen, refreshed, and closed. One effective design is to use an HTML5 grid, such as Kendo UI Grid, that opens a new window displaying the details when they click on a row within the grid. This design allows your users to open multiple windows and compare the details of the windows side by side.

Windows are Aware of the Current Application State

If you're using a server-side language, such as ColdFusion, the window content can be state-aware when the window opens. This allows you to generate state-aware content on the fly without having to reload the entire page. 

To illustrate, in Galaxie Blog, in order to properly render the UI elements for Apple tablets, I capture the user's screen size using Javascript when the user first hits the blog page. However, since the DOM was loaded at the same time that the cookie was set, I typically don't have access to this information. However, a window will have access to this information as it is initialized after the DOM is loaded and we can adjust the window size to match the client's end device.

What are the Disadvantages of a Web-based Window?

Potential SEO Issues 

Depending upon the structure of your content, Google may not index the window as the content may not be initially loaded into the DOM. Google may also penalize your window if it is constantly popping up on the page. If you use a window, especially if it is modal, be careful to load it as needed otherwise the window will be considered intrusive and you may be penalized. 

Without a Custom Listener, the Window Lacks a URL

A URL is useful for SEO purposes and allows the users to open the content using a memorizable link. However, windows typically use javascript functions to open unless you create a listener on the server side to translate the javascript function to a URL.

In this article, I will show you how to overcome this issue by creating a custom listener.

Note: these same disadvantages also apply to web overlays, popups, and modal windows.

Introducing the Kendo Window 

The Kendo Window has multiple configuration options. You can set the minimum and maximum height and width, title, set the initial window position, determine what user actions are available, add animations, and a host of other options. We will briefly cover these options below.

Implementing the Kendo Window on the Client Side

There are plenty of how-to examples to implement a Kendo Window on the Telerik site, but the basic code examples on the Telerik site are missing some key details. I will share some of my working code using JavaScript along with some tips and tricks that you can use to optimize the code.

Once we are done walking through the code, we will discuss how to implement dynamic window content with server-side code and provide examples.

Client Side Code

If you want to see the Kendo in action while we are walking through the code, click on the button below. This is not necessary as we will share the full code below, but it will allow you to view the full client-side code side by side while we review the individual parts of the code.

Here is the full client-side code. We will walk through the important elements of the code below.

// About window -----------------------------------------------------------------------------------------------
function createAboutWindow(Id) {

	// Remove the window if it already exists
	if ($("#aboutWindow").length > 0) {
		$("#aboutWindow").parent().remove();
	}

	// Set the window title
	if (Id == 1){
		var windowTitle = "About <cfoutput>#htmlEditFormat(application.blog.getProperty('blogTitle'))#</cfoutput>";
	} else if (Id == 2){
		var windowTitle = "About Gregory Alexander";//TODO put in an owner name in the admin section.
	} else if (Id == 3){
		var windowTitle = "Download Galaxie Blog";
	}

	// Typically we would use a div outside of the script to attach the window to, however, since this is inside of a function call, we are going to dynamically create a div via the append js method. If we were to use a div outside of this script, lets say underneath the 'mainBlog' container, it would cause wierd problems, such as the page disappearing behind the window.
	$(document.body).append('<div id="aboutWindow"></div>');
	$('#aboutWindow').kendoWindow({
		title: windowTitle,
		// The window can't be set to full screen per design.
		actions: [<cfoutput>#kendoWindowIcons#</cfoutput>],
		modal: false,
		resizable: true,
		draggable: true,
		// For desktop, we are subtracting 5% off of the content width setting found near the top of this template. These are custom JavaScript functions that determine the clients screen width
		width: <cfif session.isMobile>getContentWidthPercent()<cfelse>(getContentWidthPercentAsInt()-5 + '%')</cfif>,
		height: '85%',// We must leave room if the user wants to select a bunch of categories.
		iframe: false, // don't  use iframes unless it is content derived outside of your own site. 
		content: "<cfoutput>#application.baseUrl#</cfoutput>/about.cfm?aboutWhat=" + Id,// Make sure to create an absolute path here. I had problems with a cached index.cfm page being inserted into the Kendo window probably due to the blogCfc caching logic. 
	<cfif session.isMobile>
		animation: {
			close: {
				effects: "slideIn:right",
				reverse: true,
				duration: 500
			},
		}
	<cfelse>
		close: function() {
			$('#aboutWindow').kendoWindow('destroy');
		}
	</cfif>
	}).data('kendoWindow').center();// Center the window.

}//..function createAboutWindow(Id) {

Create a JavaScript Function to Send Arguments and Open up the Kendo Window

I typically create a JavaScript function to enable multiple windows and create a dynamic ColdFusion template on the server-side to allow the window logic to be reused. I am passing in an Id in order to set window properties. I will also be using this Id on the server-side with ColdFusion to determine which content to show.

function createAboutWindow(Id) {

Destroy All Prior Instances of the Kendo Window

The following Javascript to destroy an existing window is not found in the basic Telerik tutorials. The name of the Kendo window must be entered- here the name is 'aboutWindow'.

This logic is critical to allow you to use multiple Kendo windows- you will have a lot of problems if you don't include the logic to destroy current windows when using multiple Kendo windows.

// Remove the window if it already exists
if ($("#aboutWindow").length > 0) {
	$("#aboutWindow").parent().remove();
}

Set the Kendo Window Properties by the Id that was Passed In

To reuse the same code for multiple windows, dynamically set the window properties by the Id.

// Set the window title
if (Id == 1){
	var windowTitle = "About <cfoutput>#htmlEditFormat(application.blog.getProperty('blogTitle'))#</cfoutput>";
} else if (Id == 2){
	var windowTitle = "About Gregory Alexander";//TODO put in an owner name in the admin section.
} else if (Id == 3){
	var windowTitle = "Download Galaxie Blog";
}

Append the Window Container Div to the Body 

Here we are dynamically appending the div as the container for the new Kendo window. This particular technique is important as it prevents bugs from occurring when having multiple windows. It also eliminates the necessity of having to manually insert the div into your code.

// Typically we would use a div outside of the script to attach the window to, however, since this is inside of a function call, we are going to dynamically create a div via the append js method. If we were to use a div outside of this script, lets say underneath the 'mainBlog' container, it would cause wierd problems, such as the page disappearing behind the window.
$(document.body).append('<div id="aboutWindow"></div>');

Initialize the Kendo Window and Set the User Action Properties

The window initialization occurs in the first line of the code below.

$('#aboutWindow').kendoWindow({

The kendoWindowActions ColdFusion variable is used to set the default user actions for the window. These actions determine what the end-user is able to do with the window using window controls to the right of the window title. The available actions are:

  • Pin
  • Refresh
  • Maximize
  • Minimize
  • Close

I personally don't use the Pin action as I found that it can be a bit buggy. I am also not allowing the user to maximize this particular window due to personal design considerations.

// The about window can't be set to full screen per design.
actions: [<cfoutput>#kendoWindowIcons#</cfoutput>],

Set the Kendo Window Content

Enter the URL of the content template that you want to use in the content var. The URL must return HTML or JSON. Notice that we are also appending the 'aboutWhat 'URL parameter to the URL and passing the Id. This allows us to reuse the about window for various purposes using server-side code.

content: "<cfoutput>#application.baseUrl#</cfoutput>/about.cfm?aboutWhat=" + Id,// Make sure to create an absolute path here. I had problems with a cached index.cfm page being inserted into the Kendo window probably due to the blogCfc caching logic.

Closing the Kendo Window

On mobile clients, to add some interest, we will subtly slide the window from the left of the screen when we open a window. Similarly, when the window is closed we will reverse the slide-in animation effect. On desktop clients, we will simply destroy the window on the close event. I will cover animation effects in greater detail in a future post.

<cfif session.isMobile>
	animation: {
		close: {
			effects: "slideIn:right",
			reverse: true,
			duration: 500
		},
	}
<cfelse>
	close: function() {
		$('#aboutWindow').kendoWindow('destroy');
	}
</cfif>

Center the Kendo Window

Finally, center the window when it is opened

}).data('kendoWindow').center();// Center the window.

Kendo Window Logic on the Server Side

We will use the Id that we passed in the URL to dynamically generate the content of the window on the server.

On the server side, we will use a conditional if or a switch statement that uses the URL.Id to dynamically generate window content. You can see this code in action by clicking on the about menu at the top of this web page.

Here is a summary example of the about.cfm template code:

<cfif URL.aboutWhat eq 1>
     About Gregory's Blog...
<cfelseif URL.aboutWhat eq 2>
     About Gregory Alexander...
<cfelseif URL.aboutWhat eq 3>
     Download Galaxie Blog...
</cfif>

I won't go into further detail as most of this blog readers are already familiar with server-side code.

Using HTML to Open the Window

To open the window, simply use a link or button that opens the function like so:

<!-- Using an href tag -->
<a href="javascript:createAboutWindow(1)">About Gregory's Blog</a>
<!-- Button example -->
<button id="about1" name="about1" class="k-button k-primary" onclick="javascript:createAboutWindow(1);"><span class="fa-solid fa-up-right-from-square fa-2xs"></span> About Gregory's Blog</button>

Using Server-Side Logic to Create a Listener to Open the Window with a URL

One of the disadvantages to the Kendo window is that you typically can't open it with a friendly URL. This may have negative implications for SEO and it is hard for your users to memorize an important link that opens up content within a window.

However, you can use server-side logic to create a listener that will invoke the JavasScript function via a URL. There are multiple ways to achieve this, but this is a simple implementation that I use with ColdFusion to open a window using a friendly URL.

<script>
<cfif isDefined("URL.about")>
	createAboutWindow(1);
</cfif>
</script>

After the page completely loads, the URL https://www.gregoryalexander.com/blog?about will open up the 'About Gregory's Blog' Kendo window.

Real-World Examples Using this Code

Further Reading