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.

Window - Alert, Confirm and Prompt

Browser GUI: Alert, Prompt, Confirm


Manipulate radalert and radconfirm content image:




Dialogs called from client:






Dialogs called from server:








New: The radalert and radconfirm allow to easily control the content image by passing an optional argument at the end of the method call. The argument contains relative or absolute url and if empty string is provided - the image is removed.

New: The predefined dialogs (radalert, radconfirm and radprompt) can be now called by using the new server methods RadAlert, RadConfirm and RadPrompt of the RadWindowManager New: The radalert provides client callback support. If a client callback function is specified, the returned argument is true if the alert was closed by the OK button and null if the [X] button was used. The client callback function can also be used as a close handler.

New: The predefined dialogs (radalert, radconfirm and radprompt) can be now called by using the new server methods RadAlert, RadConfirm and RadPrompt of the RadWindowManager. Note, that the callback function is a client side javascript function in all cases, it doesn’t matter whether you show the dialog from the server or from the client.

RadWindowManager's client-side API provides radalert(), radpropmt() and radconfirm() functions that can be used to replace the standard browser's dialog boxes window.alert(), window.prompt() and window.confirm(). Just like RadWindow, RadWindowManager's dialogs are completely customizable and can be used in various scenarios.

Here are the main RadWindowManager's dialogs advantages:
  • Full customization of the window look to blend into the design of the site, thus increasing usability.
  • Control the initial size of the popup by providing width and height as extra parameters.
  • Richer user experience by using HTML content for the dialogs.

Differences from browser's dialogs:

  • RadWindow dialogs are modal, e.g., they block the content underneath and prevent the user from interacting with it, but there are ways to work around this behavior. If it is absolutely necessary that a popup is modal, then the default browser popups should be used.
  • Just like any other DHTML element, RadWindow dialogs exist only in the context of the page in which they are created. They cannot leave the boundaries of the browser's window.
  • radalert, radconfirm and radprompt cannot block the execution thread like the standard popups. That is why a callback function is added as a second parameter in radconfirm and radprompt functions.
C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.BrowserDialogBoxes.DefaultCS"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>Replacing standard ASP.NET Prompt Dialog Boxes with Telerik PopUp Window</title>
     <script src="scripts.js" type="text/javascript"></script>
     <style type="text/css">
          div.qsf-ib
          {
               margin-right: 10px; 
               vertical-align: top;
          }
          .RadForm div.qsf-ib h4
          {
               margin-bottom: 15px;
          }
     </style>
</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" />
     <div>
          <strong>Browser GUI: Alert, Prompt, Confirm</strong><br />
          <hr />
          <br />
          <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
          </telerik:RadWindowManager>
          <div class="qsf-ib">
               <h4>Manipulate radalert and radconfirm content image:
               </h4>
               <asp:RadioButtonList ID="choices" runat="server">
                    <asp:ListItem Selected="True" Value="null" Text="Do not change (pass null or no arg)"></asp:ListItem>
                    <asp:ListItem Value="" Text="Remove (pass empty string)"></asp:ListItem>
                    <asp:ListItem Value="Img/mail.png" Text="Document relative url (pass string)"></asp:ListItem>
                    <asp:ListItem Value="http://www.telerik.com/favicon.ico" Text="Absolute url (pass string)"></asp:ListItem>
               </asp:RadioButtonList>
          </div>
          <div class="qsf-ib">
               <h4>Dialogs called from client:
               </h4>
               <button style="width: 200px;" onclick="radalert('Radalert is called from the client!', 330, 180,'Client RadAlert', alertCallBackFn, imgUrl);  return false;">
                    radalert from client</button><br class="qsf-clear-float" />
               <br class="qsf-clear-float" />
               <button style="width: 200px;" onclick="radconfirm('Client radconfirm: Are you sure?', confirmCallBackFn, 330, 180, null,'Client RadConfirm', imgUrl); return false;">
                    radconfirm from client</button><br class="qsf-clear-float" />
               <br class="qsf-clear-float" />
               <button style="width: 200px;" onclick="radprompt('Client RadPrompt: What is the answer of Life, Universe and Everything?', promptCallBackFn, 350, 230, null, 'Client RadPrompt', '42'); return false;">
                    radprompt from client</button>
               <br class="qsf-clear-float" />
          </div>
          <div class="qsf-ib">
               <h4>Dialogs called from server:
               </h4>
               <telerik:RadAjaxPanel ID="pnl1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                    <asp:Button ID="btnAlert" Width="200" runat="server" OnCommand="Btn_OnCommand" Text="radalert from server"
                         CommandArgument="radalert"></asp:Button>
                    <br class="qsf-clear-float" />
                    <br class="qsf-clear-float" />
                    <asp:Button ID="btnConfirm" Width="200" runat="server" OnCommand="Btn_OnCommand"
                         Text="radconfirm from server" CommandArgument="radconfirm"></asp:Button><br class="qsf-clear-float" />
                    <br class="qsf-clear-float" />
                    <asp:Button ID="btnPrompt" Width="200" runat="server" OnCommand="Btn_OnCommand" Text="radprompt from server"
                         CommandArgument="radprompt"></asp:Button>
               </telerik:RadAjaxPanel>
               <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
               </telerik:RadAjaxLoadingPanel>
               <br class="qsf-clear-float" />
          </div>
          <br class="qsf-clear-float" />
     </div>
     <br />
    </form>
</body>
</html>