Window

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Window - Automatic Size Adjustment

 

Using the AutoSize property


From Q1 2009, RadWindow adds a new feature to its list - the AutoSize property. When this property is set to true, the window will resize itself according to the size of the content page. If the content page's dimensions are bigger than the parent one's, RadWindow will fill the browser and render scrollbars for viewing the rest of the content page.

In Q3 2010 we added a new property AutoSizeBehaviors that allows the developer to get a better control over the autosizing functionality. The property is an enum that accepts multiple flags:

  • Default
  • Width
  • WidthProportional
  • Height
  • HeightProportional

When AutoSizeBehaviors="Default", RadWindow resizes itself proportionaly by width and height and changes its position accordingly to the new size. If the property is set to Width or Height, the window is sized to the left or to the bottom only, without changing the control's position.

Note: When AutoSize="true";, the size of the content page is taken in window.onload. This means that if you change the size of the content page on the client (e.g. with Ajax), the RadWindow will not resize after the new content is displayed. In such scenario autoSize() should be called manually.

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Setting automatic window size in ASP.NET PopUp Window | RadWindow demo</title>
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
     <script src="scripts.js" type="text/javascript"></script>
     <!-- custom head section -->
     <!-- end of custom head section -->
     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
          <script type="text/javascript">
               function pageLoad() {
                    $ = $telerik.$;
                    //get references to the 2 RadWindows
                    galleryWin = $find("<%= GalleryWindow.ClientID %>");
                    previewWin = $find("<%= PreviewWindow.ClientID %>");
                    //get a reference to the image tag in the preview window
                    imgHolder = $get("imageHolder");
                    //add onload event for the image in the preview window
                    $addHandler(imgHolder, "load", sizePreviewWindow);
               }
          </script>
     </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadFormDecorator ID="decorator" runat="server" DecoratedControls="All">
     </telerik:RadFormDecorator>
     <div id="offsetElement" style="height: 535px;">
          &nbsp;
     </div>
     <telerik:RadWindow ID="PreviewWindow" runat="server" VisibleStatusbar="false" VisibleTitlebar="false"
          OffsetElementID="offsetElement" Top="-10" Left="316" AutoSizeBehaviors="Width, Height"
          AutoSize="true" KeepInScreenBounds="false">
          <ContentTemplate>
               <img src="javascript:void(0);" alt="Image holder" id="imageHolder" />
          </ContentTemplate>
     </telerik:RadWindow>
     <telerik:RadWindow ID="GalleryWindow" VisibleOnPageLoad="true" runat="server" Title="Photo Manager"
          VisibleStatusbar="false" AutoSize="true" AutoSizeBehaviors="Height, Width" OffsetElementID="offsetElement"
          Top="-10" Left="-10" IconUrl="~/Window/Examples/AutoSize/Img/WindowIcon.gif">
          <ContentTemplate>
               <div style="width: 296px">
                    <h1 id="ThumbsTitle">Latest Tour Photos</h1>
                    <p id="ThumbsDescr">
                         Click on a thumbnail for real size preview.
                    </p>
                    <ul class="thumbPane">
                         <li>
                              <img src="Photos/thumbs/1.jpg" alt="image 1" onclick="openWin(this); return false;" />
                         </li>
                         <li>
                              <img src="Photos/thumbs/3.jpg" alt="image 2" onclick="openWin(this); return false;" />
                         </li>
                         <li>
                              <img src="Photos/thumbs/2.jpg" alt="image 3" onclick="openWin(this); return false;" />
                         </li>
                         <li>
                              <img src="Photos/thumbs/5.jpg" alt="image 4" onclick="openWin(this); return false;" />
                         </li>
                         <li>
                              <img src="Photos/thumbs/4.jpg" alt="image 5" onclick="openWin(this); return false;" />
                         </li>
                         <li>
                              <img src="Photos/thumbs/6.jpg" alt="image 6" onclick="openWin(this); return false;" />
                         </li>
                         <li>
                              <img src="Photos/thumbs/7.jpg" alt="image 7" onclick="openWin(this); return false;" />
                         </li>
                         <li>
                              <img src="Photos/thumbs/10.jpg" alt="image 8" onclick="openWin(this); return false;" />
                         </li>
                         <li>
                              <img src="Photos/thumbs/8.jpg" alt="image 9" onclick="openWin(this); return false;" />
                         </li>
                    </ul>
                    <div id="hiddenPane" style="display: none">
                         <ul class="thumbPane">
                              <li>
                                   <img src="Photos/thumbs/11.jpg" alt="image 10" onclick="openWin(this); return false;" />
                              </li>
                              <li>
                                   <img src="Photos/thumbs/9.jpg" alt="image 11" onclick="openWin(this); return false;" />
                              </li>
                              <li>
                                   <img src="Photos/thumbs/12.jpg" alt="image 12" onclick="openWin(this); return false;" />
                              </li>
                              <li>
                                   <img src="Photos/thumbs/13.jpg" alt="image 13" onclick="openWin(this); return false;" />
                              </li>
                              <li>
                                   <img src="Photos/thumbs/14.jpg" alt="image 14" onclick="openWin(this); return false;" />
                              </li>
                              <li>
                                   <img src="Photos/thumbs/15.jpg" alt="image 15" onclick="openWin(this); return false;" />
                              </li>
                         </ul>
                    </div>
                    <div style="clear: both; padding: 5px 5px 10px 5px;">
                         <a id="toggleLink" href="javascript:void(0);" class="toggleLink" onclick="toggleExpand(this); return false;">
                              Show more</a>
                    </div>
               </div>
          </ContentTemplate>
     </telerik:RadWindow>
    </form>
</body>
</html>