Smart Resizing of RadWindow controls.

3 posts, 0 answers
  1. Sacha Rice
    Sacha Rice avatar
    8 posts
    Member since:
    Aug 2008

    Posted 30 Dec 2008 Link to this post

    Requirements

    RadControls version

    Up to 2008.3.1125.35

    .NET version

    2.0, 3.0, 3.5

    Visual Studio version

    2005, 2008

    programming language

    VB, Javascript

    browser support

    all browsers supported by RadControls

    PROJECT DESCRIPTION
    Shows how to create a properly sized RadWindow.

    Summary
    It can be quite difficult to correctly size a RadWindow without testing dozens of width/height combinations this is not the controls fault, this is due to the fact that the actual size of the content does not amount to the required size of the window. In order to solve this some simple javascript can be used to help you identify the perfect size for your RadWindow using the integrated telerik window functions.

    Steps
    1. Add a new "Web Form" to your solution and drag a RadWindow object from your toolbox onto the designer.

    2a. Designer (Set In Properties Window)

    Behavior

    •     Behaviors - Close, Move, Maximize, Resize

    Client-side events

    •     OnClientResize = GetDimensions

    2b Source

    <telerik:RadWindow Skin="Telerik" ID="RadWindow1" runat="server" Modal="true" Behaviors="Close, Move, Maximize, Resize" OnClientResize="GetDimensions" /> 
     

    3. In the source for your .ASPX page add the following javascript function.

                function GetDimensions(sender, args)  
                {  
                    var bounds = sender.getWindowBounds();  
                    alert(new String("Width:" + bounds.width + " " + "Height: " + bounds.height));
                    return; 
                }  
     


    4. Add another javascript function in the .ASPX source to open the window. There are numerous ways to do this, this is just one option.
    function OpenResizableWindow()  
    {  
    var oWnd = $find("<%=RadWindow1.ClientID %>");  
    oWnd.set_Url("WebForm2.aspx");  
    oWnd.set_title("Testing Window Resize");  
    oWnd.show();  
    return;  
    In the oWnd.set_Url braces, change the url to a website of your choosing or an existing webform within your project.
    In this example a second form called WebForm2.aspx has been added to the solution, however a URL will work the same.

    5. Add a standard input button to your form.
    <input type="button" onclick="OpenResizableWindow()" value="Test" id="btnTest" name="btnTest" type="button" /> 

    6. Your source .ASPX file should now look something like this.
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="Website1.WebForm1" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Testing Window Resize</title>  
    </head> 
    <body> 
        <telerik:RadCodeBlock ID="rCBL1" runat="server">  
     
            <script type="text/javascript">  
     
                function GetDimensions(sender, args)  
                {  
                    var bounds = sender.getWindowBounds();  
                    alert(new String("Width:" + bounds.width + " " + "Height: " + bounds.height));
                    return; 
                }  
     
                function OpenResizableWindow()  
                {  
                    var oWnd = $find("<%=RadWindow1.ClientID %>");  
                    oWnd.setUrl("Default.aspx");  
                    oWnd.set_title("Testing Window Resize");  
                    oWnd.show();  
                    return;  
                }    
     
            </script> 
     
        </telerik:RadCodeBlock> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
        <telerik:RadWindow Skin="Telerik" ID="RadWindow1" runat="server" Modal="true" Behaviors="Close, Move, Maximize, Resize" 
            OnClientResize="GetDimensions" /> 
        <div> 
            <input type="button" onclick="OpenResizableWindow()" value="Test" id="btnTest" name="btnTest" /> 
        </div> 
        </form> 
    </body> 
    </html> 

    7. Finally, Run the project and click on the button. When the window appears, resize it to the desired size and then release the mouse.
    An alert will popup giving details of the width/height.
  2. Paul Haines
    Paul Haines avatar
    68 posts
    Member since:
    Jun 2007

    Posted 12 Feb 2009 Link to this post

    Rather than simply displaying the correct dimensions, wouldn't it be more efficient to actually take those window bounds, (in "GetDimensions" routine), and apply it to the RadWindow whenever it's displayed, (?).

    Something along the lines of using the RadWindow's "OnClientActivate" event to call the "set_Size" routine and pass it the derived height/width. Possibly.

    Unfortunately I don't have time to try this, but perhaps someone else could and post the actual code needed here.

    Paul
  3. KMILO
    KMILO avatar
    12 posts
    Member since:
    Sep 2008

    Posted 04 Mar 2009 Link to this post

    Hi Paul, I try to resize on fly the radwindow giving the sizes myself using javascript and I made it!!! just put the following code in the header script on your page, as you can see there is a commented function that made possible to resize from server side using the inject script technique on PageLoad Event or OnInit Event depending of your timing needs (Dont forget to include all js code or make directly reference to it if you use this on OnInit event)

     

     

    I wish I could help anyone with this ;)

    Cheers,

    KMILO


    Javascript Code:
     <script type="text/javascript" language="javascript">  
        var oWnd = GetRadWindow();   
        //debugger;         
        oWnd.SetSize("800","500");     
        function GetRadWindow()  
        {  
            var oWindow = null;  
            if (window.radWindow) oWindow = window.radWindow;  
            else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;  
            return oWindow;  
        }   
        /*function SetSizeTowindow(width,height)  
        {  
            var oWnd = GetRadWindow();   
            debugger;         
            oWnd.SetSize(width,height);     
        }*/  
    </script> 

    Server Side C# Code:
    string wScript = "SetSizeTowindow(800px,400px);";  
    Page.ClientScript.RegisterClientScriptBlock(this.GetType), "resizeFromServerSide", wScript, true);  
     
Back to Top