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

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 Kendo UI for Angular Data Grid does not provide a built-in way to copy row data to the clipboard. However, you can use the Angular Material Clipboard service to implement this functionality.

The following solution is only a basic example of how to copy row data from the Grid component. 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>
       <kendo-grid-toolbar>
           <ng-template kendoGridToolbarTemplate>
               <button kendoButton (click)="onCopyData()">Copy Row Data</button>
           </ng-template>
       </kendo-grid-toolbar>
   </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);
   }