Paste Custom Values in the MultiSelect Component

Paste Custom Values in the MultiSelect Component

Product

Progress® Kendo UI® for Angular MultiSelect

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.

   html

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

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

   ts

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

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

   ts

   public 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.

   ts

   public 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:

   ts

   public 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.

Change Theme

Theme

Loading ...