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

Client-side Events

Title
Ashley Johnson is a UX Designer with 8 years of experience in Portland, Oregon. She is reliable, and great at making complex ideas simple. Her approach ensures smooth teamwork and great results. Reach her at (555) 248-9173.
Event log

The WebForms SmartPasteButton supports a comprehensive set of events which enable you to provide fluent experience and smooth interaction with the component.

This demo shows how to use and handle the ReuestStart event, the RequestEnd event, and the Error event.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • script.js
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb"  Inherits="SmartPasteButton_Client_Side_Programming_ClientSideEvents_DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../../SmartPasteStyles.css" rel="stylesheet" />
    <link href="../../Overview/style.css" rel="stylesheet" />
    <script src="script.js"></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 no-bg flex-center" runat="server">
        <div class="smartpaste-container" id="smartPasteContainer">
            <telerik:RadCard runat="server">
                <telerik:CardBodyComponent runat="server">
                    <div class="editor-column">
                        <div class="editor">
                            <div class="editor-toolbar">
                                <div class="schematic-toolbar">
                                    <div class="button-group">
                                        <div class="skeleton-btn skeleton-btn-left"><span class="label"></span></div>
                                        <div class="skeleton-btn skeleton-btn-right"><span class="label"></span></div>
                                    </div>
                                    <div class="commands">
                                        <div class="split-button">
                                            <div class="skeleton-btn skeleton-btn-split-main"><span class="label wide"></span></div>
                                            <div class="skeleton-btn skeleton-btn-split-arrow">
                                                <svg width="12" height="8" viewBox="0 0 12 8">
                                                    <path fill="#ffffff" d="M6 8L0 0h12L6 8z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="skeleton-btn skeleton-btn-icon">
                                            <svg width="4" height="16" viewBox="0 0 4 16">
                                                <circle cx="2" cy="2" r="2" fill="#ffffff"></circle>
                                                <circle cx="2" cy="8" r="2" fill="#ffffff"></circle>
                                                <circle cx="2" cy="14" r="2" fill="#ffffff"></circle>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="editor-text-area">
                                <div class="content">
                                    <div class="editor-body">
                                        <div class="editor-body-title">Title</div>
                                        <div class="editor-body-text" id="editorContent">
                                            Ashley Johnson is a UX Designer with 8 years of experience in Portland, Oregon.
                                            She is reliable, and great at making complex ideas simple.
                                            Her approach ensures smooth teamwork and great results.
                                            Reach her at (555) 248-9173.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="editor-actions">
                            <telerik:RadButton runat="server" ID="CopyButton1" Text="Copy Text" AutoPostBack="false" OnClientClicked="onCopyClick" />
                        </div>
                    </div>
                </telerik:CardBodyComponent>
            </telerik:RadCard>

            <telerik:RadCard runat="server">
                <telerik:CardBodyComponent runat="server">
                    <div class="form-wrapper">
                        <div class="control-container">
                            <label for="RadtextBox1">Full Name</label>
                            <telerik:RadTextBox runat="server" ID="RadtextBox1" EmptyMessage="Full Name" Width="250" SmartPasteDescription="Name" />
                        </div>
                        <div class="control-container">
                            <label for="RadtextBox1">City</label>
                            <telerik:RadTextBox runat="server" ID="TextBox2" EmptyMessage="City" Width="250" SmartPasteDescription="City" />
                        </div>
                        <div class="control-container">
                            <label for="RadtextBox1">Phone Number</label>
                            <telerik:RadMaskedTextBox runat="server" ID="RadNumericTextBox1" Width="250" Mask="(###) ###-####" SmartPasteDescription="Phone Number" />
                        </div>
                        <div class="buttonDiv">
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton13" runat="server" AutoPostBack="false" ToolTip="Clear Inputs" OnClientClicked="onClearClick">
                                <Icon PrimaryIconCssClass="rbCancel"></Icon>
                            </telerik:RadButton>
                            <telerik:RadSmartPasteButton runat="server" ID="SmartPasteButton1" Text="Smart Paste" ServiceUrl="https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste">
                                <ClientEvents OnLoad="onLoad" OnRequestStart="onRequestStart" OnRequestEnd="onRequestEnd" OnError="onError" />
                            </telerik:RadSmartPasteButton>
                        </div>
                    </div>
                </telerik:CardBodyComponent>
            </telerik:RadCard>
        </div>
    </div>

    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" Height="300px"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance