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

Alert, Confirm and Prompt

Dialogs called from client:





Dialogs called from server:





  • Demo Configurator

Manipulate radalert and radconfirm content image:




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.

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.

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.

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.BrowserDialogBoxes.DefaultCS"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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <div class="demo-containers">
        <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server" EnableShadow="true">
        </telerik:RadWindowManager>
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="theFormDecorator" runat="server" DecoratedControls="Buttons" />
        <div class="demo-container">
            <h2>Dialogs called from client: </h2>
            <button style="width: 230px;" onclick="radalert('Radalert is called from the client!', 330, 180, 'Client RadAlert', alertCallBackFn, $dialogsDemo.imgUrl);  return false;">
                radalert from client
            </button><br />
            <br />
            <button style="width: 230px;" onclick="radconfirm('Client radconfirm: Are you sure?', confirmCallBackFn, 330, 180, null, 'Client RadConfirm', $dialogsDemo.imgUrl); return false;">
                radconfirm from client
            </button><br />
            <br />
            <button style="width: 230px;" 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>
        </div>
        <div class="demo-container">
            <h2>Dialogs called from server: </h2>
            <telerik:RadAjaxPanel ID="pnl1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                <asp:Button ID="btnAlert" Width="230" runat="server" OnCommand="Btn_OnCommand" Text="radalert from server"
                            CommandArgument="radalert"></asp:Button><br />
                <br />
                <asp:Button ID="btnConfirm" Width="230" runat="server" OnCommand="Btn_OnCommand"
                            Text="radconfirm from server" CommandArgument="radconfirm"></asp:Button><br />
                <br />
                <asp:Button ID="btnPrompt" Width="230" runat="server" OnCommand="Btn_OnCommand" Text="radprompt from server"
                            CommandArgument="radprompt"></asp:Button>
            </telerik:RadAjaxPanel>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                    <qsf:RadioButtonList ID="choices" runat="server" Label="Manipulate radalert and radconfirm content image:">
                        <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="images/mail.png" Text="Document relative url (pass string)"></asp:ListItem>
                        <asp:ListItem Value="http://demos.telerik.com/aspnet-ajax/favicon.ico" Text="Absolute url (pass string)"></asp:ListItem>
                    </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance