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

Single Click

emoticons


The single click ImageButton is used to avoid multiple postbacks/callbacks to the server. This feature is useful in scenarios where the developer should prevent submitting of identical content multiple times to the server (e.g. when editing a data-base or sending an e-mail).

The following properties should be used to enable the single click functionality:

  • SingleClick - determines whether the RadImageButton control will be immediately disabled after the user clicks it. Set it to true to enable the single click functionality.
  • SingleClickText - determines the text displayed in the RadImageButton control after the button is being clicked and disabled. The original text will be retrieved after the server request execution. The property takes a plain text string.

The submitted text in processed on the server-side. Note that the method System.Threading.Thread.Sleep is used so that the disabled button can be examined after clicking it.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ImageButton.SingleClick.DefaultCS" %>

<%@ 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>
    <link href="styles.css" rel="stylesheet" />
    <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-medium">
        <div class="receivedMessageContainer" style="">
            <asp:Label CssClass="lbReceivedMessage" ID="lblReceivedMessage" runat="server" />
            <asp:RequiredFieldValidator ID="RFV1" runat="server" ErrorMessage="Please enter message" ControlToValidate="txtClientMessage"></asp:RequiredFieldValidator>
        </div>
        <div class="messageContainer">
            <telerik:RadTextBox RenderMode="Lightweight" TextMode="MultiLine" ID="txtClientMessage" runat="server" Width="100%" Height="100px" EmptyMessage="Enter your name...">
                <EmptyMessageStyle ForeColor="#7c93a5 " BackColor="Transparent" BorderWidth="0px" BorderStyle="Solid" />
            </telerik:RadTextBox>
            <div style="text-align: right; margin-top: 10px;">
                <img src="images/emoticons.png" alt="emoticons" />
            </div>
        </div>
        <telerik:RadImageButton CssClass="btnSendMessage" ID="btnSubmit" runat="server" Text="SEND MESSAGE" OnClientClicked="telerikDemo.btnSendMessageClick" OnClick="btnSubmit_Click" Height="50px" Width="210px"
            SingleClick="true" SingleClickText="SENDING ...">
            <Image Url="images/ImageButton_background.png" />
        </telerik:RadImageButton>
        <br />
        <br />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance