Nesting iframe kendo windows

[Josh]

Situation:

I have 1 kendo iframe window open.  I want to open a new kendo window from a trigger element within this window.  

Issue:
The 2nd window is bigger than the first, so I want to open it so that it displays "over top" of the 1st window.

So far unsuccessful attempts:
I have used window.top to dynamically create the div window element on the root window body but this still opens the window inside the 1st window.

How would I go about doing this?

[Dimo]

Hello Josh,

I am copy-pasting my reply from the corresponding support ticket of yours. Please avoid posting duplicate forum threads and support tickets, as this can lead to overhead in our support staff. Thank you for understanding.

Indeed, the described scenario is cumbersome to achieve and support. Obviously the parent page and the iframe page belong to the same domain (otherwise you would have no access between them), so you can consider abandoning the iframe altogether and use a partial view inside the first Kendo UI Window. In this way the second Kendo UI Window will be defined and operated in the same page and the same scope and you will be able to access and control it more easily.

Regards,
Dimo
Telerik

[Josh]

[POST THIS for anyone with simliar iframe issues]

I am able to work around it and get it to open on top of the window but I was hoping you guys have a cleaner solution.

On new window open I am dynamically generating a custom div in the ROOT window (window.top) and then passing that ele to a global open window method.  

To give further background I have an ASP.NET MVC 4 web app that utilizing RequireJS.  So I have a global object on each window level.

I initially thought that as long as I created the window element on the root window that the kendowWindow method would initialize it in the context of the element's window but that is not the case (or not exactly).  

Looking at the window source code it dawned upon me that it is initializing in the context of the window.  (assuming the current window object is how I want it initialized, in this case I want it initialized based on the element's window)

In order to get it to work I have to call the element.kendowWindow() from a module ON the root window level.  That is contrast to my original attempt which simply called the kendoWindow method on the nested iframe window eventhough my window element was technically appended to the root window object.

[Deepak Subhedar]

I have similar situation where in I need to open nested iframe kendo windows.
Please share your code as to how you are opening each window and closing it.
I was able to open the nested windows but closing the top most window closes all the windows.

[Dimo]

Hello Deepak,

If you are using nested Kendo UI Windows with iframes, then all child Windows are inside the topmost Window, so closing it will naturally close all nested Windows.

Regards,
Dimo
Telerik

[Josh]

Deepak,

When using the windows in iframe mode, my situation dictated that I would have modal windows opened from other modal windows but the size needed to be bigger than the original modal window.

I got around this by opening the window from window.top (if exists) function so that he size is based on the full browser window.

Outside of that you could always keep track of your open windows in some object and close them at will.

[Deepak Subhedar]

Is it possible to share your implementation throiugh an example code.
As I understand you are attaching the window to the parent document so that each window is top of other .
Parent Document
|------> Window A
|-------> Window B

Now closing B should only close B as it is in separate IFRAME.

[Deepak Subhedar]

If the child windows are attached to the parent document (window.top).
I see the window B is on top of window A and both have their own IFRAME>
Now when try closing B using window.parent.... both get closed.

[Josh]

I am not sure the closing issue you are having but basically  just make sure the function that is opening the window is located from the window.top document.

This way the documents are independent of one another and you can then referenced the window to close based on an ID or object you saved.

I do not have much of a sample as it is all just basic coding with the kendo window objects.


Webiste page = > open win A from website DOM

------Win B, open from website DOM (same as A), this way B is independent of A

[Deepak Subhedar]

HI Josh,

Thanks for the reply. Attached is my sample code.
Where I am not able to close the first window.
Try it on chrome from the kendo examples grid folder.
<!DOCTYPE html>
<html>
<head>
    <title>Binding to local data</title>    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
       
    </script>
   
   
</head>
<body>
   
        <a class="offline-button" href="../index.html">Back</a>
   
            <script src="../../content/shared/js/products.js"></script>        <div id="example" class="k-content">
            <div id="grid"></div>
   <div id="_kwindow_"></div>
            <button id="win" onclick="javascript:openMe()">Open Window</button>
   <button id="winclose" onclick="javascript:closeMe()">Close Window</button>
   
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: products,
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" },
                                        UnitsInStock: { type: "number" },
                                        Discontinued: { type: "boolean" }
                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 430,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { field: "Discontinued", width: "130px" }
                        ]
                    });
                });
    function openMe(){
     var wname = 'window_' + new Date().getTime();
     var windiv = "<div id=" + "'" + wname + "'" + "class=" + "'" + 'g2-win' + "' " + "></div>";
     window.top.$('#' + '_kwindow_').append(windiv);
     var w =  window.parent.$('#' + wname).kendoWindow({
      actions: ['Close'],
      iframe : true,
                   width: 300,
                   height: 400,
                   left: 100,
                   top: 100,
                   modal: true,
                   title: 'TEST WINDOW',
                   draggable: true,
                   resizable: false,
                   activate: function () {
                    
                   },
                   content: "file:///C:/Users/dsubhedar/Downloads/03108kendoui.complete.2013.2.718.commercial/examples/web/grid/local-data.html",
                   close: function () {
     
    var d = $('#' + 'grid').data().kendoGrid.dataSource._total;
    alert(d);
                   }
     }).data("kendoWindow").open();
    }
    function closeMe() {
        var a = window.parent.$('.g2-win:last').attr('id');
     alert('ID of the window' + a);
     window.parent.$('#' + a).data('kendoWindow').close();
    }
            </script>
        </div></body>
</html>