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 / RadWindow Client-side API

Move
Width
Move
Height
Commands

  •  RadWindow for ASP.NET AJAX

     

    This demo shows the usage of the RadWindow object. The rich client-side API allows a complete control over the window object, giving the developer the opportunity to set the behavior of the control depending on the scenario.

    The demo is using the following controls:

    • RadWindow - the windows are declared in the aspx and are referred by using the ASP.NET AJAX find() method. No RadWindowManager is used.
    • RadSlider - used for controlling RadWindow's size and position.
    • RadFormDecorator - used for decorating the RadioButtonList control and the INPUT elements on the page.

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.RadWindowObject.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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 ID="Headtag1" runat="server" />
        <style type="text/css">
            #RestrictionZone
            {
                width: 556px;
                height: 500px;
                background: #ffffe1;
                border-left: dashed 1px #7593c4;
                border-right: dashed 1px #7593c4;
            }
            
            .wrapper
            {
                width: 800px;
                border: solid 1px #7593c4;
                background: #edf6fe;
            }
            
            .upperdiv
            {
                border-bottom: solid 1px #7593c4;
                padding: 4px;
                height: 20px;
            }
            
            .upperdiv .sliderLabel
            {
                float: left;
                line-height: 18px;
                width: 70px;
                margin: 0 0 0 150px;
            }
            
            .upperdiv .RadSlider
            {
                float: left;
            }
            
            .upperdiv .sliderLabel span
            {
                font-weight: bold;
                color: #7593c4;
            }
            
            .centerDiv div
            {
                float: left;
            }
            
            .leftDiv div
            {
                clear: both;
            }
            
            .leftDiv .sliderLabel
            {
                width: 200px;
            }
            
            .leftDiv .RadSlider
            {
                margin-left: 16px;
            }
            
            .centerDiv .leftDiv
            {
                padding: 0 0 0 14px;
                width: 70px;
                height: 500px;
            }
            
            .centerDiv .rightDiv
            {
                width: 150px;
                height: 500px;
            }
            
            .centerDiv .mainDiv
            {
                width: 564px;
                height: 500px;
            }
            
            .centerDiv .rightDiv fieldset
            {
                margin: 0 8px;
                width: 128px;
                height: 490px;
            }
            
            .lowerDiv
            {
                clear: both;
                border-top: solid 1px #7593c4;
                padding: 4px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" Skin="Office2010Blue" runat="server" DecoratedControls="all" />
        <!-- example html begin -->
        <div class="wrapper">
            <div class="upperdiv">
                <table border="0" cellpadding="0" cellspacing="0" style="width: 600px; margin-left: 80px;">
                    <tr>
                        <td>
                            Move
                        </td>
                        <td style="padding: 0 26px 0 0">
                            <telerik:RadSlider Orientation="horizontal" OnClientValueChanged="OnClientValueChangedMoveHorizontally"
                                ID="RadSlider4" MinimumValue="0" MaximumValue="500" runat="server" SmallChange="10"
                                Skin="Office2010Blue" />
                        </td>
                        <td>
                            Width
                            <asp:Label ID="lblWinWidth" runat="server"></asp:Label>
                        </td>
                        <td>
                            <telerik:RadSlider OnClientValueChanged="OnClientValueChangedWidth" ID="RadSlider2"
                                MinimumValue="100" MaximumValue="700" runat="server" SmallChange="10" Skin="Office2010Blue" />
                        </td>
                    </tr>
                </table>
            </div>
            <div class="centerDiv">
                <div class="leftDiv">
                    <div style="margin: 12px 0 0 0;">
                        <div class="sliderLabel" style="padding: 0 0 0 12px;">
                            Move</div>
                        <telerik:RadSlider Orientation="vertical" OnClientValueChanged="OnClientValueChangedMoveVertically"
                            ID="RadSlider3" MinimumValue="0" MaximumValue="500" runat="server" SmallChange="10"
                            Skin="Office2010Blue" />
                    </div>
                    <div style="margin: 12px 0 0 0;">
                        <div class="sliderLabel">
                            Height
                            <asp:Label ID="lblWinHeight" runat="server"></asp:Label>
                        </div>
                        <telerik:RadSlider OnClientValueChanged="OnClientValueChangedHeight" ID="RadSlider1"
                            MinimumValue="100" MaximumValue="400" runat="server" SmallChange="10" Orientation="vertical"
                            Skin="Office2010Blue" />
                    </div>
                </div>
                <div class="mainDiv">
                    <div id="RestrictionZone">
                        <!-- / -->
                    </div>
                </div>
                <div class="rightDiv">
                    <fieldset>
                        <legend>Commands</legend>
                        <asp:RadioButtonList ID="RadioButtonList1" AutoPostBack="false" runat="server">
                            <asp:ListItem onclick="controlWindowButtons()" Value="minimize()" Text="Minimize"></asp:ListItem>
                            <asp:ListItem onclick="controlWindowButtons()" Value="maximize()" Text="Maximize"></asp:ListItem>
    <asp:ListItem onclick="controlWindowButtons()" Selected="true" Value="restore()"
    Text="Restore"></asp:ListItem>
                            <asp:ListItem onclick="controlWindowButtons()" Value="reload()" Text="Reload"></asp:ListItem>
                            <asp:ListItem onclick="controlWindowButtons()" Value="show()" Text="Show"></asp:ListItem>
                            <asp:ListItem onclick="controlWindowButtons()" Value="close()" Text="Close"></asp:ListItem>
                            <asp:ListItem onclick="controlWindowButtons()" Value="hide()" Text="Hide"></asp:ListItem>
                            <asp:ListItem onclick="controlWindowButtons()" Value="center()" Text="Center"></asp:ListItem>
                        </asp:RadioButtonList>
                        <label for="urlBox" title="Type New URL" style="margin: 12px 0 4px 6px; display: block;">
                            <span>URL:</span>
                            <input type="text" id="urlBox" title="Type New URL" style="width: 86px;" />
                        </label>
                        <button onclick="changeUrl(); return false;" title="Set New URL" style="width: 123px;">
                            Set New URL</button>
                    </fieldset>
                </div>
            </div>
        </div>
        <!-- example html end -->
        <telerik:RadWindow OnClientActivate="OnClientActivate" EnableShadow="true" Skin="Office2010Blue"
            OnClientPageLoad="OnClientPageLoad" OnClientResizeEnd="SetWindowBehavior" OnClientShow="SetWindowBehavior"
            Behaviors="Close, Move, Resize,Maximize" RestrictionZoneID="RestrictionZone"
            ID="RadWindow1" VisibleOnPageLoad="true" Title="Google" NavigateUrl="http://www.google.com" Opacity=99
            IconUrl="http://www.google.com/favicon.ico" runat="server" Width="300px">
        </telerik:RadWindow>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                //<![CDATA[
                var oWnd = null;
                var heightSlider = null;
                var widthSlider = null;
                var topSlider = null;
                var leftSlider = null;
                var lblHeight = null;
                var lblWidth = null;
                var urlBox = null;

                function pageLoad()
                {
                    //get a reference to the needed controls -
                    heightSlider = $find("<%= RadSlider1.ClientID %>");
                    widthSlider = $find("<%= RadSlider2.ClientID %>");
                    lblHeight = $get("<%= lblWinHeight.ClientID %>");
                    lblWidth = $get("<%= lblWinWidth.ClientID %>");
                    topSlider = $find("<%= RadSlider3.ClientID %>");
                    leftSlider = $find("<%= RadSlider4.ClientID %>");
                    urlBox = $get("urlBox");
                }

                function controlWindowButtons()
                {
                    var selitem = null;
                    var e = document.forms[0].elements["RadioButtonList1"];
                    for (var i = 0; i < e.length; i++)
                    {
                        if (e[i].checked)
                        {
                            selitem = e[i].value;
                        }
                    }
                    eval("oWnd." + selitem);
                }

                function OnClientActivate(sender)
                {
                    //get a reference to the RadWindow object
                    oWnd = sender;
                    //set the value of the Url textbox to the current RadWindow's NavigateUrl
                    urlBox.value = oWnd.get_navigateUrl();
                    configureUI(oWnd);
                }

                function SetWindowBehavior(sender)
                {
                    oWnd = sender;
                    urlBox.value = oWnd.get_navigateUrl();
                    oWnd.setActive(true);
                    configureUI(oWnd);
                }

                function configureUI(oWnd)
                {
                    //get RadWindow's bounds
                    var bounds = oWnd.getWindowBounds();
                    var winHeight = bounds.height;
                    var winWidth = bounds.width;
                    var winTopPos = bounds.y;
                    var winLeftPos = bounds.x;

                    //Configure height
                    winHeight = winHeight < 100 ? 100 : winHeight;
                    winHeight = winHeight > 400 ? 400 : winHeight;
                    heightSlider.set_value(winHeight);

                    //Configure width
                    winWidth = winWidth < 100 ? 100 : winWidth;
                    winWidth = winWidth > 700 ? 700 : winWidth;
                    widthSlider.set_value(winWidth);

                    //Configure top position
                    winTopPos = winTopPos < 0 ? 0 : winTopPos;
                    winTopPos = winTopPos > 500 ? 500 : winTopPos;
                    topSlider.set_value(winTopPos);

                    //Configure left position
                    winLeftPos = winLeftPos < 0 ? 0 : winLeftPos;
                    winLeftPos = winLeftPos > 500 ? 500 : winLeftPos;
                    leftSlider.set_value(winLeftPos);
                }



                function OnClientValueChangedHeight(sender, args)
                {
                    //get a reference to the window and set its height
                    var newHeight = sender.get_value();
                    var result = oWnd.set_height(newHeight);

                    //Update the label, showing the current value of the slider.
                    updateLabel(sender, args, lblHeight);
                }

                function OnClientValueChangedWidth(sender, args)
                {
                    //get a reference to the window and set its width
                    oWnd.set_width(sender.get_value());
                    updateLabel(sender, args, lblWidth);
                }

                function OnClientValueChangedMoveVertically(sender, args)
                {
                    //get a reference to the window and set its width
                    var bounds = oWnd.getWindowBounds();
                    var x = bounds.x;
                    var y = bounds.y;
                    oWnd.moveTo(x, sender.get_value());
                }

                function OnClientValueChangedMoveHorizontally(sender, args)
                {
                    //get a reference to the window and set its width
                    var bounds = oWnd.getWindowBounds();
                    var x = bounds.x;
                    var y = bounds.y;
                    oWnd.moveTo(sender.get_value(), y);
                }

                function OnClientPageLoad(oWnd)
                {

                    //dynamically change the title of RadWindow so it matches the current URL
                    //this must be done in OnClientPageLoad, otherwise the window will get the title
                    //that is set in the title section of content page's head.
                    var originalUrl = oWnd.get_navigateUrl();
                    var websiteName = getWebsiteName(originalUrl);
                    oWnd.set_title(websiteName);

                    //Change RadWindow icon to the favicon.ico icon of the opened site
                    var icon = $telerik.getElementByClassName(oWnd.get_popupElement(), "windowicon", "A");
                    if (icon)
                    {
                        icon.style.background = "url(" + originalUrl + "/favicon.ico) no-repeat 0 0";
                    }
                }

                function updateLabel(slider, args, label)
                {
                    label.innerText = slider.get_value();
                }

                function getWebsiteName(websiteName)
                {
                    url = websiteName.replace("http://www.", "");
                    url = url.substr(0, url.indexOf("."));
                    url = url.charAt(0).toUpperCase() + url.substr(1);
                    return url;
                }

                function changeUrl()
                {
                    oWnd.setUrl(urlBox.value);
                    configureUI(oWnd);
                }
                //]]>
            </script>
        </telerik:RadCodeBlock>
        <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