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

Close Window from within External Content

11 Answers 1526 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 10 Jul 2012, 02:46 AM
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?

11 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Jul 2012, 08:52 AM
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!
0
Ravisankar
Top achievements
Rank 1
answered on 03 Aug 2012, 02:45 AM
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.
0
Dimo
Telerik team
answered on 03 Aug 2012, 11:07 AM
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!
0
Ron DeFreitas
Top achievements
Rank 2
answered on 05 Dec 2012, 05:09 AM
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.
0
John
Top achievements
Rank 1
answered on 13 Dec 2012, 10:34 AM
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
0
John
Top achievements
Rank 1
answered on 13 Dec 2012, 11:42 AM
OK, I fixed it!
0
Flavio Lepka
Top achievements
Rank 1
answered on 01 Jul 2013, 02:32 PM
tks
0
Samuel
Top achievements
Rank 1
answered on 23 Apr 2020, 11:37 AM

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.

0
Dimo
Telerik team
answered on 24 Apr 2020, 07:11 AM

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.
0
Samuel
Top achievements
Rank 1
answered on 24 Apr 2020, 07:23 AM

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

0
Dimo
Telerik team
answered on 24 Apr 2020, 11:34 AM

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.
Tags
Window
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ravisankar
Top achievements
Rank 1
Ron DeFreitas
Top achievements
Rank 2
John
Top achievements
Rank 1
Flavio Lepka
Top achievements
Rank 1
Samuel
Top achievements
Rank 1
Share this question
or