Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Window / Automatically Change Size

 

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

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.AutoSize.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <!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">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <!-- custom head section -->
        <!-- end of custom head section -->
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <style type="text/css">
                html, body, form
                {
                    height: 100%;
                    padding: 0;
                    margin: 0;
                }
                form
                {
                    margin: 0 auto;
                }
                .thumbPane
                {
                    margin: 0;
                    padding: 0 10px;
                    width: 276px;
                    clear: both;
                }
                
                .thumbPane li
                {
                    float: left;
                    list-style-type: none;
                    width: 90px;
                    height: 90px;
                    padding: 1px;
                }
                .toggleLink
                {
                    display: inline-block;
                    padding-left: 20px;
                    font: normal 14px "Segoe UI" , Arial, sans-serif;
                    color: #ffffff;
                    text-decoration: none;
                    background: url('Img/arrows.gif') no-repeat 5px -27px;
                }
                a.showLess
                {
                    background: url('Img/arrows.gif') no-repeat 5px 7px;
                }
                h1#ThumbsTitle
                {
                    margin: 0;
                    padding: 10px 10px 0 10px;
                    font-size: 18px;
                    font-weight: normal;
                    color: #ffffff;
                }
                p#ThumbsDescr
                {
                    margin: 0 0 10px 0;
                    padding: 0 10px;
                    font-size: 10px;
                    font-style: italic;
                    color: #ccc;
                }
            </style>
            <script type="text/javascript">
                var expanded = null;
                var hiddenDiv = null;
                var link = null;
                var galleryWin = null;
                var previewWin = null;
                var imgHolder = null;
                var lastClickedImg = null;

                function pageLoad()
                {
                    //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);

                }

                function sizePreviewWindow()
                {
                    //because of the demo's specifics - dynamically loading an image and autosizing the RadWindow based on that
                    //image's size, we need to ensure that the image is loaded before calling the autoSize() method
                    previewWin.autoSize(true);
                }

                function openWin(clickedImg)
                {
                    //change the border of the clicked image
                    $telerik.$(clickedImg).parent().css("background-color", "red");

                    //get the name of the thumbnail image
                    var imgName = clickedImg.src.substring(clickedImg.src.lastIndexOf("/") + 1);
                    //use the thumbnail image's name to build the src for the preview window
                    imgHolder.src = "Photos/" + imgName;

                    //show the window
                    previewWin.show();


                    //clear the border of the previously clicked image
                    $telerik.$(lastClickedImg).parent().css("background-color", "");

                    lastClickedImg = clickedImg;

                }



                function toggleExpand(clickedLink)
                {
                    //togle the hidden pane containing extra images
                    $telerik.$('#hiddenPane').toggle();
                    //change link's text

                    if ($telerik.$(clickedLink).text() == "Show more")
                    {
                        $telerik.$(clickedLink).text("Show less").addClass("showLess");
                    }
                    else
                    {
                        $telerik.$(clickedLink).text("Show more").removeClass("showLess");
                    }
                    //autosize the gallery window
                    galleryWin.autoSize(true);
                }

            </script>
        </telerik:RadCodeBlock>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post" class="qsfDark">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div id="offsetElement" style="height: 535px;">
            &nbsp;</div>
        <telerik:RadWindow ID="PreviewWindow" Skin="Black" 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" Skin="Black" 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>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451