Window

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadWindow - Telerik's ASP.NET Window

Configure Example
Window Height:
100
400
Window Width:
100
600
Window Transparency:
0
100
Open New Window
http://
Change Wallpaper:



tlrk.it/1cJD5ye To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1cJD5ye

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 80+ 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.

About This Demo

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. RadWindow provides a flexible API to easily control its behavior and makes possible the implementation of complex logic for a great range of scenarios.

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
  • RadSlider - used to control the RadWindow's features - width, height and content frame's transparency
  • RadFormDecorator - to decorate the fieldset, buttons and inputs on the page

Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Window demo, you can use the following path to find it in the sample website application:
window/examples/overview

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

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register Src="~/Window/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>ASP.NET Window Demo | RadWindow component by Telerik</title>
     <style type="text/css">
          .rtsImg {
               margin: 2px 4px 0 0 !important;
          }
          img.rtsImg {
               width: 16px !important;
               height: 16px !important;
          }
          .restrictionZone {
               background: transparent url('Wallpapers/windows_7.jpg') no-repeat;
               width: 604px;
               height: 467px;
               border: solid 1px black;
          }
          /* change the QSF to avoid breaking the RestrictionZone of RadWindow*/
          div.qsf-interaction
          {
               position: absolute;
               width: 100%;
               z-index: 10000;
          }
     </style>
     <script type="text/javascript">
    //<![CDATA[
          function changeWallpaper(wallpaper) {
               var viewport = $get('RestrictionZone').style;
               viewport.backgroundImage = 'url(Wallpapers/' + wallpaper + ')';
          }

          function KeyDownHandler(event, btn) {
               var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

               // process only the Enter key
               if (keyCode == 13) {
                    // cancel the default submit
                    event.returnValue = false;
                    event.cancel = true;
                    // submit the form by programmatically clicking the specified button
                    btn.click();
               }
          }

    //]]> 
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <table cellpadding="0" cellspacing="0" width="900px">
          <tr>
               <td>
                    <div id="RestrictionZone" class="restrictionZone">
                         <!-- / -->
                    </div>
                    <telerik:RadTabStrip OnClientTabSelected="OnClientTabSelected" ID="RadTabStrip1"
                         Orientation="HorizontalBottom" runat="server">
                         <Tabs>
                              <telerik:RadTab runat="server" Text="Telerik" ImageUrl="telerikFavicon.ico">
                              </telerik:RadTab>
                              <telerik:RadTab runat="server" Text="W3.org" ImageUrl="w3Favicon.png">
                              </telerik:RadTab>
                         </Tabs>
                    </telerik:RadTabStrip>
               </td>
               <td style="padding: 0 0 0 8px; vertical-align: top;">
                    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Width="290px" Title="Configure Example"
                         Expanded="true">
                         <div style="padding: 8px;">
                              <div style="margin: 0 0 8px 0;">
                                   <strong>Window Height:</strong>
                                   <asp:Label ID="lblWinHeight" runat="server"></asp:Label>
                              </div>
                              <table>
                                   <tr>
                                        <td>
                                             100
                                        </td>
                                        <td>
                                             <telerik:RadSlider OnClientValueChanged="OnClientValueChangedHeight" ID="RadSlider1"
                                                  MinimumValue="100" MaximumValue="400" runat="server" SmallChange="10">
                                             </telerik:RadSlider>
                                        </td>
                                        <td>
                                             400
                                        </td>
                                   </tr>
                              </table>
                              <div style="margin: 8px 0 8px 0;">
                                   <strong>Window Width:</strong>
                                   <asp:Label ID="lblWinWidth" runat="server"></asp:Label>
                              </div>
                              <table>
                                   <tr>
                                        <td>
                                             100
                                        </td>
                                        <td>
                                             <telerik:RadSlider OnClientValueChanged="OnClientValueChangedWidth" ID="RadSlider2"
                                                  MinimumValue="100" MaximumValue="600" runat="server" SmallChange="10">
                                             </telerik:RadSlider>
                                        </td>
                                        <td>
                                             600
                                        </td>
                                   </tr>
                              </table>
                              <div style="margin: 8px 0 8px 0;">
                                   <strong>Window Transparency:</strong>
                                   <asp:Label ID="opacityLbl" runat="server"></asp:Label>
                              </div>
                              <table>
                                   <tr>
                                        <td>
                                             0
                                        </td>
                                        <td>
                                             <telerik:RadSlider OnClientValueChanged="OnClientValueChangedTransparency" ID="RadSlider3"
                                                  MinimumValue="0" MaximumValue="99" runat="server">
                                             </telerik:RadSlider>
                                        </td>
                                        <td>
                                             100
                                        </td>
                                   </tr>
                              </table>
                              <div style="margin: 8px 0 8px 0;">
                                   <strong>Open New Window</strong>
                              </div>
                              <table>
                                   <tr>
                                        <td>
                                             <span style="font-size: 14px">http://</span>
                                             <input type="text" style="width: 130px" onkeydown="KeyDownHandler(event,openBtn)"
                                                  value="www.bing.com" id="Text1" />
                                        </td>
                                        <td>
                                             <input type="button" style="width: 50px" id="openBtn" onclick="openNewWindow(); return false;"
                                                  title="Open" value="Open" />
                                        </td>
                                   </tr>
                              </table>
                         </div>
                         <div style="padding: 8px">
                              <div style="padding: 8px 8px 8px 0; font-weight: bold;">
                                   Change Wallpaper:</div>
                              <asp: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>
                              </asp:RadioButtonList>
                         </div>
                    </qsf:ConfiguratorPanel>
               </td>
          </tr>
     </table>
     <telerik:RadWindowManager 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 ID="RadWindow1" VisibleOnPageLoad="true" Title="Telerik" NavigateUrl="http://www.telerik.com"
                    IconUrl="telerikFavicon.ico" runat="server">
               </telerik:RadWindow>
               <telerik:RadWindow ID="RadWindow2" Title="W3" NavigateUrl="http://www.w3.org"
                    IconUrl="w3Favicon.png" runat="server">
               </telerik:RadWindow>
          </Windows>
     </telerik:RadWindowManager>
     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
          <script type="text/javascript">
            //<![CDATA[
               var manager = null;
               var tabStrip = null;
               var heightSlider = null;
               var widthSlider = null;
               var transpSlider = null;
               var lblHeight = null;
               var lblWidth = null;
               var opacityLbl = null;

               function pageLoad() {
                    //get a reference to the needed controls - 
                    manager = $find("<%=RadWindowManager.ClientID %>");
                    tabStrip = $find("<%=RadTabStrip1.ClientID %>");
                    heightSlider = $find("<%= RadSlider1.ClientID %>");
                    widthSlider = $find("<%= RadSlider2.ClientID %>");
                    transpSlider = $find("<%= RadSlider3.ClientID %>");
                    lblHeight = $get("<%= lblWinHeight.ClientID %>");
                    lblWidth = $get("<%= lblWinWidth.ClientID %>");
                    opacityLbl = $get("<%= opacityLbl.ClientID %>");
               }

               //
               function OnClientTabSelected(sender, args) {
                    //get the current windows collection
                    var selIndex = tabStrip.get_selectedIndex();
                    OpenWindowByIndex(selIndex);
               }

               function OpenWindowByIndex(index)
               {
                    var windows = manager.get_windows();
                    for (var i = 0; i < windows.length; i++)
                    {
                         var win = windows[i];
                         if (i == index)
                         {
                              //Only show window if it is not currently visible to prevent recursion of RadWindow OnClientShow calling RadTabStrip OnClientTabSelected 
                              if (!win.isVisible())
                              {
                                   win.show();
                                   win.center();
                              }
                         }
                         else
                         {
                              win.hide();
                         }
                    }
               }

               function SetWindowBehavior(oWnd) {
                    configureUI(oWnd);
               }

               function configureUI(oWnd) {
                    var bounds = oWnd.getWindowBounds();
                    var winHeight = bounds.height;
                    var winWidth = bounds.width;

                    //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);

                    //Set the transparency slider to the current transparency level for the active RadWindow
                    var initialTransp = oWnd.get_opacity();
                    transpSlider.set_value(initialTransp);

                    //Make sure the window's corresponding tab is selected
                    var windows = manager.get_windows();
                    for (var i = 0; i < windows.length; i++) {
                         if (windows[i] == oWnd) {
                              var tab = tabStrip.get_allTabs()[i];
                              //Avoid recursion if tab already selected
                              if (tab && !tab.get_selected()) {
                                   tab.select();
                              }
                         }
                    }
               }

               function OnClientClose(oWnd) {
                    //Get the title of the active RadWindow
                    var title = oWnd.get_title();
                    var tab = tabStrip.findTabByText(title);
                    if (tab) {
                         tabStrip.trackChanges();
                         tabStrip.get_tabs().remove(tab);
                         tabStrip.commitChanges();
                    }

                    var selIndex = tabStrip.get_selectedIndex();
                    if (selIndex > -1)
                         OpenWindowByIndex(selIndex)
               }

               function OnClientValueChangedHeight(sender, args) {
                    //get a reference to the window and set its height
                    var oWnd = manager.getActiveWindow();
                    if (!oWnd) return;
                    var newHeight = sender.get_value();
                    oWnd.set_height(newHeight);
                    //Update the label, showing the current value of the slider.
                    updateLabel(sender, lblHeight);
               }

               function OnClientValueChangedWidth(sender, args) {
                    //get a reference to the window and set its width
                    var oWnd = manager.getActiveWindow();
                    if (!oWnd) return;
                    oWnd.set_width(sender.get_value());
                    updateLabel(sender, lblWidth);
               }

               function OnClientValueChangedTransparency(sender, args) {
                    //get a reference to the window and set its opacity
                    var oWnd = manager.getActiveWindow();
                    if (!oWnd) return;
                    oWnd.set_opacity(sender.get_value());
                    updateLabel(sender, opacityLbl);
               }


               function OnClientPageLoad(oWnd) {

                    var originalUrl = oWnd.get_navigateUrl();
                    var websiteName = getWebsiteName(originalUrl);
                    oWnd.set_title(websiteName);
                    tabStrip.trackChanges();
                    var tab = tabStrip.get_selectedTab();
                    //check if tab exists - if it doesn't this is a newly created window and
                    //its text will be set in the openNewWindow() function
                    if (tab) {
                         tab.set_text(websiteName);
                    }
                    var iconUrl = originalUrl + "/favicon.ico";
                    if (originalUrl.indexOf("converter.telerik.com") > 0) iconUrl = "codeConverterFavicon.ico";
                    if (originalUrl.indexOf("www.telerik.com") > 0) iconUrl = "telerikFavicon.ico";
                    if (originalUrl.indexOf("www.w3.org") > 0) iconUrl = "w3Favicon.png";
                    //Change RadWindow icon to the favicon.ico icon of the opened site
                    oWnd.set_iconUrl(iconUrl);
               }


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

               function openNewWindow() {
                    var windowURL = document.getElementById("Text1").value;
                    var oWnd = radopen("http://" + windowURL, null);
                    oWnd.center();
                    var websiteName = getWebsiteName(oWnd.get_navigateUrl());
                    //Add new tab to the tabstrip
                    tabStrip.trackChanges();
                    var tab = new Telerik.Web.UI.RadTab();
                    tab.set_text(websiteName);
                    tabStrip.get_tabs().add(tab);
                    var iconUrl = oWnd.get_navigateUrl() + "/favicon.ico";
                    if (iconUrl.indexOf("converter.telerik.com") > 0) iconUrl = "codeConverterFavicon.ico";
                    if (iconUrl.indexOf("www.telerik.com") > 0) iconUrl = "telerikFavicon.ico";
                    if (iconUrl.indexOf("www.w3.org") > 0) iconUrl = "w3Favicon.png";
                    tab.set_imageUrl(iconUrl);
                    tabStrip.commitChanges();

                    //Select this tab
                    tab.select();
               }

               function getWebsiteName(websiteName) {
                    url = websiteName.replace("http://", "");
                    url = url.replace("www.", "");
                    url = url.substr(0, url.indexOf("."));
                    url = url.charAt(0).toUpperCase() + url.substr(1);
                    return url;
               }
            //]]>            
          </script>
     </telerik:RadCodeBlock>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Window.png" AlternateText="tlrk.it/1cJD5ye" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1cJD5ye">tlrk.it/1cJD5ye</a>
    </div>
    </form>
</body>
</html>