Autosize automatically RadWindow with ContentTemplate

2 posts, 0 answers
  1. Sunil
    Sunil avatar
    237 posts
    Member since:
    Jan 2004

    Posted 10 Jan Link to this post

    Requirements

    Telerik Product and Version

    Q2 2015 and later 

    Supported Browsers and Platforms

    Chrome, Firefox, Edge,Opera,  IE versions 9 and later

    Components/Widgets used (JS frameworks, etc.)

    jQuery


    PROJECT DESCRIPTION 
    This code library is a JavaScript library that will autosize all RadWindows in a page in an automated manner without the developer writing any code. The only restriction is that the RadWindow must have a content template and not have it's NavigateURL property set to some URL.  A small JavaScript library needs to be included in the page for this and also you must include jQuery else this will not work.

    You can check out the online demo for this at http://kandoodev.com/autosizeradwindow.aspx

    STEPS to use this library

    Only a single step is required as explained below.

    1. Include the JavaScript file autoSizeRadWindow.min.js in your content page or master page in one of the following two ways.
      • Include the file using RadScriptManager as in code below.
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
                <asp:ScriptReference Path="~/scripts/AutoSizeRadWindow.min.js" />
            </Scripts>
        </telerik:RadScriptManager>
      • Include the file using the script tag as in code snippet below. Make sure that the script tag is at end of page before closing form tag, else you might get JavaScript errors when page renders.
          <script src="scripts/AutoSizeRadWindow.min.js"></script>
            </form>
        </body>
        </html>

     

    DEMO files attached

    Attached are files you will need to create a demo on your laptop. You can create a website project with C# in Visual Studio and then copy the files attached to the root of your website project.

    • The demo page is called autosizeradwindow.aspx that you need to render in your browser.
    • The script file autosizeradwindow.min.js is under Scripts folder. 
    • Make sure to specify an appropriate connection string for Northwind database in the web config file since one of the RadWindows in demo page has a RadGrid that uses Northwind database. The name of this connection in web config is NorthWindConnectionString.

     

    Some important points about this library are as mentioned below.

    • This works on non-mobile and mobile screens.
    • Autosizing will work across all render modes, skins and animations.
    • Developer does not need to bother about any markup rules for ContentTemplate unlike the inbuilt autosize functionality available with RadWindow. This relieves the developer of unecessary burden so he or she can focus on other important aspects of development. Also, the inbuilt autosize does not always work as expected but this library will always give the best and optimal autosizing.
    • The content template can contain server-side controls like RadEditor or RadGrid  or any html markup.
    • When content is too large to fit into the screen then RadWindow will show scroll bars and take on the maximum possible width and height.
    • Even if the RadWindow width or height is specified, this library will decide the best possible width and height so the RadWindow is autosized. 
    • The screen boundary will never be exceeded.

    Customizing behavior of this library

    If the developer wants to customize the behavior of this JavaScript library then that can be done easily by setting properties on the object azw  in the client-side pageload event of your page. There are a total of 7 properties that you can set on this object.

    • An object called azw is exposed by this library.
    • Example code is given below for setting all possible properties of this exposed object. Please note that no JavaScript code is required to be written for this library to work, but use the snippet below only if you would like to change the default behavior.
    • Each property is explained in detail below through comments.
    • All possible properties are shown in snippet below.
    <script type="text/javascript">
        function pageLoad() {
            //set the property below to prevent some radwindows from being autosized by this library
            azw.excludedRadWindows = "<%=RadWindow1_ContentTemplate.ClientID%>" + "," + "<%=RadWindow_RadEditor.ClientID%>"; //this helps developer to exclude RadWindows from autosizing by this library
     
            //set the property below to set the maximum height and width an autosized radwindow will take on non-mobile screens
            azw.maxScreenProportion = .8; //default is .95. only valid for non-mobile screens. the autosized radwindow will expand to a maximum width and height that is 0.8 times the viewport width and height
     
            //set the property below to set the maximum height and width an autosized radwindow will take on obile screens
            azw.maxMobileScreenProportion = .75; //default is .9. only valid for mobile screens. the autosized radwindow will expand to a maximum width and height that is 0.75 times the viewport width and height
     
            //set the below two properties to define what screen is considered a mobile screen
            azw.maxHeightForMobileDevice = 500; //default is 750.
            azw.maxWidthForMobileDevice = 450; //default is 750.
     
            //set the two properties below for deciding when the autosized window will show as maximized on a mobile screen
            azw.maxMobileWidthForMaxView = 400; // default is 320
            azw.maxMobileHeightForMaxView = 500; // default is 340
     
        }
    </script>
  2. Vessy
    Admin
    Vessy avatar
    1538 posts

    Posted 12 Jan Link to this post

    Hi Sunil,

    Thanks a lot for sharing this valuable sample with us.

    I have updated your Telerik points as a small token of gratitude for your efforts.

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top