Gregory's Blog

Kendo Responsive Panel

While working on the mobile site, I had a few challenges with the Kendo responsive panel that I solved with the blog today, and wanted to make a post about it as I could not find any other solution on the web. I ran into someone posting the same scrolling question as I was looking to solve on stack overflow, but could not find anything else on the web.

The responsive panel is used to provide a slide-out menu on mobile devices when you click on what is commonly known as a 'hamburger. The panel is used in responsive web design and is triggered when the device reaches a certain minimum screen width. Here is the code that I developed for this blog:

view plain about
1<nav id="sidebarPanel" class="k-content">
2    <!---Suppply the sideBarType argument before loading the side bar--->
3    <cfset sideBarType = "panel">
4    <cfinclude template="includes/layers/sidebar.cfm">
5</nav><!---<nav id="sidebar">--->
6            
7<!--- This script must be placed underneath the layer that is being used in order to effectively work as a flyout menu.--->
8Javascript
9    $("#sidebarPanel").kendoResponsivePanel({
10        breakpoint: 1280,
11        orientation: "left",
12        autoClose: true
13        })
14        .on("click", "a", function(e) {
15            $("#sidebarPanel").kendoResponsivePanel("close");
16    });

There were several challenges that I ran into when developing this.

First, I tried to use the same div element that I use on the right side of the page to hold the various widgets, such as the calendar, subscribe, recent posts, etc. However, I noticed that if I tried to use the same div for the responsive menu, I could no longer apply certain css properties to the panel, and it was stuck at the top of the page.

To solve this, I used a different div at the end of the application to serve as the responsive panel, duplicated the logic from the right column, and put it into the new panel at the end of the page. I also created a script to show the new responsive panel when the screen size hit the breakpoint setting (1280 pixels), and hid the original div that is on the right column. Here is the relevant portions of the code:

view plain about
1// Handle the sidebar and the sideBarPanels
2    if (windowWidth <= 1280){
3        // Hide the sidepanel (the responsive panel will takeover here).
4        $( "#sidebar" ).hide();
5        // Show the responsive panel
6        $( "#sidebarPanel" ).show();
7    } else {
8        // Show the sidebar, and hide the responsive panel
9        $( "#sidebar" ).show();
10        $( "#sidebarPanel" ).hide();
11    }

Second, the hamburger showed up, but it closed as soon as I tried to open it. I found the following solution while searching the web:

view plain about
1// Important note: this is a workaround with a google chrome bug and mobile devices.
2// This prevents the following error: "Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive."
3// See https://github.com/telerik/kendo-ui-core/issues/3556
4$(".k-rpanel-toggle").on("touchend", function(e) {
5     e.preventDefault();
6});

Third, I ran into problems where to put the resonsivePanel initiation script. I found out that it must be at underneath the actual element that it will be placed into.

It now works, however, there is a big problem. I could not scroll down the responsive panel when it was triggered. It just stayed in a fixed position and only showed the top part of the page. I looked everywhere in the Kendo site, and then on the internet, looking for some arcane argument that I could use, such as scrollable: true, but couldn't find any. I then looked at the similar jQuery UI menu, and inspected Telerik's production page which has a responsive panel and found that they both used the css declaration: position: absolute;

view plain about
1position: absolute;

Fourth. Ok, that fixed that problem, but now the div layer disappeared at the bottom of the page. I tried setting height to 100%, but that failed too. So I looked at both jQuery and Kendo's panels again, and noticed that they also used: height: auto;

view plain about
1height: auto;
Also, use the autoclose argument to be false on the responsive panel widget, otherwise you won't be able to able to keep the layer open when scrolling past the bottom of the first page. That worked! The panel can be scrolled now.

The final working code is pasted below:

CSS:

