Copying Row Data from the Grid by Using the Angular Material Clipboard Service

Updated on Feb 24, 2026

Environment

Product

Progress® Kendo UI® Data Grid for Angular

Description

How can I copy row data from the Kendo UI for Angular Grid component by using the Angular Material Clipboard service?

Solution

The Grid provides a built-in Clipboard feature that allows copying and pasting of cell data. For custom clipboard operations, you can follow the approach below.

The following solution demonstrates how to copy row data from the Grid component by using the Angular Material Clipboard service. You can customize the implementation to suit your needs.

1. Install the @angular/cdk package:

   sh

   npm install @angular/cdk

2. Import the ClipboardModule in the module where you want to use the Clipboard service:

   ts

   import { ClipboardModule } from '@angular/cdk/clipboard';
   
   @NgModule({
       ...
       imports: [
           ...
           ClipboardModule
       ],
       ...
   })

3. Inject the Clipboard service in the component where you want to use it:

   ts

   import { Clipboard } from '@angular/cdk/clipboard';
   
   export class AppComponent {
       constructor(private clipboard: Clipboard) { }
   }

4. Use the cellClick event of the Grid to get the row data and save it in a variable:

   html

   <kendo-grid
     [data]="gridData"
     [selectable]="selectableSettings"
     (cellClick)="onCellClick($event)"
   >
   </kendo-grid>

   ts

   export class AppComponent {
       public rowData: string = '';
       public selectableSettings: SelectableSettings = { mode: 'single' };
   
       public onCellClick(event: CellClickEvent): void {
           this.rowData = JSON.stringify(event.dataItem);
       }
   }

5. Add a button to the toolbar template of the Grid and bind its click event to the custom onCopyData method:

   html

   <kendo-grid>
       <ng-template kendoGridToolbarTemplate>
           <button kendoButton (click)="onCopyData()">Copy Row Data</button>
       </ng-template>
   </kendo-grid>

6. Use the copy method of the Clipboard service to copy the row data to the clipboard:

   ts

   public onCopyData(): void {
       this.clipboard.copy(this.rowData);
   }