Button - Single Click Button

Single Click Buttons

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The single click button is used to avoid multiple postbacks/callbacks to the server. This feature is useful in database and/or e-mail send scenarios when the developer should prevent submitting of identical content multiple times to the server.

As of Q3 2012, all you need to do to enable this functionality is set the SingleClick property to true. RadButton will automatically disable itself after being clicked and will re-enable itself after the request has finished.

In case the button triggers an AJAX request, make sure the button itself is included in the response, so it will be enabled after a response is received from the server.

The SingleClickText property can be used for setting the text displayed in the button while the request is being processed by the server.

The example demonstrates two scenarios:

  • How to disable the RadButton when clicked and submit the content from a standard textbox.
  • How to simulate a download of a file and disable the RadButton during the download process. Note that this is a fake download and no files are downloaded on the client's machine.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.SingleClick.DefaultCS" %>

<%@ 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>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</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">
        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" RequestQueueSize="2">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnStandard" EventName="Click">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="btnStandardWrapper" UpdatePanelRenderMode="Block"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btnDownload" EventName="Click">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="btnDownload" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="lblTime" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div style="width: 700px; margin: auto;">
            <fieldset style="padding: 0 15px 15px; border-radius: 4px;">
                <legend>Single Click Buttons</legend>
                <br />
                <asp:Panel ID="btnStandardWrapper" runat="server">
                    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Style="width: 350px; height: 200px; float: left;">Type your message here...once submitted, the content will update the neighboring label. Once clicked the Submit button below will stay disabled until the end of the Ajax callback.</asp:TextBox>
                    <asp:Label ID="lblText" runat="server" Style="display: block; float: right; width: 300px; overflow: auto; height: 205px; border: 1px solid #666;"></asp:Label>
                    <telerik:RadButton ID="btnStandard" runat="server" Text="Submit" OnClick="btnStandard_Click"
                        SingleClick="true" SingleClickText="Submitting..." Style="clear: both; float: left; margin: 10px 0;">
                    </telerik:RadButton>
                </asp:Panel>
                <hr style="clear: both; background-color: #666; height: 1px; border: 0;" />
                <telerik:RadButton ID="btnDownload" runat="server" Text="Download File" SingleClick="true"
                    SingleClickText="Downloading..." DisabledButtonCssClass="btnDisable" OnClick="btnDownload_Click">
                    <Icon PrimaryIconCssClass="rbDownload"></Icon>
                </telerik:RadButton>
                <asp:Label ID="lblTime" runat="server" EnableViewState="false"></asp:Label>
            </fieldset>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?