view plain about
1/* The side bar panel is essentially a duplicate of the sidebar div, however, it is a responsive panel used when the screen size gets small. */
2#sidebarPanel {
3/* We are going to eliminate this sidebar for larger devices, and activate it when the screen size gets to a certain size. */
4display: none;
5/* Note: the panel will not scroll with the blog content unless there is a css position: absolute. */
6position: absolute;
7margin: 0;
8/* Apply more padding to the right to keep things uniform. */
9padding: 20px 40px 20px 20px;
10width: 45%;
11/* Note: if you don't set 'height: auto', the panel will not be displayed below the bottom of the page. */
12height: auto;
13vertical-align: top;
14overflow: visible;
15border-right: thin;
16        
17/* Put a drop shadow on the panel when it is expanded. */
18#sidebarPanel.k-rpanel-expanded {
19 box-shadow: 0 0 10px rgba(0,0,0,.3);
20 }
CFML:
view plain about
1<!---This is the sidebar responsive navigation panel that is triggered when the screen gets to a certain size. It is a duplicated of the sidebar div above, however, I can't properly style the sidebar the way that I want to within the blog content, so it is duplicated without the styles here.--->
2                        
3<!--- Side bar is to the right of the main panel container. It is also used as a responsive panel below when the screen size is small. --->
4<nav id="sidebarPanel" class="k-content">
5<!---Suppply the sideBarType argument before loading the side bar--->
6<cfset sideBarType = "panel">
7<cfinclude template="includes/layers/sidebar.cfm">
8</nav><!---<nav id="sidebar">--->
Javascript:
view plain about
1<!--- This script must be placed underneath the layer that is being used in order to effectively work as a flyout menu.--->
2    $("#sidebarPanel").kendoResponsivePanel({
3        breakpoint: 1280,
4        orientation: "left",
5        autoClose: false // set this to false if you want the layer to stay up when you want to sroll down.
6        })
7        .on("click", "a", function(e) {
8            $("#sidebarPanel").kendoResponsivePanel("close");
9    });
10
11// Important note: this is a workaround with a google chrome bug and mobile devices.
12// This prevents the following error: "Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive."
13// See https://github.com/telerik/kendo-ui-core/issues/3556
14    $(".k-rpanel-toggle").on("touchend", function(e) {
15        e.preventDefault();
16    });

This entry was posted on February 9, 2019 at 10:38 PM and has received 51 views.

There are currently 0 comments.

Needed to develop a new proxy function

Raymond's approach was typical in the mid 2000's. He posted a form to a .cfm page, and the server processed server side logic as well as performing client side operations, like setting form values on the client. However, Ajax is a different beast. Most of our Kendo HTML5 interfaces do not post to another HTML page. Instead, the UI elements, such as the Kendo window, posts limited data to a function that has to perform all of the logic without refreshing the client page. However, for several reasons, the blog.cfc component does not have all of the information that I need to do this successfully. First, we can't get session vars in the main blog.cfc. Raymond (and et-al) had another application.cfm in the org/cambden/blog folder that prevented this component from having access to the session variables set on the /blogCfc/application.cfm template. Cfc's should have access to the session scope unless it finds another application.cfm (or cfc) template, and here, this is the case. This poses some problems with ajax. I do not want to have to hard code authentication variables, like the isAdmin, in a javascript ajax post. This is quite insecure. I tried in vain to get the blog.cfc component to work for my purposes. After finding and eliminating the 'other' application.cfm template which caused problems accessing the session scope, I was able to obtain session variables, but the elimination of the application.cfm template in the same directory caused new problems. One example is that the isUserInRole function is now erroring out with an 'You have attempted to dereference a scalar variable of type class java.lang.String as a structure with members.'. This new error was raised throughout the blog.cfc template. Another issue is that I suspect that the /blogCfc/org/delmore/coldfishconfig.xml file is not working when the application.cfm template is disabled. This file most likely deals with the cfauthentication tag. In order to have the session scope, and in order to potentially cache the code after an ajax operation, I had to develop a new template to act as a proxy. I am not using a .cfc component for ajax post operations as I need the session variables and need to perform client side operations, such as setting form values, and caching the output of the page. Goals: The proxy template will use Raymond's blog.cfc to perform all database operations. Whenever possible, I will perform server side business logic using Raymonds Blog.cfc.

This entry was posted on November 9, 2018 at 10:42 PM and has received 95 views.

There are currently 0 comments.

Introductory purpose

