Kendo UI for jQuery SmartPasteButton Overview

Updated on Feb 11, 2026

The SmartPasteButton is an AI-powered component that extracts structured data from clipboard content and automatically fills form fields. When users paste unstructured text from emails, documents, or other sources, the SmartPasteButton sends the content to an AI service, which processes the text and returns structured field values that are intelligently distributed to relevant form fields.

The SmartPasteButton component is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The SmartPasteButton works with regular HTML forms using standard input elements (text, email, tel, etc.) as well as Kendo UI form components, providing an intelligent way to reduce manual data entry and improve form completion efficiency.

How It Works

The component follows this workflow:

Retrieves the active form fields - Automatically detects form controls within its form context
Shapes the data into FormFields - Creates metadata that will be passed to the AI Service
AI Service processes the data - Returns FieldValues which are intelligently distributed to relevant fields

FormField Structure

The SmartPasteButton extracts form metadata in the following format:

FormField.Field — Points to the identifier of the retrieved DOM element
FormField.Type — Points to the field type (e.g., input[type="text"], kendo-input)
FormField.Description — Critical for AI accuracy - Additional description passed to the AI Service for constraints, context, and field relationships
FormField.AllowedValues — Constrained values that the AI Service must choose from (for dropdowns, radio groups)

Example request to AI service:

json

[
    {
        "field": "email",
        "description": "Email Address",
        "type": "string"
    },
    {
        "field": "country",
        "description": "Select Country",
        "type": "fixed-choices",
        "allowedValues": ["USA", "Canada", "Mexico"]
    }
]

Field Types

string — For HTML text inputs. Expects plain text values
number — For HTML number inputs. Expects numeric values without formatting
boolean — For HTML checkboxes and switches. Expects true or false values
fixed-choices — For HTML select elements and radio buttons. Expects values from allowedValues
kendo-input — For Kendo UI components. Expects values in component-specific format (Date objects for DatePicker, etc.)

Contextual Descriptions

Use detailed descriptions to provide validation context and improve AI accuracy:

javascript

formFields: [
    {
        field: "age",
        type: "number",
        description: "Age in years. Value must be between 18 and 100."
    },
    {
        field: "deliveryDate", 
        type: "kendo-input",
        description: "Preferred delivery date. Must be a future weekday."
    }
]

Explicit Field Configuration

While automatic detection works for most scenarios, you can provide explicit field configurations using the formFields option for precise control:

<style>
    .editor-body-text {
        border: 1px solid #dcdcdc;
        padding: 10px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.4;
    }

    #copyButton {
        margin-bottom: 12px;
    }

    #form1 {
        max-width: 300px;
    }

        #form1 .k-textbox,
        #form1 .k-maskedtextbox {
            margin-bottom: 8px;
            display: block;
        }

    #smartPaste {
        margin-top: 6px;
    }
</style>

<div class="editor-body-text" id="editorContent">
    Ashley Johnson is a UX Designer with 8 years of experience in Portland, Oregon.
    She’s reliable, and great at making complex ideas simple.
    Her approach ensures smooth teamwork and great results.
    Reach her at (555) 248-9173.
</div>

<button id="copyButton">Copy Text</button>


<form id="form1">
    <input id="fullName" />
    <input id="city" />
    <input id="phone_number" placeholder="e.g. XXXXXXXX" />

    <button id="smartPaste"></button>
</form>

<script>
    $(document).ready(function () {
        $("#copyButton").kendoButton({
            click: onClick
        });

        $("#fullName").kendoTextBox({
            label: "Full Name",
            placeholder: "Full Name"
        });

        $("#city").kendoTextBox({
            label: "City",
            placeholder: "City"
        });

        $("#phone_number").kendoMaskedTextBox({
            label: "Phone Number",
            mask: "(000) 000-00-00",
        });

        $("#smartPaste").kendoSmartPasteButton({
            text: "Smart Paste",
            service: "https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste",
        });
    });

    function onClick(e) {
        const element = document.getElementById("editorContent");
        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");
    }
</script>

Use explicit configuration when you need to:

Specify exact data types for fields (particularly number types)
Include only specific form fields while excluding others
Provide detailed descriptions to help AI understand field purposes
Define allowed values for select fields or radio button groups

Functionality and Features

Getting Started—Step-by-step guide to create and initialize the SmartPasteButton with automatic or explicit field detection.
AI service integration—Configure AI service endpoints to process clipboard content and return structured data for form population.
Events—Handle AI request lifecycle through component events to display loading indicators, process responses, or handle errors.
Appearance and Icons—Customize size, border radius, fill mode, theme color, and icon configuration using predefined appearance options.
Error Handling—Implement proper error handling for AI service failures, network issues, and form validation scenarios.
Keyboard Navigation—Navigate and interact with the SmartPasteButton using keyboard shortcuts and accessibility features.

Supported Kendo UI Components

The SmartPasteButton supports seamless integration with the following Kendo UI components:

Component	Documentation
AutoComplete	AutoComplete Overview
ComboBox	ComboBox Overview
DateInput	DateInput Overview
DatePicker	DatePicker Overview
DateRangePicker	DateRangePicker Overview
DateTimePicker	DateTimePicker Overview
DropDownList	DropDownList Overview
DropDownTree	DropDownTree Overview
Form	Form Overview
MaskedTextBox	MaskedTextBox Overview
MultiColumnComboBox	MultiColumnComboBox Overview
MultiSelect	MultiSelect Overview
NumericTextBox	NumericTextBox Overview
RadioGroup	RadioGroup Overview
Rating	Rating Overview
Switch	Switch Overview
TextArea	TextArea Overview
TextBox	TextBox Overview
TimeDurationPicker	TimeDurationPicker Overview
TimePicker	TimePicker Overview