Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Button / Single Click Button

Single Click Buttons

  • Single Click Button

    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

    The example demonstrates two scenarios:

    • how to disable RadButton when clicked and submit the content from a standard textbox
    • how to simulate a download of file and disable RadButton during the download process. Note that this is a fake download and no files are downloaded on the client's machine.

    Note: The disabled="disabled" attribute is applied to the control's HTML element, when it is disabled. This causes the client browser to not submit the page correctly (i.e. the values of the input fields are not submitted), and as a result RadButton's server-side events are not be fired. In some browsers (IE6,7 and 8) the page is not submitted at all. That's why the ASP.NET postback mechanism should be used to submit the page. This is achieved by setting UseSubmitBehavior="false" [UseSubmitBehavior - Gets or sets a value indicating whether the RadButton control uses the client browser's submit mechanism or the ASP.NET postback mechanism].

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ 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" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .btnDisable .rbPrimaryIcon
            {
                background: url(img/loading2.gif) !important;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" ClientEvents-OnResponseEnd="EnableButtons">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnStandard" EventName="Click">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="btnStandardWrapper" UpdatePanelRenderMode="Block" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btnDownload" EventName="Click">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblTime" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadScriptBlock ID="RadScriptBlock" runat="server">
            <script type="text/javascript">
                //<![CDATA[

                function OnClientClicked(sender, eventArgs) {
                    sender.set_enabled(false);

                    if (sender.get_text() == "Submit") sender.set_text("Submitting...");
                    else if (sender.get_text() == "Download File") {
                        sender.set_text("Downloading...");
                        $get("downloadStatus").style.display = "";
                        $get("lblTime").innerHTML = " ";
                    }
                }

                function EnableButtons(sender, eventArgs) {
                    var btnDownload = $find("<%=btnDownload.ClientID%>");
                    btnDownload.set_enabled(true);
                    btnDownload.set_text("Download File");
                    $get("downloadStatus").style.display = "none";

                    var btnStandard = $find("<%=btnStandard.ClientID%>");
                    btnStandard.set_text("Submit");
                    btnStandard.set_enabled(true);
                }

                Sys.WebForms.PageRequestManager.getInstance().add_endRequest
                (
                    function (sender, args) {

                        if (args.get_error() != null) {
                            alert("Only Plain Text Allowed!");
                            // Let the framework know that the error is handled,
                            args.set_errorHandled(true);
                            var btnStandard = $find("<%=btnStandard.ClientID%>");
                            btnStandard.set_text("Submit");
                            btnStandard.set_enabled(true);
                        }
                    }
                )

                //]]>
            </script>
        </telerik:RadScriptBlock>
        <div style="width: 700px; margin: 0 auto;">
            <fieldset style="padding: 0 15px 15px; -moz-border-radius: 4px; border-top-left-radius: 4px;
                border-bottom-left-radius: 4px; -web-kit-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; overflow-y: scroll;">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: 200px; border: 1px solid #666;"></asp:Label>
                    <telerik:RadButton ID="btnStandard" runat="server" Text="Submit" OnClick="btnStandard_Click"
                        UseSubmitBehavior="false" OnClientClicked="OnClientClicked" 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" OnClick="btnDownload_Click" Text="Download File"
                    DisabledButtonCssClass="btnDisable" UseSubmitBehavior="false" OnClientClicked="OnClientClicked">
                    <Icon PrimaryIconCssClass="rbDownload" />
                </telerik:RadButton>
                <img src="img/loading1.gif" id="downloadStatus" alt="Loading Gif" style="display: none" />
                <asp:Label ID="lblTime" runat="server" EnableViewState="false"></asp:Label>
            </fieldset>
        </div>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451