Close Window from within External Content

12 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    58 posts
    Member since:
    Jun 2012

    Posted 09 Jul 2012 Link to this post

    I am creating a window as shown below:

    $("#wnd" + uniqueId).kendoWindow({
                           actions: ["Refresh", "Maximize", "Minimize", "Close"],
                           draggable: true,
                           height: Height + "px",
                           modal: false,
                           resizable: true,
                           title: Title,
                           width: Width + "px",
                           content: NavURL,
                           iframe: true
                       });

    But how can I close this window from a button on the content that is on the NavURL?
  2. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 10 Jul 2012 Link to this post

    Hi Jonathan,

    The Window object can be accessed from its content in two ways, depending on whether the content resides in an iframe or not.

    1. If an iframe is used, then you can reach the Window client object only if the iframe URL is on the same domain as the main page. In this case use the window.parent property, which gives you a reference to the main / parent page.

    window.parent.$("#window-ID").data("kendoWindow").close();


    2. If an iframe is not used, you can reach the Window by using the closest() jQuery method...

    $( buttonInsideWindow ).closest(".k-window-content").data("kendoWindow").close();

    ... or by referencing the element with the window ID directly, similarly to the first case, but without window.parent.


    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ravisankar
    Ravisankar avatar
    2 posts
    Member since:
    Jan 2012

    Posted 02 Aug 2012 Link to this post

    I have a main page that has button. On clicking the button a window opens which has another html as its content. In the child window i have a button clicking on which the window should close. I tried your example and couldnt get it working.

     <script>
             $(document).ready(function () {
     
                 $("#btnCancel").closest(".k-window-content").data("kendoWindow").close();
     
             });
                </script>

    btnCancel is the button id.
    Please let me know what i am doing wrong.
  4. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 03 Aug 2012 Link to this post

    Hi Ravisankar,

    I don't see how the provided code is related to a button click. Please explain in more detail.

    The provided code as is may not be executed correctly, because the Window client object may still not be initialized.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ron DeFreitas
    Ron DeFreitas avatar
    26 posts
    Member since:
    Apr 2010

    Posted 04 Dec 2012 Link to this post

    Ravisankar, you need to bind the click event handler for your button:
    $(document).ready(function () {
        $("#btnCancel").live("click", function (e) {
            if ($(this).closest(".k-window-content").data("kendoWindow")) $(this).closest(".k-window-content").data("kendoWindow").close();
        })
    });
    The code sample also takes into account whether or not the window has been initialized.

    Optionally you can add e.preventDefault() if you want to stop the click event's normal behavior.
  6. John
    John avatar
    25 posts
    Member since:
    Mar 2007

    Posted 13 Dec 2012 Link to this post

    Just resurrecting this.

    If I try this, when I click the close button in my window I get the following error:

    Unable to get value of the property 'close': object is null or undefined
  7. John
    John avatar
    25 posts
    Member since:
    Mar 2007

    Posted 13 Dec 2012 Link to this post

    OK, I fixed it!
  8. Flavio Lepka
    Flavio Lepka avatar
    8 posts
    Member since:
    Mar 2006

    Posted 01 Jul 2013 Link to this post

    tks
  9. Samuel
    Samuel avatar
    2 posts
    Member since:
    Apr 2018

    Posted 23 Apr 2020 Link to this post

    Hello, 

    Sorry to re-open this case but I have a similar problem to John:

    So I have a kendo window not initialized: 

    @(Html.Kendo().Window()
                    .Width(300)
                    .Visible(false)
                    .Name("CreateWorkflow")
                    .Title(Localizer["WorkflowCreation"].Value)
                    .Height(380)
                    .Width(730)  
                    .Content("")

     

    that I fill and open in JS :

    var window = $("#CreateWorkflow").data("kendoWindow");       
    window.refresh({
            url: "/Controller/Action?Ids=" + MyParameter
    });
    window.open().center();

     

     

    And when I try to close it from a button on my child page:

    <button id="CancelButton" onclick="ClosePopup()">Cancel</button>

     

    Which call the javascript : 

    function ClosePopup() {
        alert('Test');
        var window = $("#CreateWorkflow").data("kendoWindow");
        window.close();
    }

     

    The ClosePopup is called successfully, but I have the message :

    "Cannot read property 'close' of undefined" and I don't know why.

    I have the same result if I use the "$( buttonInsideWindow ).closest(".k-window-content").data("kendoWindow").close();" on the child page.

  10. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 24 Apr 2020 Link to this post

    Hi Samuel,

    Based on the provided code snippets, I assume that the window widget is NOT using an iframe, right?

    In this case, both techniques for closing the window should work:

    $("#window-id-here").data("kendoWindow").close();
    // or
    $("#button-id-here").closest(".k-window-content").data("kendoWindow").close();

    Possible reasons for the problem may be:

    - The Window instance is recreated one more time with JavaScript. This is not needed, unless you have destroyed it. Search for unnecessary .kendoWindow() calls in the custom JavaScript code and remove them.
    https://docs.telerik.com/kendo-ui/intro/widget-basics/jquery-initialization#duplicate-initialization

    - A new jQuery file is loaded on the page after the Window instance has been created. For example, check all partial views, including the one that the Window loads.
    https://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#widgets-are-unavailable-or-undefined

    - There are several elements with a "CreateWorkflow" ID on the page.

    If the problem persists after checking the above hints, please send us a live URL or a runnable example and we will check it. The issue should be quick to fix.

    Regards,
    Dimo
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  11. Samuel
    Samuel avatar
    2 posts
    Member since:
    Apr 2018

    Posted 24 Apr 2020 Link to this post

    Hello Dimo, 

     

    Thanks for your fast answer, you saved my time! 

    Indeed the problem was I was loading a second time my JQuery file in the partial view that my window loaded.

    I removed this and it's working like a charm!

     

    Thanks again, and have a good day

  12. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 24 Apr 2020 Link to this post

    Hi Samuel,

    Great, I'm happy the issue was resolved. Have a nice weekend!

    Regards,
    Dimo
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top