Reuse of a Window

10 posts, 0 answers
  1. michael
    michael avatar
    11 posts
    Member since:
    Jan 2008

    Posted 21 Dec 2011 Link to this post

    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>


  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 22 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. michael
    michael avatar
    11 posts
    Member since:
    Jan 2008

    Posted 05 Jan 2012 Link to this post

    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.
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 06 Jan 2012 Link to this post

    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!
  6. Hristo
    Hristo avatar
    2 posts
    Member since:
    Dec 2011

    Posted 13 Jan 2012 Link to this post

    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.
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 16 Jan 2012 Link to this post

    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!
  8. michael
    michael avatar
    11 posts
    Member since:
    Jan 2008

    Posted 17 Jan 2012 Link to this post

    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
                        });

  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 18 Jan 2012 Link to this post

    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!
  10. Yevhen Poshyvaylo
    Yevhen Poshyvaylo avatar
    3 posts
    Member since:
    Feb 2013

    Posted 07 Feb 2013 Link to this post

    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?
  11. Jason
    Jason avatar
    1 posts
    Member since:
    Jan 2013

    Posted 13 Feb 2014 in reply to Yevhen Poshyvaylo Link to this post

    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();
        }
    }
Back to Top
Kendo UI is VS 2017 Ready