Window - RadWindow Client-side API

Move
Width
Move
Height
Commands






Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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

This demo is using the following ASP.NET AJAX 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.
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container size-wide">
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" ID="RadFormDecorator1" Skin="WebBlue" />
    <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 RenderMode="Lightweight" Orientation="horizontal" OnClientValueChanged="OnClientValueChangedMoveHorizontally"
                            ID="RadSlider4" MinimumValue="0" MaximumValue="500" runat="server" SmallChange="10" Skin="WebBlue">
                        </telerik:RadSlider>
                    </td>
                    <td>
                        Width
                        <asp:Label ID="lblWinWidth" runat="server"></asp:Label>
                    </td>
                    <td>
                        <telerik:RadSlider RenderMode="Lightweight" OnClientValueChanged="OnClientValueChangedWidth" ID="RadSlider2"
                            MinimumValue="100" MaximumValue="500" runat="server" SmallChange="10" Skin="WebBlue">
                        </telerik:RadSlider>
                    </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 RenderMode="Lightweight" Orientation="vertical" OnClientValueChanged="OnClientValueChangedMoveVertically"
                        ID="RadSlider3" MinimumValue="0" MaximumValue="500" runat="server" SmallChange="10" Skin="WebBlue">
                    </telerik:RadSlider>
                </div>
                <div style="margin: 12px 0 0 0;">
                    <div class="sliderLabel">
                        Height
                        <asp:Label ID="lblWinHeight" runat="server"></asp:Label>
                    </div>
                    <telerik:RadSlider RenderMode="Lightweight" OnClientValueChanged="OnClientValueChangedHeight" ID="RadSlider1" Skin="WebBlue"
                        MinimumValue="100" MaximumValue="400" runat="server" SmallChange="10" Orientation="vertical">
                    </telerik:RadSlider>
                </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 RenderMode="Lightweight" OnClientActivate="OnClientActivate" EnableShadow="true" OnClientPageLoad="OnClientPageLoad"
        OnClientResizeEnd="SetWindowBehavior" OnClientShow="SetWindowBehavior" Behaviors="Close, Move, Resize,Maximize"
        RestrictionZoneID="RestrictionZone" ID="RadWindow1" VisibleOnPageLoad="true"
        Title="Bing" NavigateUrl="http://www.bing.com" Opacity="99" IconUrl="http://www.bing.com/favicon.ico"
        runat="server" Width="300px" Skin="WebBlue">
    </telerik:RadWindow>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            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");
                radioButtonsName = "<%=RadioButtonList1.UniqueID %>";
            }
            //]]>
        </script>
    </telerik:RadCodeBlock>
</div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?