HelpBot Assistant

How can I help you?

Clipboard in Angular Grid Component

19 Mar 202615 minutes to read

The clipboard feature in the Syncfusion® Angular Grid enables copying selected rows or cells to the system clipboard for use in other applications. The grid supports keyboard shortcuts for quick copy operations.

Interaction keys Description
Ctrl + C Copy selected rows or cells to the clipboard.
Ctrl + Shift + H Copy selected rows or cells with header to the clipboard.

Examples below show grid configuration for clipboard operations. Configure the grid’s dataSource and selectionSettings properties.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, 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 enables programmatic triggering of copy operations, enhancing usability, particularly for those unfamiliar 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 { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, SelectionSettingsModel } 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 copies values from a selected cell range into target cells by dragging the AutoFill handle. This provides a fast method for populating repetitive or sequential data.

AutoFill to copy data:

  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 to enable the autofill feature in the grid:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { EditService, EditSettingsModel, GridModule, PageService, SelectionSettingsModel, SortService, ToolbarItems, ToolbarService } 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 supports pasting clipboard content into selected cells for quick data entry and updates. Standard shortcuts allow copying and pasting between ranges within the grid or between the grid and external applications.

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 { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, PageService, SelectionSettingsModel, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@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));

Paste requires selection mode to be Cell, cellSelectionMode to be Box, and Batch editing to be enabled.

Limitations

Paste does not convert strings to number or date types; incompatible types can yield NaN or empty cells.