title: How to change kendo window position when window resize
body: <p>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.          </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(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);
  
  });
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="leftCol" style="width:40%; float:left;"&gt;
        Left Contents
  &lt;/div&gt;
  
  &lt;div id="rightCol" style="width:55%; float:right"&gt;
     &lt;div id="templateWindow"&gt;
            Right top contents          
     &lt;/div&gt; 
  
     &lt;div id="RecentWindow"&gt;       
        Right bottom contents
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>thanks</p>