New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Automatic Size Adjustment

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 Q32010 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.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        Sys.Application.add_load(function() {
            $autoSizeDemo.galleryWin = $find("<%= GalleryWindow.ClientID %>");
            $autoSizeDemo.previewWin = $find("<%= PreviewWindow.ClientID %>");
            //get a reference to the image tag in the preview window
            $autoSizeDemo.imgHolder = $get("imageHolder");
            //add onload event for the image in the preview window
            $addHandler($autoSizeDemo.imgHolder, "load", sizePreviewWindow);
        })
    </script>
    <div class="demo-container no-bg" id="offsetElement">
        <telerik:RadWindow RenderMode="Lightweight" ID="PreviewWindow" runat="server" VisibleStatusbar="false" VisibleTitlebar="false"
            OffsetElementID="offsetElement" Top="-10" Left="310" AutoSizeBehaviors="Width, Height"
            AutoSize="true" KeepInScreenBounds="false">
            <ContentTemplate>
                <img src="javascript:void(0);" alt="Image holder" id="imageHolder" />
            </ContentTemplate>
        </telerik:RadWindow>
        <telerik:RadWindow RenderMode="Lightweight" ID="GalleryWindow" VisibleOnPageLoad="true" runat="server" Title="Photo Manager"
            VisibleStatusbar="false" AutoSize="true" AutoSizeBehaviors="Height, Width" OffsetElementID="offsetElement"
            IconUrl="~/Window/Examples/AutoSize/images/WindowIcon.gif">
            <ContentTemplate>
                <div style="width: 310px">
                    <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>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance