New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Events

Updated on Feb 11, 2026

The SmartPasteButton exposes client-side events that allow you to handle the request lifecycle and customize the component behavior.

For a complete example, refer to the demo on using the events of the SmartPasteButton.

Supported Events

The SmartPasteButton exposes the following client-side events:

RequestStart—Fires when the component starts processing a paste operation.
RequestEnd—Fires when the component completes processing a paste operation.
Error—Fires when an error occurs during processing.

Handling Events of the SmartPasteButton

To handle the SmartPasteButton events, configure the Events() option.

Razor

@(Html.Kendo().SmartPasteButton()
    .Name("smartPasteButton")
    .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
    .Text("Smart Paste")
    .Events(e => e
        .RequestStart("onRequestStart")
        .RequestEnd("onRequestEnd")
        .Error("onError")
    )
)

Handling SmartPaste Events in a Form

In the demo, the SmartPaste configuration of the Telerik UI Form subscribes to the SmartPaste events.

The example toggles a Loader component (loader) during the request lifecycle and resets the text of a separate Copy button (copyButton).

Razor

@(Html.Kendo().Form<ResponsiveFormViewModel>()
    .Name("responsiveForm")
    .Orientation("vertical")
    .ClearButton(true)
    .SmartPaste(s => s
        .Name("smartPaste")
        .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
        .Text("Smart Paste")
        .Events(e => e.RequestStart("onRequestStart").RequestEnd("onRequestEnd").Error("onError"))
    )
    .ButtonsTemplate(
        "<button id='clearButton' type='reset' onclick='onClear()' " +
            "data-role='button' class='k-button k-button-md k-rounded-md k-button-flat k-button-flat-base' " +
            "role='button' aria-disabled='false' tabindex='0'>" +
            "<span class='k-icon k-font-icon k-i-arrow-rotate-ccw'></span>" +
        "</button>"
    )
    .Validatable(v => v.ValidationSummary(false))
    .Items(i =>
    {
        i.Add().Field(f => f.FullName).Label("Full Name").Editor(e => e.TextBox().Placeholder("e.g. John Doe"));
        i.Add().Field(f => f.Email).Label("Email").Editor(e => e.TextBox().Placeholder("e.g. john.doe@company.com"));
        i.Add().Field(f => f.Phone)
            .Label("Phone Number")
            .InputHtmlAttributes(new { placeholder = "e.g. XXXXXXXX" })
            .Editor(e => e.MaskedTextBox().Mask("(000) 000-00-00"));
    })
)

When using the SmartPaste configuration through the Form TagHelper (form-smart-paste), the available event handler attributes are on-request-start and on-request-end.

<script>
    function onRequestStart(e){
        $("#loader").data("kendoLoader").show();

        $("#copyButton").find(".k-button-text").text("Copy");

        console.log("Processing started for content:", e.content);

        clearSelection();
    }

    function onRequestEnd(e){
        $("#loader").data("kendoLoader").hide();

        console.log("Processing completed with values:", e.fieldValues);

        $("#Phone").blur();
    }

    function onError(e){
        console.log("Error occurred: " + e.error);
    }

    function onClear(e) {
       $(".k-input-inner").css("background-color", "white");
       $(".k-form-field").removeClass("k-form-field-error");
       $(".k-input").removeClass("k-invalid");
       $(".k-invalid-msg").remove();

       clearSelection();

       $("#copyButton").find(".k-button-text").text("Copy");
    }

    function clearSelection(){
        var selection = window.getSelection();

        if (selection && selection.rangeCount > 0) {
            selection.removeAllRanges();
        }
    }
</script>

Events

Supported Events

Handling Events of the SmartPasteButton

Handling SmartPaste Events in a Form

See Also