New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms Window Overview

  • Wikipedia.org
  • W3.org
  • Configure example
  • Window Height:
    100
    		400
  • Window Width:
    100
    		600
  • Window Transparency:
    0
    		100
  • Open New Window
Change Wallpaper

This RadWindow demo is a lightweight version of the RadWindow and MDI demo, featuring the ability to open ASP.NET PopUp windows, control their appearance and choose between available windows.

The logic in the demo is achieved by using the following ASP.NET controls:

  • RadWindow - this advanced ASP.NET Dialog Window shows the content page
  • RadTabStrip - used to mimic the MS Windows taskbar

About RadWindow for ASP.NET AJAX

Telerik ASP.NET PopUp Window control brings the familiar methods and properties of desktop windows, alert, confirm, and prompt dialogs, to the web. Built on top of ASP.NET AJAX, the PopUp Window provides a flexible API to easily control its behavior and makes the implementation of complex logic for a great range of scenarios easily achievable. A unique example of this ability is simulating MDI apps using RadWindow and RadTabStrip.

RadWindow and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Fully customizable visual appearance of ASP.NET PopUp Window. RadWindow uses skins for further customization
  • Full Control over window's visibility and location
  • Rich Client Event Model
  • Circumvents the Windows XP SP2 Popup Blocker Mechanism
  • Cross-Browser ASP.NET "Modal" Dialogs
  • Predefined Alert, Confirm, and Prompt Dialogs
  • Window Caching - if you close a window it is not destroyed so it can be reopened instantly
  • Multiple skins on the same page
  • Restriction zone - RadWindow can be maximized and moved only inside it
  • Dynamic creations of windows on the client using RadWindowManager's window.radopen() client method
More about RadWindow for ASP.NET AJAX
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></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 no-bg">
        <div id="RestrictionZone" class="restrictionZone"></div>
        <telerik:RadTabStrip RenderMode="Lightweight" OnClientTabSelected="OnClientTabSelected" ID="RadTabStrip1"
                             Orientation="HorizontalBottom" runat="server" OnClientLoad="tabStrip_load">
            <Tabs>
                <telerik:RadTab runat="server" Text="Wikipedia.org" ImageUrl="wikiFavicon.png">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="W3.org" ImageUrl="w3Favicon.png">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadWindowManager RenderMode="Lightweight" OnClientClose="OnClientClose" OnClientPageLoad="OnClientPageLoad"
                                  EnableShadow="true" OnClientResizeEnd="SetWindowBehavior" OnClientShow="SetWindowBehavior"
                                  Behaviors="Close, Move, Resize,Maximize" ID="RadWindowManager" DestroyOnClose="true"
                                  RestrictionZoneID="RestrictionZone" Opacity="99" runat="server" Width="450" Height="400">
            <Windows>
                <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" VisibleOnPageLoad="true" Title="Wikipedia" NavigateUrl="https://www.wikipedia.org"
                                   IconUrl="wikiFavicon.ico" runat="server">
                </telerik:RadWindow>
                <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow2" Title="W3" NavigateUrl="https://www.w3.org"
                                   IconUrl="w3Favicon.png" runat="server">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
    </div>
    <qsf:ConfiguratorPanel runat="server" Title="Configure example">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <span>Window Height:</span>
                            <asp:Label ID="lblWinHeight" runat="server"></asp:Label>
                            <table class="slider-table">
                                <tr>
                                    <td class="slider-value-label">100</td>
                                    <td>
                                        <qsf:Slider OnClientValueChanged="OnClientValueChangedHeight" ID="RadSlider1" MinimumValue="100" MaximumValue="400" runat="server" SmallChange="10" OnClientLoad="heightSlider_load" Width="280px">
                                        </qsf:Slider>
                                    </td>
                                    <td>400 </td>
                                </tr>
                            </table>
                        </li>
                        <li>
                            <span>Window Width:</span>
                            <asp:Label ID="lblWinWidth" runat="server"></asp:Label>
                            <table class="slider-table">
                                <tr>
                                    <td class="slider-value-label">100</td>
                                    <td>
                                        <qsf:Slider OnClientValueChanged="OnClientValueChangedWidth" ID="RadSlider2" MinimumValue="100" MaximumValue="600" runat="server" SmallChange="10" OnClientLoad="widthSlider_load" Width="280px" />
                                    </td>
                                    <td>600 </td>
                                </tr>
                            </table>
                        </li>
                        <li>
                            <span>Window Transparency:</span>
                            <asp:Label ID="opacityLbl" runat="server"></asp:Label>
                            <table class="slider-table">
                                <tr>
                                    <td class="slider-value-label">0</td>
                                    <td>
                                        <qsf:Slider OnClientValueChanged="OnClientValueChangedTransparency" ID="RadSlider3" MinimumValue="0" MaximumValue="99" runat="server" OnClientLoad="transparentSlider_load" Width="280px">
                                        </qsf:Slider>
                                    </td>
                                    <td>100 </td>
                                </tr>
                            </table>
                        </li>
                        <li>
                            <span class="label">Open New Window</span>
                            <qsf:TextBox ID="Text1" ClientEvents-OnKeyPress="KeyDownHandler" Text="www.bing.com" runat="server" Width="240" Label="https://" LabelCssClass="open-window-label" LabelWidth="40" ClientEvents-OnLoad="urlTextBox_load" AutoPostBack="false" />
                            <qsf:Button ID="openBtn" OnClientClicked="openNewWindow" AutoPostBack="false" Text="Open" runat="server" OnClientLoad="openBtn_load" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Change Wallpaper" Size="Narrow">
                        <qsf:RadioButtonList ID="RadioButtonList1" Width="145px" runat="server">
                            <asp:ListItem Text="Windows 7" Selected="true" onclick="changeWallpaper('windows_7.jpg');"></asp:ListItem>
                            <asp:ListItem Text="Windows Vista" onclick="changeWallpaper('windows_vista.jpg');"></asp:ListItem>
                            <asp:ListItem Text="Windows XP" onclick="changeWallpaper('windows_xp.jpg');"></asp:ListItem>
                            <asp:ListItem Text="Windows Classic" onclick="changeWallpaper('windows_classic.jpg');"></asp:ListItem>
                        </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            function pageLoad() {
                //get a reference to the needed controls - 
                $windowOverviewDemo.manager = $find("<%= RadWindowManager.ClientID %>");
                $windowOverviewDemo.lblHeight = $get("<%= lblWinHeight.ClientID %>");
                $windowOverviewDemo.lblWidth = $get("<%= lblWinWidth.ClientID %>");
                $windowOverviewDemo.opacityLbl = $get("<%= opacityLbl.ClientID %>");
            }
            //]]>            
        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance