This is a migrated thread and some comments may be shown as answers.

Reuse of a Window

9 Answers 962 Views
Window
This is a migrated thread and some comments may be shown as answers.
michael
Top achievements
Rank 2
michael asked on 21 Dec 2011, 06:38 PM
I have a menu bar with an option that I want to open in a window. The contents of the window is dynamic and needs to be refreshed each time I open the window.

The first time I click on the option the window opens correctly, and when I click on the "close" icon, the window closes as expected.

The second time I click on the option, the window does not open. I suspect it has something to do with the state of the window.

Listed below is my code that I use to open the window:

    <script type="text/javascript">
        $(document).ready(function () {
            $(".menu-dialog").click(function () {
                var href = $(this).attr("href");
                var title = $(this).attr("title");
                var myWin = $("#anchor").kendoWindow({
                    width: "auto",
                    height: "auto",
                    modal: false,
                    resizable: true,
                    title: title,
                    content: href
                });
                return false;
            });
        });
    </script>

    <body>
        <div class="main">
            <div id="anchor"></div>
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear" />
<div class="footer" />
    </body>


9 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 22 Dec 2011, 04:53 PM
Hello Michael,

In order to show the window a second time, you need to call its open() method. The kendoWindow() plug-in only creates the client-side object and required HTML.

$(".menu-dialog").click(function () {
    var href = $(this).attr("href");
    var title = $(this).attr("title");
    var myWin = $("#anchor").kendoWindow({
        width: "auto",
        height: "auto",
        modal: false,
        resizable: true,
        title: title,
        content: href
    });
    myWin.data("kendoWindow").open();
    return false;
});  


Kind regards,

Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
michael
Top achievements
Rank 2
answered on 05 Jan 2012, 06:45 PM
Hi Alex,

I have finally got back to trying Kendo UI...

My previous problem was fixed with the suggested additional line of code, however I now have a different problem:

If I open the window, the contents is correctly displayed (in the window). After closing the window and re-selecting the menu option, the contents is displayed but not in a window. It replaces the parent window.

Clicking the "back" button and then re-selecting the same menu option seems to fix the problem.

Any suggestions?

Mike B.
0
Alex Gyoshev
Telerik team
answered on 06 Jan 2012, 02:33 PM
Hello Michael,

After revisiting the thread, I think that the following code should work in your scenario:

$(".menu-dialog").click(function () {
    var href = $(this).attr("href");
    var title = $(this).attr("title");
    var myWin = $("#anchor");

    if (!myWin.data("kendoWindow")) {
        // window not yet initialized
        myWin.kendoWindow({
            width: "auto",
            height: "auto",
            modal: false,
            resizable: true,
            title: title,
            content: href
        });
    } else {
        // reopening window
        myWin.data("kendoWindow")
            .content("Loading...") // add loading message
            .refresh(href) // request the URL via AJAX
            .open(); // open the window
    }

    return false;
});


Kind regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Hristo
Top achievements
Rank 1
answered on 13 Jan 2012, 03:24 PM
I found something very strange. Whan I try to reopen the window it reopens :) great. But the modality is actibg very strange. The first and the second time the window is modal, but the third and every next one it is not. Can you help me. Here is my code.

$('#btnOpen').click(function(){  
    var window = $("#window").kendoWindow({
       draggable: true,
       resizable: true,
       width: 'auto',
       height: 'auto',
       title: "Modal Window",
       modal: true
   });
   window.data("kendoWindow").open();
   $('#window').css('display', '');
   return false;
 });

Edit: When I close the window the screen flashes as if it was modal.
0
Alex Gyoshev
Telerik team
answered on 16 Jan 2012, 03:04 PM
Hello Hristo,

You are initializing the window on every click of the button. Please examine my previous post on how to initialize it only once, or destroy the window when it is deactivated (by calling its destroy() method).

Regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
michael
Top achievements
Rank 2
answered on 17 Jan 2012, 09:19 PM
The following code causes my app to hang when I click the close ("X") button...

               var onClose = function () {
                    var myWin = new $("#Kwindow").data("kendoWindow");
                    myWin.destroy();
                }

                var myWin = new $("#Kwindow");
                    myWin.kendoWindow({
                        width: "auto",
                        height: "auto",
                        modal: false,
                        resizable: true,
                        title: title,
                        content: href,
                        close: onClose
                    });

0
Alex Gyoshev
Telerik team
answered on 18 Jan 2012, 09:10 AM
Hello Michael,

The close event is triggered before the window is closed, allowing you to validate whether the window can be closed. You need to destroy it upon deactivation, i.e. in the deactivate event:

    deactivate: function() {
        this.destroy();
    }

All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Yevhen Poshyvaylo
Top achievements
Rank 1
answered on 07 Feb 2013, 04:15 PM
I've faced to the following issue:
 - there is a chain of modal kendo ui windows(one opened by the other);
 - when the last window closes it gets destoryed by calling method destroy.
but unexpectedly next windows becomes not modal - so to last windows in the chain are 'enabled' and usable.

I've analyzed in sources method destroy for window and found folowing code:
if (shouldHideOverlay) {
that._overlay(false).remove();
else if (modalWindows.length > 0) {
    windowObject(modalWindows.eq(modalWindows.length - 2), that.options.name)._overlay(true);                 
}
Why did developers use modalWindows.length - 2 instead of modalWindows.length - 1

Changed that code to
if
(shouldHideOverlay) {
that._overlay(false).remove();
} else if (modalWindows.length > 0) {
windowObject(modalWindows.eq(modalWindows.length - 1), that.options.name)._overlay(true);
}
fixed the issue, at least visually.
What do you think about this?
0
Jason
Top achievements
Rank 1
answered on 13 Feb 2014, 08:51 PM
I created a property on our view model to handle the creation of a modal window and the destruction of it when closed.  Pass in a Title for the window and a Kendo HTML Template. 

DisplayDialogTemplate: function (title, template) {
    if (!kendoWindow) {
        var kendoWindow = $("<div />").kendoWindow({
            title: title,
            resizable: false,
            modal: true,
            content: {
                template: template
            },
            close: function () { kendoWindow.data("kendoWindow").destroy() }  // $("input[id=wc-copyToClipboardDialogSelectedText]").length
        });
        kendoWindow.data("kendoWindow").center().open();
    }
}
Tags
Window
Asked by
michael
Top achievements
Rank 2
Answers by
Alex Gyoshev
Telerik team
michael
Top achievements
Rank 2
Hristo
Top achievements
Rank 1
Yevhen Poshyvaylo
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Share this question
or