Copy and paste feature row in the grid

[Anil]

we need the copy and paste feature in grid

copy the data form one row and then create the new row , paste the data in row 

[Martin Bechev]

Hi Anil,

Thank you for the provided screenshot.

I am afraid that currently such functionality is not supported out-of-the-box. Having said that the developer will need a custom implementation based on Cell templates and Reactive Forms, for example:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/#toc-rendering-editors-in-the-cell-templates

Let me know if I can provide any further assistance for Kendo UI for Angular.

Regards,
Martin
Progress Telerik

[Anil]

We have copy paste (row) functionality that required  as per the screen shot provided.But  this feature is not available in angular kendo UI.

Our requirement is:
After adding a new (blank) record , (for that blank record) we need to copy the existing row and paste it in the newly added blank row.

please let you know how we can achieve this in kendo ui for angular

[Martin Bechev]

Hi Anil,

Indeed, there is no built-in functionality that allows us to copy and paste data to the grid. That is why the desired behavior can be achieved by using a custom JavaScript code by getting the content from the user's clipboard with the ClipboardEvent interface.

To demonstrate the approach I prepared a StackBlitz example:

https://stackblitz.com/edit/angular-yddtyq

Also please check this article from our documentation that shows how to pasted excel values in the Grid using  the Clipboard API:

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/paste-from-excel/

The idea of the example is to demonstrate how with custom JavaScript code and Clipboard API the desired functionality could be achieved. However, it needs some further modification by the developer to meet the exact use case and requirements of the project.

It is worth mentioning that custom logic that is not directly related to the build-in functionality of the Kendo UI for Angular components should be in the hands of the developer, and all custom implementation and feature customizations fall outside of the scope of our support service.

Regards,
Martin
Progress Telerik

[Atul]

Hi Martin,

I have a Kendo grid with contextmenu cut/copy/paste... by using keyboard (ctrl+c and ctrl+v)copy and paste is working as expecte, but if I wanted to copy text from column or cell using contextmenu with right click only copy is working, paste not working.

Could you please help me why Paste not working on cell?

[Martin Bechev]

Hi Atul,

If I understand you correctly, the data is being copied with a keyboard shortcut command Ctrl+C, but not pasted when using a context menu. Please correct me if I am wrong.

The 'paste' operation processed from a context menu is not possible and is always disabled by default. The reason - because of a browser security restriction.

JavaScript cannot take data from the clipboard without the user explicitly doing a paste command from the browser (Ctrl+V or from the browser menu). Otherwise, websites could steal data from the client by grabbing it from the clipboard maliciously.

[Subbu]

hello Martin,

The same functionality is supported in WinForm and Kendo-jQuery but Angular is not supported.

Can you support us in ad hoc basis an workable alternative?

 

Thanks

 

 

 

 

[Svet]

Hi Anil,

Indeed, there isn't such built-in feature provided by the Kendo UI for Angular Grid. However it can be achieved using some custom logic. For the purpose the desired "Copy" and "Paste" buttons can be added to the command column. Then when clicking the "Copy" button the corresponding dataItem for the current row should be saved. That will allow to use that saved dataItem at a later stage when adding a new row and clicking the "Paste" button. When clicking the "Paste" button the values of the FormControls should be updated accordingly. Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-nnbqkr-4il5yf?file=app%2Fapp.component.ts

The essential parts are highlighted below:

 

   <kendo-grid-command-column title="command" width="220">
            <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
                <button kendoGridEditCommand [primary]="true">Edit</button>
                <button kendoGridRemoveCommand>Remove</button>
                <button kendoGridSaveCommand [disabled]="formGroup?.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
                <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
                <button kendoButton *ngIf="!isNew" (click)="copy(dataItem)">Copy</button>
                <button kendoButton *ngIf="isNew" (click)="paste()">Paste</button>
            </ng-template>
        </kendo-grid-command-column>

...

    public copy(dataItem){
      this.copiedObject = dataItem;
    }

    public paste(){

      this.formGroup.get('ProductID').patchValue(this.copiedObject.ProductID); 
      this.formGroup.get('ProductName').patchValue(this.copiedObject.ProductName); 
      this.formGroup.get('UnitPrice').patchValue(this.copiedObject.UnitPrice); 
      this.formGroup.get('UnitsInStock').patchValue(this.copiedObject.UnitsInStock); 
      this.formGroup.get('Discontinued').patchValue(this.copiedObject.Discontinued); 

    }

 

I hope the suggest approach will help you to move forward with this case. Please let us know in case any further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Kamaraj]

Hi Team,

I am looking for the Copy Columns from grid and Paste Them on Selected Grid Columns .I found similar solution for Jquery but not in Angular .

Can some one provide the link please ?

For your reference find the link below for working example in Jquery.I am looking for the same from Angular for kendo grid .

https://docs.telerik.com/kendo-ui/knowledge-base/grid-copy-columns-from-excel-paste-on-selected-columns

 

 

[Kamaraj]

hi Martin,

I am also having this issue in Kendo - Angular.This feature issupported in Jquery but not in Angular .

Find the link below for your reference.

https://docs.telerik.com/kendo-ui/knowledge-base/grid-copy-columns-from-excel-paste-on-selected-columns

Regards,

Kamaraj.P

 

[Martin Bechev]

Hi Kamaraj,

I am afraid that, currently, there is no such copy from Excel and paste in the Grid feature available out of the box for Kendo UI for Angular.

If you have the time please support by voting one of the following logged feature requests in our Feedback portal:

https://feedback.telerik.com/kendo-angular-ui/1360792-copy-data-from-excel-to-kendo-grid-angular-similar-to-kendo-ui-jquery

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback/suggestions/31493491-import-excel-file-in-to-kendo-grid-for-angular-2

That will help us to keep track of the client's demand and we will be able to add the required feature to our future development plans. Thank you for voting.

However, you can check the following How-to article demonstrating how to paste from excel relying on vanilla JavaScript APIs and accessing the clipboard content:

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/paste-from-excel/ 

I hope this helps.

Regards,
Martin
Progress Telerik