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

    RadWindow vs. Browser Window

    • Demo Configurator
    RadWindow dimensions

    RadWindow position

    RadWindowManager's client-side API provides the radopen() function that can easy and quickly replace the standard browser's popup (window.open()). The RadWindow popup is completely customizable and can blend with any site's design, thus increasing the user experience and usability.

    The main advantages of an ASP.NET PopUp Window are:

    • Full customization ability that allows you to change RadWindow's look and feel
    • Rich client-side and server-side API that allows you to fully control RadWindow's behavior.
    • Loading pane that is displayed over the content page while it is still loading - controlled by the ShowContentDuringLoad property. 

    The main difference between RadWindow and browser's popup is that just like any other DHTML element, RadWindow exists only in the context of the page in which it is created. It cannot leave the boundaries of the browser window.

    • DefaultVB.aspx
    • scripts.js
    <%@ Page Language="vb"  %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <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" />
        <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server" EnableShadow="true">
            <Windows>
                <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" ShowContentDuringLoad="false" Width="400px"
                    Height="400px" Title="Telerik RadWindow" Behaviors="Default">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
        <div class="demo-container size-thin">
            <p>
            <telerik:RadButton RenderMode="Lightweight" runat="server" AutoPostBack="false" OnClientClicked="openRadWin" Text="Open RadWindow" />
            </p>
            <p>
                <telerik:RadButton RenderMode="Lightweight" runat="server" AutoPostBack="false" OnClientClicked="openPopUp" Text="Open browser's popup" />
            </p>
        </div>
        <qsf:ConfiguratorPanel runat="server">
            <Views>
                <qsf:View>
                 <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="RadWindow dimensions">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox runat="server" ID="widthInput" Label="Width" Size="Narrow" ClientEvents-OnLoad="widthTextBox_load">
                                <NumberFormat GroupSeparator="" DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="heightInput" Label="Height" Size="Narrow" ClientEvents-OnLoad="heightTextBox_load">
                                <NumberFormat GroupSeparator="" DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        </ul>
                        </qsf:ConfiguratorColumn>
                    <br />
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="RadWindow position">
                <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox runat="server" ID="leftInput" Label="Left" Size="Narrow" ClientEvents-OnLoad="leftTextBox_load">
                                <NumberFormat GroupSeparator="" DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="topInput" Label="Top" Size="Narrow" ClientEvents-OnLoad="topTextBox_load">
                                <NumberFormat GroupSeparator="" DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance