Как открыть окно Kendo ui из другого окна?

Question

Я мог бы успешно открыть окно кендо, нажав на меню.

Мое требование таково: если я нажму на кнопку в этом окне, оно должно динамически создать iframe, добавить к div и добавить этот новый div к родительскому контейнеру и отобразить как новое окно, как я открываю его из меню.

Я мог бы успешно добавить iframe и div к родителю, но когда я открываю окно, оно открывается внутри окна, где я нахожусь, а не из родительского контейнера. Мой код, как показано ниже:

  $("#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

Знать, что окна плавают, несмотря на HTML-элемент, который его содержит, открывать его из другого или даже динамически генерировать содержимое открытого окна довольно просто.

Учитывая следующий HTML-код, который содержит исходное окно:

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

Мы определяем click обработчик для кнопки как:

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

Куда мы добавляем второе окно (w2) динамически генерируется в container первого окна, а затем мы инициализируем его как kendoWindow,

Мы могли бы добавить второе окно к первому как:

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

куда w1 является var w1 = $("#menuDiv").data("kendoWindow"); но это не имеет никакого значения, поскольку окна являются плавающими элементами, не привязанными к родительскому узлу HTML.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/OnaBai/juunjch1/

И если вы хотите, чтобы содержимое открытого окна iframe вы должны создать window с возможностью iframe установлен в true, Что-то вроде:

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

И вы можете увидеть это здесь: http://jsfiddle.net/OnaBai/juunjch1/2/