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 / First Look

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

  •  RadWindow for ASP.NET AJAX

     

    The demo is modeled after an MDI application, featuring the ability to open 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 controls:

    • RadWindow - 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.

     

    RadWindow Key Features

    • Full Customization of the Visual Appearance using skins.
    • Full Control over window's visibility and location.
    • Rich Client Event Model.
    • Circumvents the Windows XP SP2 Popup Blocker Mechanism.
    • Cross-Browser "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.

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.Default.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">
            .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;
            }
        </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 class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="all" />
        <table cellpadding="0" cellspacing="0">
            <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="http://www.telerik.com/favicon.ico">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Code Converter" ImageUrl="http://converter.telerik.com/favicon.ico">
                            </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" />
                                    </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="700" runat="server" SmallChange="10" />
                                    </td>
                                    <td>
                                        700
                                    </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" />
                                    </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="115px" 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="http://www.telerik.com/favicon.ico" runat="server">
                </telerik:RadWindow>
                <telerik:RadWindow ID="RadWindow2" Title="Code Converter" NavigateUrl="http://converter.telerik.com"
                    IconUrl="http://converter.telerik.com/favicon.ico" 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 windows = manager.get_windows();
                    var selIndex = tabStrip.get_selectedIndex();

                    for (var i = 0; i < windows.length; i++) {
                        var win = windows[i];
                        if (i == selIndex) {
                            //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();
                    }
                }

                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();
                    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
                    var oWnd = manager.getActiveWindow();
                    if (!oWnd) return;
                    oWnd.set_width(sender.get_value());

                    updateLabel(sender, args, 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, args, 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);
                    }

                    //Change RadWindow icon to the favicon.ico icon of the opened site
                    oWnd.set_iconUrl(originalUrl + "/favicon.ico");
                }


                function updateLabel(slider, args, label) {
                    label.innerText = 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);
                    tab.set_imageUrl(oWnd.get_navigateUrl() + "/favicon.ico");
                    tabStrip.commitChanges();

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

                function getWebsiteName(websiteName) {
                    url = websiteName.replace("http://www.", "");
                    url = url.substr(0, url.indexOf("."));
                    url = url.charAt(0).toUpperCase() + url.substr(1);
                    return url;
                }
                //]]>
            </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