New to Kendo UI for jQuery? Download free 30-day trial

jQuery SmartPasteButton Events

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

events.html

Also available for:

Sample Data to Copy

Alice Johnson
Email: alice.johnson@company.com
Phone: +1 (555) 987–6543

$(document).ready(function () { $("#copyButton").kendoButton({ fillMode: "flat", icon: "copy", click: onClick }); $("#loader").kendoLoader({ size: "large", type: "converging-spinner", visible: false }); $("#overviewForm").kendoForm({ orientation: "vertical", validatable: { validationSummary: false }, 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>", items: [ { field: "FullName", label: "Full Name", editor: "TextBox", editorOptions: { placeholder: "e.g. John Doe" } }, { field: "Email", label: "Email", editor: "TextBox", editorOptions: { placeholder: "e.g. john.doe@company.com" } }, { field: "Phone", label: "Phone Number", editor: "MaskedTextBox", editorOptions: { mask: "(000) 000-00-00" }, attributes: { placeholder: "e.g. XXXXXXXX" } } ], smartPaste: { text: "Smart Paste", service: "https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste", requestStart: onRequestStart, requestEnd: onRequestEnd, error: onError } }); $("#overviewForm input").on("change", function () { var input = $(this); var wrapper = input.closest(".k-input"); var currInputValue = this.value; if (currInputValue == "") { setTimeout(function () { wrapper.removeClass("k-valid"); input.removeClass("valid"); }, 0); } }); }); function onClick(e) { const element = document.getElementById("chatContent"); const range = document.createRange(); range.selectNodeContents(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); navigator.clipboard.writeText(selection.toString()); $(e.sender.element).find(".k-button-text").text("Text Copied"); } function onRequestStart() { $("#loader").data("kendoLoader").show(); $("#copyButton").find(".k-button-text").text("Copy"); kendoConsole.log("Request Start"); clearSelection(); } function onRequestEnd() { $("#loader").data("kendoLoader").hide(); $("#Phone").blur(); kendoConsole.log("Request End"); } function onError() { kendoConsole.log("Error"); } function onClear() { $(".k-form-field").removeClass("k-form-field-error"); $(".k-input-inner").css("color", "black"); $(".k-input").removeClass("k-invalid"); $(".k-invalid-msg").remove(); $("#copyButton").find(".k-button-text").text("Copy"); clearSelection(); $(".k-input").removeClass("k-valid"); } function clearSelection() { var selection = window.getSelection(); if (selection && selection.rangeCount > 0) { selection.removeAllRanges(); } } pre { padding: 10px; } .sample-data-card { width: 284px; border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)); border-radius: 8px; padding: 16px; background-color: var(--kendo-color-surface-alt, #fafafa); position: relative; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .sample-data-card .k-button { position: absolute; right: 12px; bottom: 12px; } .sample-box { border-radius: 6px; padding: 12px; margin-bottom: 12px; } .sample-box pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.5; color: #1f1f1f; white-space: pre-wrap; } .sample-copy { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #2563eb; cursor: pointer; user-select: none; } .sample-data-card pre { background: var(--kendo-color-surface, #ffffff); color: var(--kendo-color-on-app-surface, #424242); } .sample-title { color: var(--kendo-color-on-app-surface, #424242); }

Description

The SmartPasteButton exposes request lifecycle events that allow you to hook into the Smart Paste workflow and provide a smooth user experience.

This demo demonstrates how to handle the request start and end events (and optionally an error handler) to show loading indicators and log the operation progress while the clipboard text is sent to the configured AI service.

For more information about the available events, refer to the SmartPasteButton events documentation.

This SmartPasteButton example is part of the Kendo UI for jQuery demos collection.

jQuery SmartPasteButton Events

Description

Related Documentation

Support & Learning Resources

Additional Resources