Clipboard in Angular TreeGrid component

4 Sep 202519 minutes to read

The clipboard feature in the Syncfusion Angular TreeGrid provides options to copy and paste selected rows or cell data.

The following keyboard shortcuts are supported in the TreeGrid for clipboard operations:

Interaction Keys	Description
Ctrl + C	Copies selected rows or cell data to the clipboard.
Ctrl + Shift + H	Copies selected rows or cell data with headers to the clipboard.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



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

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' [allowSelection]='true' [allowPaging]='true' height='260' [selectionSettings]='selectionOptions' [pageSettings]='pageSettings' childMapping='subtasks' [treeColumnIndex]='1'>
        <e-columns>
            <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='taskName' headerText='Task Name' width='200'></e-column>
            <e-column field='startDate' headerText='Start Date' width='100' format="yMd" textAlign='Right'></e-column>
            <e-column field='duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='progress' headerText='Progress' width='90' textAlign='Right'></e-column>
        </e-columns>
    </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public selectionOptions?: SelectionSettingsModel;
    public pageSettings?: Object ;

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

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Copy to clipboard using external buttons

To copy selected rows or cell data to the clipboard with an external button, use the copy method.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { sampleData } from './datasource';
import { TreeGridComponent, SelectionSettingsModel  } from '@syncfusion/ej2-angular-treegrid';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService],
standalone: true,
    selector: 'app-container',
    template:
    `<button ej-button id='copy' (click)='copy()'>Copy</button>
     <button ej-button id='copyHeader' (click)='copyHeader()'>CopyHeader</button>
        <ejs-treegrid #treegrid [dataSource]='data' [allowSelection]='true' [allowPaging]='true' height='230' [selectionSettings]='selectionOptions' [pageSettings]='pageSettings' childMapping='subtasks' [treeColumnIndex]='1'>
        <e-columns>
            <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='taskName' headerText='Task Name' width='200'></e-column>
            <e-column field='startDate' headerText='Start Date' width='100' format="yMd" textAlign='Right'></e-column>
            <e-column field='duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='progress' headerText='Progress' width='90' textAlign='Right'></e-column>
        </e-columns>
    </ejs-treegrid>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public selectionOptions?: SelectionSettingsModel;
    public pageSettings?: Object ;
    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;

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

    copy() {
        (this.treeGridObj as TreeGridComponent).copy();
    }

    copyHeader() {
        (this.treeGridObj as TreeGridComponent).copy(true);
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Copy hierarchy modes

The TreeGrid supports several copy hierarchy modes, configurable via the copyHierarchyMode property:

• Parent (default): Copies selected records along with their parent records. If no parent exists, only the selected record is copied.
• Child: Copies selected records with their child records. If no child exists, only the selected record is copied.
• Both: Copies selected records with both parent and child records. If neither exists, only the selected record is copied.
• None: Copies only the selected records.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { sampleData } from './datasource';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { SelectionSettingsModel, TreeGridComponent  } from '@syncfusion/ej2-angular-treegrid';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService],
standalone: true,
    selector: 'app-container',
    template:
    `<div style="padding-top: 7px; float:left">Hierarchy Mode</div><div style="padding-left: 10px; display: inline-block"><ejs-dropdownlist (change)='onChange($event)' [dataSource]='dropData' value='Parent' [fields]='fields'></ejs-dropdownlist></div>
        <ejs-treegrid #treegrid [dataSource]='data' [allowSelection]='true' [allowPaging]='true' height='230' copyHierarchyMode='Parent' [selectionSettings]='selectionOptions' [pageSettings]='pageSettings' childMapping='subtasks' [treeColumnIndex]='1'>
        <e-columns>
            <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='taskName' headerText='Task Name' width='200'></e-column>
            <e-column field='startDate' headerText='Start Date' width='100' format="yMd" textAlign='Right'></e-column>
            <e-column field='duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='progress' headerText='Progress' width='90' textAlign='Right'></e-column>
        </e-columns>
    </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public dropData?: Object[];
    public fields?: Object;
    public selectionOptions?: SelectionSettingsModel;
    public pageSettings?: Object ;
    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
         this.dropData = [
        { id: 'Parent', mode: 'Parent' },
        { id: 'Child', mode: 'Child' },
        { id: 'Both', mode: 'Both' },
        { id: 'None', mode: 'None' },
    ];
    this.fields = { text: 'mode', value: 'id' };
    this.selectionOptions = { type: 'Multiple'};
    this.pageSettings = {pageSize: 10};
    }

    onChange(e: ChangeEventArgs): any {
        let mode: any = <string>e.value;
        (this.treeGridObj as TreeGridComponent).copyHierarchyMode = mode;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Limitation: Only the current view records are available in the clipboard during copy operations.

AutoFill

The AutoFill feature allows copying and pasting data to adjacent cells by dragging the autofill icon from the edge of a selected cell group. Enable this feature by setting the enableAutoFill property to true.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService,EditService,ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



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

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule,
    ],

