Gregory's Blog

Reopen an existing Kendo window.

I have been coding thousands of Kendo windows throughout the last several years, and ran into a problem that I have never seen before, and could not find a solution (or even a hit) on google. While coding a window that will hold a Kendo map, I ran into the following error when I opened the window, closed it, and then tried to open it again: Cannot call method 'destroy' of kendoWindow before it is initialized. This error is just not found.

Type in "Cannot call method 'destroy' of kendoWindow before it is initialized" into google, you won't find a single result. You'll find many other topics, but not one that matches this particular error message. Here is a solution on how I overcame this error, and why I think that it may have happened in the first place.

My personal website uses a Greensock animation carriage. It is my guess that the errors are due to having a lot of subtle animations there, and it is resource intensive as it has extensive scroll and touch listeners. Along with the Kendo map widget, the site is very resource intensive on the client end. This is probably freezing the destroy methods that are used to typically close a Kendo window. Whatever the actual reason, when I try to destroy the window that contains the map, as I usually do, I run into multiple errors and the window will not open again.

My approach was to build a function that would check if the window was previously opened, and then closed, to simply re-open it and then refresh the content (it has dynamic content).

If the window was not already created (by someone opening it), then I would create the window, as usual, but I eliminated Kendo's destroy method when the window is closed. I don't want to destroy it- in fact- I can't. It causes errors.

If the window was opened, and closed (making the window hidden since it does not have the destroy method), I would re-open the existing window. Here is the code:

view plain about
1function openMapWindow() {
2            
3    $( document ).ready(function() {
4                
5    /* This is a totally weird approach to open a kendo window. I have coded kendo windows for several years, and have probably coded several hundred windows, but using a Kendo window in this greensock platform, especially with Kendo maps, just does not work. Here, I am testing to see if the window is:
6    1) defined (the first mapWindow line of code will error out if the window has not already been opened)
7    2) and if the window is defined, is it hidden (it will be- I am not destroying the window like I always do in other code as I have problems with that here.)
8    If both conditions ARE true, then I merely reopen the existing window that was hidden when the user clicked on the 'x' at the top of the window.
9    If both conditions are NOT true, then I create the window as usual (but I don't destroy it as usual as I had problems there too).
10    Essentially what I am doing is:
11        - Creating the window if the window was not first opened and then closed.
12        - Or reopening the window if it was opened and then closed.
13    */

14    // This must be put into a try block as the 'var mapWindow =         $("#mapWindow").data("kendoWindow");' will cause errors if the window has not already bee already opened.
15    try {
16        // Get a reference to the opened window.
17        var mapWindow = $("#mapWindow").data("kendoWindow");
18        // Determine if the window was closed...
19        var mapWindowIsHidden = mapWindow.element.is(":hidden"); //returns true or false
20        // If the window was closed (and now hidden), re-open the existing window.
21        if (mapWindowIsHidden){
22            // Change the title
23            mapWindow.title(getMapDataByScene(sceneIndex));
24            // Open it.
25            mapWindow.open();
26            // And refresh the window.
27            mapWindow.bind("refresh", window_refresh);
28                    }
29        // Otherwise create the window (for the first time)...
30        } catch(e) {
31                    
32            // Initialize the window.
33            var mapWindow = $('#mapWindow').kendoWindow({
34            title: getMapDataByScene(sceneIndex),
35            actions: ["Refresh", <cfif not session.isMobile>"Minimize", </cfif>"Close"],
36            modal: false,
37            resizable: true,
38            draggable: true,
39            pinned: true, // Note: we must pin this window, or it will open at the top of the page at all times when we use this approach.
40            position: { top: 100 },
41            width: getGrizzlyWindowWidth(),
42            height: getGrizzlyWindowHeight(),
43            iframe: false, // Don't use iframes unless it is content derived outside of your own site.
44            content: "/includes/layers/map.cfm?sceneIndex=" + sceneIndex,// Make sure to create an absolute path here. I had problems with a cached page.
45        <cfif session.isMobile>
46            animation: {
47                close: {
48                effects: "slideIn:right",
49                reverse: true,
50                duration: 500
51            }
52        }
53    </cfif>
54    }).data('kendoWindow').center();// Center the window.
55                                
56    }//..try
57});
58            
59}//..function openMapWindow() {

Additionally, if you don't need a dynamic window where the content changes, you can simply use the following simple approach:

view plain about
1// Dynamic window for the approval routing picker.
2    // This window also has an id variable.
3    // Original inspiration provided by Ona Bai (http://dojo.telerik.com/@OnaBai/ekIba/2).
4    // To use, first create a div at the top of the page like so: <div id="dynamicDetailWindow"></div>
5    function dynamicRoutingPickerWindow(id, id2, name, width, height) {
6        var thisWin = $("#" + name).data("kendoWindow");
7        if (thisWin) {
8            thisWin.open();
9        } else {
10            thisWin = $("<div id='" + name + "'></div>").kendoWindow({
11            actions: ["Minimize", "Maximize", "Refresh", "Close"],
12            title: "Contract Details",
13            content: "includes/routingPicker.cfm?contractId=" + id,
14            width: width,
15            height: height,
16            modal: false,
17            resizable: true,
18            draggable: true,
19            // Open the window near the top of the page.
20            position:{
21                top:"15%",
22            },
23            appendTo: "#dynamicRoutingPickerWindow",
24            visible: true
25            }).data("kendoWindow").center();
26        }
27 }

This entry was posted on April 19, 2019 at 12:15 AM and has received 17 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.