Monday, July 12, 2021

Kendo Grid Copy Text Example

This article is an example of copying text in a Kendo Grid Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to be able to copy text in a Kendo Grid when multiple selection is enabled.

This article is based on an answer I made in Stack Overflow - Kendo Grid UI: Enable custom text copy. When the selectable option is set to multiple or others, you can't select text over a mouse-drag action. So we have to handle the copy text operation. First off, we create a Kendo ContextMenu that targets the grid component. When the context menu is opened, we display the text via an input tag wherein the user can copy the text as he pleases.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

You should see something like below when you run the program.

Kendo Grid Copy Text Example
Kendo Grid Copy Text

There you have it. A quick and simple example of how to copy a text from a Kendo Grid with selection features enabled.