Clipboard in Angular Grid component

25 Aug 202516 minutes to read

The clipboard feature in the Syncfusion Angular Grid provides an efficient way to copy selected rows or cells data to the clipboard. The grid supports keyboard shortcuts to perform clipboard operations seamlessly. The following keyboard shortcuts are supported for copying selected rows or cells data:

Interaction keys Description
Ctrl + C Copy selected rows or cells data to clipboard.
Ctrl + Shift + H Copy selected rows or cells data with headers to clipboard.
Ctrl + V Paste copied data to selected cells (requires batch editing mode).

These keyboard shortcuts enable quick data transfer from the grid to the clipboard, making it easy to paste data into other applications or documents.

To enable the clipboard feature, configure the grid component with your data source and selection property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='272px' [selectionSettings]='selectionOptions'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=130></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public selectionOptions?: SelectionSettingsModel;

    ngOnInit(): void {  
        this.data = data;
        this.selectionOptions = { type: 'Multiple'};
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Copy to clipboard by external buttons

Copying data to the clipboard using external buttons in the Syncfusion Angular Grid allows programmatic triggering of copy operations, making it more user-friendly, especially for users who may not be familiar with keyboard shortcuts.

To copy selected rows or cells data to the clipboard using external buttons, utilize the copy method available in the grid component. The copy method accepts an optional parameter withHeader (boolean) to include column headers in the copied data. This is demonstrated in the following example:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { SelectionSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        ButtonModule
    ],

standalone: true,
    selector: 'app-root',
    template: `
    <button ejs-button id='copy' cssClass="e-outline" (click)='copy()'>Copy</button>
    <button ejs-button id='copyHeader' cssClass="e-outline" (click)='copyHeader()' style="margin-left:10px">CopyHeader</button>
    <ejs-grid #grid style="padding: 5px 5px" id='grid' [dataSource]='data' height='280px' [selectionSettings]='selectionOptions'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public selectionOptions?: SelectionSettingsModel;
    @ViewChild('grid') public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.selectionOptions = { type: 'Multiple'};
    }

    copy() {
        (this.grid as GridComponent).copy();
    }

    copyHeader() {
        (this.grid as GridComponent).copy(true);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

AutoFill

The AutoFill feature in the Syncfusion Angular Grid allows copying data from selected cells and pasting it into adjacent cells by dragging the autofill icon. This feature provides a convenient way to quickly populate data across multiple cells in the grid.

How to use the AutoFill feature:

  1. Select the cells containing the data to copy.

  2. Hover over the bottom-right corner of the selection to display the autofill icon.

  3. Click and drag the autofill icon to the target cells where the data should be pasted.

  4. Release the mouse button to complete the autofill operation. The data from the source cells will be copied to the target cells.

Enable this feature by setting the enableAutoFill property to true.

The following example demonstrates how to enable the autofill feature in the grid:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { SelectionSettingsModel, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        FormsModule,
        FormsModule,
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='272px' [enableAutoFill]='true' [editSettings]='editSettings'
     [toolbar]='toolbar' [selectionSettings]='selectionOptions'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right'
                    isPrimaryKey='true' [visible]='false' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipCountry' headerText='Ship Name' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public selectionOptions?: SelectionSettingsModel;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];

    ngOnInit(): void {  
        this.data = data;
        this.selectionOptions = { type: 'Multiple', cellSelectionMode: 'Box', mode: 'Cell'};
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
        this.toolbar = ['Add', 'Update', 'Cancel'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
  • When enableAutoFill is set to true, the autofill icon displays on cell selection for copying cells.
  • AutoFill requires the selection mode to be Cell, cellSelectionMode to be Box, and editMode to be Batch.

Limitations

  • AutoFill does not automatically convert string values to number or date types. When selected cells contain string data and are dragged to number-type cells, the target cells will display NaN. Similarly, dragging string-type cells to date-type cells results in empty cells. Ensure data types are compatible before using autofill to avoid unexpected results.

  • The AutoFill feature does not support generating non-linear series or sequential data automatically. It cannot create complex series or patterns by dragging cells with non-sequential data. The autofill feature is designed for copying and pasting data from a selected range of cells.

  • AutoFill can only be applied to viewport cells when virtual scrolling, infinite scrolling, or column virtualization features are enabled in the grid.

Paste

The Syncfusion Angular Grid provides a paste feature that allows copying content from cells or groups of cells and pasting it into another set of cells. This feature enables quick data transfer within the grid, making it convenient for data entry and manipulation.

Follow these steps to use the paste feature in the grid:

  1. Select the cells containing the content to copy.

  2. Press Ctrl + C to copy the selected cells’ content to the clipboard.

  3. Select the target cells where the copied content should be pasted.

  4. Press Ctrl + V to paste the copied content into the target cells.

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { SelectionSettingsModel, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='272px' [editSettings]='editSettings' [toolbar]='toolbar'
               [selectionSettings]='selectionOptions'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right'
                     isPrimaryKey='true' visible='false' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipCountry' headerText='Ship Name' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public selectionOptions?: SelectionSettingsModel;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];

    ngOnInit(): void {
        this.data = data;
        this.selectionOptions = { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' };
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
        this.toolbar = ['Add', 'Update', 'Cancel'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To perform paste functionality, the selection mode must be Cell, cellSelectionMode must be Box, and Batch Editing must be enabled.

Limitations

  • The paste feature does not automatically convert string values to number or date types. When pasted cells contain string data and are applied to number-type cells, the target cells will display NaN. Similarly, pasting string-type data to date-type cells results in empty cells. Ensure data types are compatible before using the paste feature to avoid unexpected results.