How to open a Kendo ui window from another window?

Question

I could successfully open a Kendo Window by clicking on the menu.

My requirement is like, if I click on a button on this window, it should dynamically create an iframe and append to a div and append this new div to the parent container and show as a new window just like I open it from the menu.

I could successfully add the iframe and div to the parent, but when I open the window, its open inside the the window where I am and not from the parent container. My code is as below:

  $("#btn").click(function () {

        var k = "<div id='kk'><iframe style='height:600px;width:900px'></div>";
        $("#menuDiv", parent.document).append(k);

        $("#kk", parent.document).kendoWindow();
    });

Answer 1

Knowing that windows are floating despite of the HTML element that contains it, opening it from another one or even dynamically generating the content of the opened window is pretty simple.

Given the following HTML code that contains the original window:

<div id="container">
    <div id="win1">
        <h1>Window 1</h1>
        <button id="open" class="k-button">Open</button>
    </div>
</div>

We define a click handler for the button as:

$("#open").on("click", function() {
    var w2 = $("<div>Window2</div>");
    $("#container").append(w2);
    w2.kendoWindow({});
});

Where we append the second window (w2) dynamically generated to the container of the first window and then we initialize it as a kendoWindow.

We might have added the second window to the first one as doing:

$("#open").on("click", function() {
    var w2 = $("<div>Window2</div>");
    w1.element.append(w2);
    w2.kendoWindow({});
});

Where w1 is var w1 = $("#menuDiv").data("kendoWindow"); but that doesn't make any difference since windows are floating elements not constrained to it's parent HTML node.

You can see it in action here: http://jsfiddle.net/OnaBai/juunjch1/

And if you want that the content of the opened window is an iframe you should actually create the window with the option iframe set to true. Something like:

$("#open").on("click", function() {
    var w2 = $("<div>Window2</div>");
    $("#container").append(w2);
    w2.kendoWindow({
        content: "http://www.telerik.com",
        iframe: true
    });
});

And you can see it here: http://jsfiddle.net/OnaBai/juunjch1/2/