How to change kendo window position when window resize

Question

I tried to put the kendo window inside div but kendo window position does not change when I change the browser size (need to refresh the page to change the position). I jut want to show two kendo window with grid on the right side of the page and it change size and position when browser size and position changed.

<script type="text/javascript">
$(document).ready(function () {

    $("#templateWindow").kendoWindow({
        actions: {},
        title: "Recent Report Templates",
        width: $("#rightCol").width(),
        draggable: false,
        resizable: false
    })
    .closest(".k-window").css({
        top: $("#rightCol").offset.top,
        left: $("#rightCol").offset.left
    });

    var templateWindow = $("#templateWindow");
    var offset = templateWindow.offset();
    var top = offset.top;
    var bottom = top + templateWindow.height() + 35;

    $("#RecentWindow").kendoWindow({
        actions: {},
        title: "Recent Run Reports",
        width: $("#rightCol").width(),
        draggable: false,
        resizable: false
    })
    .closest(".k-window").css({
        top: bottom,
        left: $("#rightCol").offset.left
    });

    $("#rightCol").css("min-height", $("#templateWindow").height() + $("#RecentWindow").height() + 100);

});

<div id="leftCol" style="width:40%; float:left;">
      Left Contents
</div>

<div id="rightCol" style="width:55%; float:right">
   <div id="templateWindow">
          Right top contents          
   </div> 

   <div id="RecentWindow">       
      Right bottom contents
   </div>
</div>

thanks

Answer 1

I would suggest a slightly different approach but I think that it makes what you want...

The first important thing is bind an event handler to window resize, so what I do is:

// Create Template window with the width that I want (55%)
var template = $("#templateWindow").kendoWindow({
    actions  : {},
    title    : "Recent Report Templates",
    width    : "55%",
    draggable: false,
    resizable: false
}).data("kendoWindow");

// Same for Recent Report window
var recent = $("#RecentWindow").kendoWindow({
    actions  : {},
    title    : "Recent Run Reports",
    width    : "55%",
    draggable: false,
    resizable: false
}).data("kendoWindow");

// Create a function that places template window in the top 
// right position (actually I've left a 5 pixels margin, I think 
// it is nicer)
function placeTemplateWindow() 
    template.wrapper.css({ top: 5, right: 5 });
}

// Create a function that places recent window 5px bellow template window
function placeRecentWindow() {
    var top = template.wrapper.position().top + template.wrapper.outerHeight() + 5;
    recent.wrapper.css({top: top, right: 5 });
}

// Initially windows placement     
placeTemplateWindow();
placeRecentWindow();

// Intercept any browser resize and re-invoke the placement windows
$(window).resize(function () {
    placeTemplateWindow();
    placeRecentWindow();
});

You need to do this because windows are actually floating and not fixed to a position. Obviously there are other ways of getting similar visual result but I did not want to change your initial idea of using kendo windows.