I am hoping to redesign Raymond Camden's BlogCfc, a blog based upon ColdFusion first introduced by Raymond, around 2003. This particular blog engine was last updated in late 2012. My purpose is to use a popular ColdFusion related blog and to convert the UI into a Telerik Kendo UI. Suffice it to say- this blog is for geeks. That said, I'll still write this with the intention of making it comfortable for the non-web developer to follow along (just in case there is a lightning bolt chance that one such non-tech will want to follow along!).

I have been using ColdFusion since 1998? It was version 2.5 I believe... I started off using ColdFusion's built in UI, and quickly became disappointed. It was fine for beginners, but problematic when using it for enterprise web applications. The ColdFusion UI was brittle, you could not expand the functionality, and you had to purchase a new version of ColdFusion in order to update it- if you could at all. The overall consensus among serious developers was to use something other than ColdFusion's built in UI.

I personally settled on using Telerik's Kendo library with jQuery. I found this UI to be powerful, and beautiful. One of the problems with current front end design is that the method in which to beautify the page requires very long and complex style sheets. Often, the style sheets are almost as complex as the server side code. I wanted to use a library that was powerful, looked really good, but did not require a lot of fuss in the UI.

Kendo offers me dozens of predefined themes that I can use for generic enterprise class web applications, and allows the front end to look really good with minimal fuss. Kendo also offers rich HTML5 web widgets, such as a beautiful grid that supports editing data sets with millions of rows. It also forces the developer to use modern HTML5 code. Kendo is not without issues though. As we will see, it is complex, and getting it to work can be tedious at times. I hope to annotate some of the challenges using Kendo, but it is in my opinion, one of the most powerful and elegant UI libraries around.

In regards to ColdFusion, another major issue with Kendo is that It is also completely absent among ColdFusion developers. I can't find any body of information to go to when things go astray. Telerik does not offer any ColdFusion wrappers, and Telerik only markets and supports its product for .Net, PHP, and JSP. If at all possible, I hope that this blog can be a resource to ColdFusion developers to use Kendo, even if exploratively.

I have admired the original author of the code base that powers this blog, and use his own blog examples of ColdFusion and code for my own professional use. Raymond Camden is a legend in the ColdFusion community. His posts on the internet have literally saved my professional bacon many times. I am happy to try to re-engineer one of his own older applications to fulfill this purpose. I'm going to make decisions with his original open source code, and hope to thoroughly rewrite it. And ironically, I will likely use his new blogging layout at https://www.raymondcamden.com/ as an example how to best re-design his older original code.

This entry was posted on October 30, 2018 at 12:13 AM and has received 64 views.

There are currently 0 comments.

Subscribe to post interface

We will replicate the steps used in the addComments interface in order to create a new Kendo window instead of using the original method of using a new browser window.

This entry was posted on October 29, 2018 at 8:21 PM and has received 38 views.

There are currently 0 comments.

Wierd bugs after using an updated version of jQuery

When an entry is added using the administrative interface, if the admin enters a '<div id="pagetitle">' tag that matches a tag in the code with the same id, the pods on the right side of the blog move to the bottom of the page. There is a workaround by using < and > HTML symbols in the entry editor interface, but it is still an error that needs a later fix and further testing.

This entry was posted on October 29, 2018 at 8:04 PM and has received 40 views.

There are currently 0 comments.

Add comment interface

Our goal is to try to make a single page application. Kendo windows will be used instead of Raymond's code that launches a new browser window. We will have a single page for the client application (the one that the public can view), and a separate single page application for the administrative interface.

To add the new kendo windows, I found all of the code that uses Raymond's 'launchComment(id)' function and replaced the logic in order to open up a new Kendo window, but ran into several issues here.

First, the new Kendo window code was placed at the top of the layout.cfm template, and it opened up in a 'modal' fashion and hid the contents of the underlying page. I am not surprised that I am having issues. The code was originally created in 2003 and it is using an old light box methodology which is not currently used in single page application design. To fix this, I had to play around with the placement of the window div container. Eventually I found the right placement, right under Raymond's <div id="pagetitle"> div container. This will be one of the many occasions where persistence pays off when solving a HTML 5 Kendo related issue.

