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

Confirm Postback

This example shows different ways to confirm the submission of the page to the server when using the RadButton control:

  • The first button uses the browser's confirm dialog. This is the most straightforward approach.
  • The second one uses RadConfirm for the confirmation dialog. This provides uniform experience across all browsers.
  • The third one uses a RadWindow that lets the developer customize the look of the dialog as desired.

All approaches rely on cancelling the OnClientClicking event of the RadButton. When RadConfirm is used, the button's click() method is used to initiate the postback if the user confirms the action. With the custom RadWindow dialog the client-side API of both controls is used to handle the events of all needed controls.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Button.Confirm.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <div class="demo-container size-wide">
        <div style="height: 50px">
            <telerik:RadButton RenderMode="Lightweight" ID="btnStandardConfirm" runat="server" Text="Standard window.confirm"
                OnClientClicking="StandardConfirm" OnClick="Button_Click">
            </telerik:RadButton>
            <asp:Label ID="Label1" runat="server" EnableViewState="false" ForeColor="Green"></asp:Label>
        </div>
        <div style="height: 50px">
            <telerik:RadButton RenderMode="Lightweight" ID="btnRadConfirm" runat="server" Text="RadConfirm" OnClientClicking="RadConfirm"
                OnClick="Button_Click">
            </telerik:RadButton>
            <asp:Label ID="Label2" runat="server" EnableViewState="false" ForeColor="Green"></asp:Label>
            <telerik:RadWindowManager RenderMode="Lightweight" ID="windowManager1" runat="server" Style="z-index: 100001">
            </telerik:RadWindowManager>
        </div>
        <div>
            <telerik:RadButton RenderMode="Lightweight" ID="btnCustomRadWindowConfirm" runat="server" Text="Custom RadWindow Confirm"
                OnClientClicking="CustomRadWindowConfirm" OnClick="Button_Click">
            </telerik:RadButton>
            <asp:Label ID="Label3" runat="server" EnableViewState="false" ForeColor="Green"></asp:Label>
            <telerik:RadWindow RenderMode="Lightweight" ID="confirmWindow" runat="server" VisibleTitlebar="false" VisibleStatusbar="false"
                Modal="true" Behaviors="None" Height="170px" Width="330px" Style="z-index: 100001">
                <ContentTemplate>
                    <div style="margin-top: 30px; float: left;">
                        <div style="width: 60px; padding-left: 15px; float: left;">
                            <img src="images/ModalDialogAlert.gif" alt="Confirm Page" />
                        </div>
                        <div style="width: 200px; float: left;">
                            <asp:Label ID="lblConfirm" Font-Size="14px" Text="Are you sure you want to submit the page?"
                                runat="server"></asp:Label>
                            <br />
                            <br />
                            <telerik:RadButton RenderMode="Lightweight" ID="btnYes" runat="server" Text="Yes" AutoPostBack="false" OnClientClicked="YesOrNoClicked">
                                <Icon PrimaryIconCssClass="rbOk"></Icon>
                            </telerik:RadButton>
                            <telerik:RadButton RenderMode="Lightweight" ID="btnNo" runat="server" Text="No" AutoPostBack="false" OnClientClicked="YesOrNoClicked">
                                <Icon PrimaryIconCssClass="rbCancel"></Icon>
                            </telerik:RadButton>
                        </div>
                    </div>
                </ContentTemplate>
            </telerik:RadWindow>
        </div>
    </div>
    <script type="text/javascript">
        function pageLoad() {
            confirmWindow = $find("<%=confirmWindow.ClientID %>");
            btnCustomRadWindowConfirm = $find("<%=btnCustomRadWindowConfirm.ClientID %>");
            btnYes = $find("<%=btnYes.ClientID%>");
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance