Close Window from within External Content

[Jonathan]

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?

[Dimo]

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

[Ravisankar]

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.

[Dimo]

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

[Ron DeFreitas]

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.

[John]

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

[John]

OK, I fixed it!

[Flavio Lepka]

tks

[Samuel]

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.

[Dimo]

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

[Samuel]

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

[Dimo]

Hi Samuel,

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

Regards,
Dimo
Progress Telerik