Next, I had problems with Raymond's older jQuery library that is used for the 'AddThis' library (to make it easier to share the post on social media). It is critical that you only have one reference to the jQuery library. If you have more than one reference, the Kendo widgets will not work and will be 'undefined'. I removed the older jQuery reference and the undefined problem went away when trying to open a Kendo window.

However, this caused more errors. The 'AddThis' library relied upon an older version of jQuery, and it does not work with the newest jQuery version, so I had to remove it. I will try to replace it with a new version of AddThis later, when I am done.

After making changes, the Kendo window is launching properly, but the code inside the Kendo window via the addComment.cfm template is having a few errors. This is due to the addComment.cfm template having its own header and doctype declaration. Whenever you replace a page that opens up in a traditional html window opened via javascript (window.open method), you must also get rid of the doc types and the library includes within the page. These includes are already made in the layout.cfm templates, and just like the duplicate 'AddThis' jquery include, we must remove the duplicate doc types, headers, and includes here on the addComment.cfm page.

The cfform protect logic on the addComments page is not working with jQuery or Kendo. Removed the cfformprotect/cffp.cfm include. I will have to remove this option in the administrator at a later time.

Finally, everything is working within the UI without errors. I will have to modify the logic later to save the comment and close the new Kendo window, but I am focusing upon the interface now and will work on the interface to deal with the post crud operations at a later time.

Now I will apply the same logic to the subscribe events.

This entry was posted on October 28, 2018 at 12:27 PM and has received 61 views.

There are currently 0 comments.

First steps

1) It is vital that the first tag on the page is a simple <!doctype html>'. This is needed for HTML 5. I removed Ray's original doc type declaration and changed it to the html5 doctype in the /blogCfc/tags/layout.cfm template.

2) Included the Kendo and jQuery scripts and stylesheets via an include that I will use at the top the layout.cfm page. I am using an include in order to be able to quickly comment out the scripts for testing, and in order to put them on other single page applications, such as the administrative user interface. Note that I had to also remove Raymond's jQuery includes. Duplicate jQuery scripts cause problems with the Kendo widgets.

3) Changed all of the text forms to have the class 'k-textbox' and buttons have a 'k-button' class. This changes the behavior of the buttons and text inputs to the Kendo theme.

4) Found an error with tweetbacks when adding a new comment. Found that other blog owners had this error as well. Turned off tweetbacks in the administrative section. Problem went away.

This entry was posted on October 26, 2018 at 1:29 PM and has received 41 views.

There are currently 0 comments.

BlogCfc installation issues

I was not able to download BlogCfc the first time. I had to click on the download link repeatedly over the course of a couple of days to get it to work from RIA source forge. After downloading, I uploaded the unzipped folder as '/blogCfc/'.

After uploading using '/blogCfc', I noticed a root install directory of '/blogCfc/install/' and looked to install it from there per instructions. However, you should actually use '/blogCfc/client/install/' as the installation URL path. This was confusing.

Once I figured out to point to the '/blogCfc/client/install/' URL path, things went smoothly after I figured out the administration path ('/blogCfc/client/admin/') and the admin user and user name. Be sure to log into the administrative interface (using '/blogCfc/client/admin/') and change the default password (look in the documentation here).

This entry was posted on October 26, 2018 at 1:18 AM and has received 30 views.

There are currently 0 comments.

Raymond Camden's Blog Cfc

This particular blog application was developed by Raymond Camden. Raymond is a ColdFusion enthusiast who authored thousands of ColdFusion related posts on the internet. Like every senior ColdFusion web developer; I have found his posts invaluable and have based many of my own ColdFusion libraries based upon his approach. This is his interface, which I will attempt to redo using Telerik's Kendo HTML5 library and document the process.

The purpose of this blog is hoped to be technical resource for other ColdFusion developers to move away from Adobe's based ColdFusion UI to another UI, such as Kendo, and to document the process. While this blog does not use ColdFusion's UI, I still hope to improve upon it or at least educate others on how to use ColdFusion with a Kendo UI.

This entry was posted on October 25, 2018 at 11:55 PM and has received 34 views.

There are currently 0 comments.




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 "Gregory's 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 Gregory's 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. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Gregory's Blog Version 1.01 June 13, 2019 00:49 PST.