providers: [PageService,
                SortService,
                FilterService,
                EditService,
                ToolbarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' [enableAutoFill]='true'  [enableHover]='false' [allowPaging]='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [allowSelection]='true' [toolbar]='toolbar' [selectionSettings]='selectionOptions' height='220' childMapping='subtasks' [treeColumnIndex]='1'>
                <e-columns>
                    <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
                    <e-column field='taskName' headerText='Task Name' width='200'></e-column>
                    <e-column field='startDate' headerText='Start Date' width='100' format="yMd" textAlign='Right'></e-column>
                    <e-column field='duration' headerText='Duration' width='90' textAlign='Right'></e-column>
                    <e-column field='progress' headerText='Progress' width='90' textAlign='Right'></e-column>
                </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

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

    ngOnInit(): void {
        this.data = sampleData;
        this.selectionOptions = { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' };
        this.editSettings= { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
        this.toolbar = ['Add', 'Update', 'Cancel'];
        this.pageSettings = {pageSize: 10};
    }
}

main.ts

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, an autofill icon appears on cell selection.
• Requires the selection mode to be Cell, cellSelectionMode set to Box, and batch editing enabled.

AutoFill limitations:

• String values are not parsed to number or date types. Dragging string cells to number fields results in NaN; to date fields, an empty cell is shown.
• Linear series and sequential data generation are not supported with autofill.

Paste

Content copied from TreeGrid cells can be pasted into other cells using Ctrl + V. Programmatic paste operations can be performed using the paste method, passing data, row index, and column index parameters.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService,EditService,ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



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

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule,
    ],

providers: [PageService,
                SortService,
                FilterService,
                EditService,
                ToolbarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='220' [enableHover]='false' [allowPaging]='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' [allowSelection]='true' [selectionSettings]='selectionOptions' childMapping='subtasks' [treeColumnIndex]='1'>
                <e-columns>
                    <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
                    <e-column field='taskName' headerText='Task Name' width='200'></e-column>
                    <e-column field='startDate' headerText='Start Date' width='100' format="yMd" textAlign='Right'></e-column>
                    <e-column field='duration' headerText='Duration' width='90' textAlign='Right'></e-column>
                    <e-column field='progress' headerText='Progress' width='90' textAlign='Right'></e-column>
                </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public selectionOptions?: SelectionSettingsModel;
    public editSettings?: EditSettingsModel;
    public pageSettings?: PageSettingsModel;
    public toolbar?: ToolbarItems[];

    ngOnInit(): void {
        this.data = sampleData;
        this.selectionOptions = { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' };
        this.editSettings= { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
        this.toolbar = ['Add', 'Update', 'Cancel'];
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

• For paste functionality, the selection mode must be Cell, cellSelectionMode must be Box, and batch editing should be enabled.

Paste limitations:

• String values are not parsed to number or date types. Pasting string data into number cells displays NaN; into date cells results in an empty cell.

---

For more details, visit the Angular TreeGrid feature tour or explore the Angular TreeGrid example for usage scenarios and data manipulation demonstrations.