Paste Custom Values in the MultiSelect Component

Paste Custom Values in the MultiSelect Component

Description

How can I paste custom values in the MultiSelect component?

Solution

To achieve the desired scenario:

1. Add the paste event to the MultiSelect component.

   Copy Code<kendo-multiselect (paste)="pasteHandler($event)"></kendo-multiselect>

2. Prevent the default behavior and the propagation of the paste event.

   Copy Codepublic pasteHandler(event: ClipboardEvent) {
       event.stopPropagation();
       event.preventDefault();
   }

3. Retrieve the pasted text from the clipboard by using the Event.clipboardData.getData() method.

   Copy Codepublic pasteHandler(event: ClipboardEvent) {
       const clipboardData = event.clipboardData.getData('Text');
   }

4. Use the split method to divide the pasted string by a specific character or white space. This step depends on the format of the text that needs to be pasted inside the MultiSelect value. In the example below, the pasted text is divided by commas and split by that symbol.

   Copy Codepublic pasteHandler(event: ClipboardEvent) {
       const splitData = clipboardData.trim().split(',');
   }

5. Add the newly created array of divided strings to the MultiSelect value property. The end result of the paste event logic will look like the following:

   Copy Codepublic pasteHandler(event: ClipboardEvent) {
       event.stopPropagation();
       event.preventDefault();
       const clipboardData = event.clipboardData.getData('Text');
       const splitData = clipboardData.trim().split(',');
       splitData.forEach((item) => this.selectedSizes.push(item));
   }

The following example demonstrates how to copy text with commas as separators and paste it inside the component value.

1. Copy the example text - S, M, L, XL, XXL.

2. Focus the MultiSelect input and paste the copied text by using the Ctrl + V (Windows) / command-V (Mac) keyboard shortcut.