Best way to resize window when content changes via javascript?

[dstj]

Hi,

I'm using a RadWindow to dynamically host a "complex" UserControl that has section dynamically hiding and showing from javascript events. As a result, the content of the RadWindow grows or shrinks. I'd like to have the RadWindow also grow or shrink instead of having the scroll bar appear. AutoSize only resizes the windows on the initial load, so I cannot use it.

Here is a sample project that reproduce the problem (please run it) :

WebForm2.aspx

    <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadWindow ID="wnd" runat="server" Modal="true" ShowContentDuringLoad="true" VisibleStatusbar="false" VisibleOnPageLoad="true"
         VisibleTitlebar="true" Behaviors="Close,Move,Resize" AutoSize="false" EnableViewState="false" Skin="Default" Top="100" />

        <script type="text/C#" runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                Control ctrl = LoadControl("WebUserControl2.ascx");
                wnd.ContentContainer.Controls.Add(ctrl);
            }
        </script>

       <script type="text/javascript">
       <!--
          Sys.Application.add_load(function() {
             var $innerDiv = $('#innerDiv');
             $innerDiv.click(function(evt) {
                var rwnd = $find('<%= wnd.ClientID %>');

                var w = this.offsetWidth + 16;     // 16 is a magic number to cope for the borders of the RadWindow...
                if (rwnd.get_width() != w) {
                   rwnd.set_width(w);
                }

                var h = this.offsetHeight + 50;     // 50 is an arbitrary fudge factor to compensate for borders and title bar...
                if (rwnd.get_height() != h) {
                   rwnd.set_height(h);
                }
             });
             $innerDiv.click();
          });
       -->
       </script>
    </form>

WebUserControl2.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl2.ascx.cs" Inherits="WebApplication1.WebUserControl2" %>

<div id="innerDiv">
   <div style="width: 500px;">
      <input type="radio" id="rb01" name="rb" /><label for="rb01">Show div1</label>
      <input type="radio" id="rb02" name="rb" /><label for="rb02">Show div2</label>
      <input type="radio" id="rb03" name="rb" /><label for="rb03">Show none</label>
   </div>
   <div id="div1" style="display:none;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non feugiat sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
   </div>

   <div id="div2" style="display:none;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non feugiat sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin fermentum nulla tellus, sed sodales lacus. Maecenas ante eros, varius vel euismod ac, condimentum nec purus. In feugiat viverra nulla a porta. Etiam bibendum blandit purus sagittis dignissim. Integer eleifend porta imperdiet. Curabitur vehicula lobortis lorem, et placerat erat venenatis at. Aenean sit amet mauris a elit sagittis ultrices ut eget nisl. In in quam erat. Sed porta molestie ultricies. Pellentesque pulvinar risus eget nisi suscipit in porttitor nulla semper. </p>
   </div>
   <script type="text/javascript">
   <!--
      $("#rb01").click(function() {
         $("#div1").show();
         $("#div2").hide();
      });
      $("#rb02").click(function() {
         $("#div1").hide();
         $("#div2").show();
      });
      $("#rb03").click(function() {
         $("#div1").hide();
         $("#div2").hide();
      });
   -->
   </script>
</div>

The problems are:
1) The initial positioning is wrong (Top=100 is not respected). This seems to happen when I add the style="width: 500px;" for the first div.

2) The initial height is wrong: too small.

3) After that, if we resize manually, it seems to work ok where no scrollbars are visible, but if they appear the 16px padding is not enough and the windows becomes narrower on each subsequent click.

4) I tried calling rwnd.autoSize() instead, but it does not produce a good result as the RadWindow is initially too narrow, it sometime moves around in the screen and it always leaves a big blank space in the bottom of the RadWindow. Try it.

So, can you please help me to find out what is the best way to match the windows size to its content ?

Thanks,



Dominic.
using v2009.3.1208.35

[Svetlina Anati]

Hello dstj,

The easiest way to achieve what you need is to explicitly call teh autoSize method (if you want animation effect you should pass argument true). Note, however, that you should set height 100% to the main page, set overflow to the outermost wrapper DIV in the user control and also do not use the show and hide methods of jQuery but simply change the display.

For your convenience I prepared a demo for you and it worked fine on my side with the 2009.3.1208 version that you have noted you are using.


Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[dstj]

Hi, thanks for the reply and sample project. From your demo, I managed to get a correct result. The two keys points are :

- Set width and overflow: auto on the outmost div

<div id="innerDiv" style="width:500px; overflow:auto;">

- The delayed call to rwnd.autoSize() using a timer.

setTimeout(function(){ GetRadWindow().autoSize(); }, 100);

What would be the smallest timeout that can be used? I tried using 10-15 and it seemed to work ok. But could that create problems on some client browsers?

Using jQuery's hide() and show() does not seem to change anything. Why do you recommend not using it?

Thanks,

Dominic.

[Svetlina Anati]

Hi dstj,

I put such a timeout because I could not test with your original page but in case you have tested with a smaller timeout and everything is OK I believe that you will get a reliable behavior if you reduce it e.g to 10ms.

As to the jQuery methods, while testing with them in a specific sequence of steps I was able to reproduce an unneeded scrollabr which did not exist when simply the display is changed. Furthermore, it is best to keep yourr code as simple as possible and in this case it is easier to use standard javascript and also reduces the load on the page.

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.