Web Components Tree Grid Clipboard Overview

Copy to clipboard operations are now available in the IgcTreeGridComponent. This functionality provides a fast, easy and customizable way to copy data of the Web Components IgcTreeGridComponent through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the IgcTreeGridComponent into Excel or other external programs.

Web Components Tree Grid Clipboard Example

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesFlatDetailsItem {
    public constructor(init: Partial<EmployeesFlatDetailsItem>) {
        Object.assign(this, init);
    }

    public Address: string;
    public Age: number;
    public City: string;
    public Country: string;
    public Fax: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public ParentID: number;
    public Phone: string;
    public PostalCode: string;
    public Title: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor() {
        super();
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Obere Str. 57`,
            Age: 55,
            City: `Berlin`,
            Country: `Germany`,
            Fax: `030-0076545`,
            HireDate: `2008, 3, 20`,
            ID: 1,
            Name: `Johnathan Winchester`,
            ParentID: -1,
            Phone: `030-0074321`,
            PostalCode: `12209`,
            Title: `Development Manager`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Avda. de la Constitución 2222`,
            Age: 42,
            City: `México D.F.`,
            Country: `Mexico`,
            Fax: `(5) 555-3745`,
            HireDate: `2014, 1, 22`,
            ID: 4,
            Name: `Ana Sanders`,
            ParentID: -1,
            Phone: `(5) 555-4729`,
            PostalCode: `05021`,
            Title: `CEO`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Mataderos 2312`,
            Age: 49,
            City: `México D.F.`,
            Country: `Mexico`,
            Fax: `(5) 555-3995`,
            HireDate: `2014, 1, 22`,
            ID: 18,
            Name: `Victoria Lincoln`,
            ParentID: -1,
            Phone: `(5) 555-3932`,
            PostalCode: `05023`,
            Title: `Accounting Manager`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `120 Hanover Sq.`,
            Age: 61,
            City: `London`,
            Country: `UK`,
            Fax: `(171) 555-6750`,
            HireDate: `2010, 1, 1`,
            ID: 10,
            Name: `Yang Wang`,
            ParentID: -1,
            Phone: `(171) 555-7788`,
            PostalCode: `WA1 1DP`,
            Title: `Localization Manager`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Berguvsvägen 8`,
            Age: 43,
            City: `Luleå`,
            Country: `Sweden`,
            Fax: `0921-12 34 67`,
            HireDate: `2011, 6, 3`,
            ID: 3,
            Name: `Michael Burke`,
            ParentID: 1,
            Phone: `0921-12 34 65`,
            PostalCode: `S-958 22`,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Forsterstr. 57`,
            Age: 29,
            City: `Mannheim`,
            Country: `Germany`,
            Fax: `0621-08924`,
            HireDate: `2009, 6, 19`,
            ID: 2,
            Name: `Thomas Anderson`,
            ParentID: 1,
            Phone: `0621-08460`,
            PostalCode: `68306`,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `24, place Kléber`,
            Age: 31,
            City: `Strasbourg`,
            Country: `France`,
            Fax: `88.60.15.32`,
            HireDate: `2014, 8, 18`,
            ID: 11,
            Name: `Monica Reyes`,
            ParentID: 1,
            Phone: `88.60.15.31`,
            PostalCode: `67000`,
            Title: `Software Development Team Lead`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `C/ Araquil, 67`,
            Age: 35,
            City: `Madrid`,
            Country: `Spain`,
            Fax: `(91) 555 91 99`,
            HireDate: `2015, 9, 17`,
            ID: 6,
            Name: `Roland Mendel`,
            ParentID: 11,
            Phone: `(91) 555 22 82`,
            PostalCode: `28023`,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `12, rue des Bouchers`,
            Age: 44,
            City: `Marseille`,
            Country: `France`,
            Fax: `91.24.45.41`,
            HireDate: `2009, 10, 11`,
            ID: 12,
            Name: `Sven Cooper`,
            ParentID: 11,
            Phone: `91.24.45.40`,
            PostalCode: `13008`,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `23 Tsawassen Blvd.`,
            Age: 44,
            City: `Tsawassen`,
            Country: `Canada`,
            Fax: `(604) 555-3745`,
            HireDate: `2014, 4, 4`,
            ID: 14,
            Name: `Laurence Johnson`,
            ParentID: 4,
            Phone: `(604) 555-4729`,
            PostalCode: `T2F 8M4`,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Fauntleroy Circus`,
            Age: 25,
            City: `London`,
            Country: `UK`,
            Fax: `(5) 555-3798`,
            HireDate: `2017, 11, 9`,
            ID: 5,
            Name: `Elizabeth Richards`,
            ParentID: 4,
            Phone: `(171) 555-1212`,
            PostalCode: `EC2 5NT`,
            Title: `Vice President`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Cerrito 333`,
            Age: 39,
            City: `Buenos Aires`,
            Country: `Argentina`,
            Fax: `(1) 135-4892`,
            HireDate: `2010, 3, 22`,
            ID: 13,
            Name: `Trevor Ashworth`,
            ParentID: 5,
            Phone: `(1) 135-5555`,
            PostalCode: `1010`,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Sierras de Granada 9993`,
            Age: 44,
            City: `México D.F.`,
            Country: `Mexico`,
            Fax: `(5) 555-7293`,
            HireDate: `2014, 4, 4`,
            ID: 17,
            Name: `Antonio Moreno`,
            ParentID: 18,
            Phone: `(5) 555-3392`,
            PostalCode: `05022`,
            Title: `Senior Accountant`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Hauptstr. 29`,
            Age: 50,
            City: `Sao Paulo`,
            Country: `Brazil`,
            Fax: `(5) 555-6691`,
            HireDate: `2007, 11, 18`,
            ID: 7,
            Name: `Pedro Rodriguez`,
            ParentID: 10,
            Phone: `0452-076545`,
            PostalCode: `3012`,
            Title: `Senior Localization Developer`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Av. dos Lusíadas, 23`,
            Age: 27,
            City: `Bern`,
            Country: `Switzerland`,
            Fax: ``,
            HireDate: `2016, 2, 19`,
            ID: 8,
            Name: `Casey Harper`,
            ParentID: 10,
            Phone: `(11) 555-7647`,
            PostalCode: `05432-043`,
            Title: `Senior Localization`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Berkeley Gardens 12`,
            Age: 25,
            City: `London`,
            Country: `UK`,
            Fax: `(171) 555-9199`,
            HireDate: `2017, 11, 9`,
            ID: 15,
            Name: `Patricia Simpson`,
            ParentID: 7,
            Phone: `(171) 555-2282`,
            PostalCode: `WX1 6LT`,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Walserweg 21`,
            Age: 39,
            City: `Aachen`,
            Country: `Germany`,
            Fax: `0241-059428`,
            HireDate: `2010, 3, 22`,
            ID: 9,
            Name: `Francisco Chang`,
            ParentID: 7,
            Phone: `0241-039123`,
            PostalCode: `52066`,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `35 King George`,
            Age: 25,
            City: `London`,
            Country: `UK`,
            Fax: `(171) 555-3373`,
            HireDate: `2018, 3, 18`,
            ID: 16,
            Name: `Peter Lewis`,
            ParentID: 7,
            Phone: `(171) 555-0297`,
            PostalCode: `WX3 6FW`,
            Title: `Localization Intern`
        }));
    }
}
tsCOPY CODE

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents, IgcButtonComponent, IgcInputComponent, IgcSwitchComponent } from 'igniteui-webcomponents';

defineAllComponents();

export class Sample {

    private clipboardEnabledEditor: IgcPropertyEditorPropertyDescriptionComponent
    private clipboardHeadersEditor: IgcPropertyEditorPropertyDescriptionComponent
    private clipboardFormattersEditor: IgcPropertyEditorPropertyDescriptionComponent
    private treeGrid: IgcTreeGridComponent
    private defaultSeparator: string;

    constructor() {
        var clipboardEnabledEditor = this.clipboardEnabledEditor = document.getElementById('ClipboardEnabledEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var clipboardHeadersEditor = this.clipboardHeadersEditor = document.getElementById('ClipboardHeadersEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var clipboardFormattersEditor = this.clipboardFormattersEditor = document.getElementById('ClipboardFormattersEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webGridClearSelection = this.webGridClearSelection.bind(this);
        var grid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        this.webGridClipboardOperationsColumnInit = this.webGridClipboardOperationsColumnInit.bind(this);

        grid.data = this.employeesFlatDetails;
        grid.addEventListener("columnInit", this.webGridClipboardOperationsColumnInit);
        var copyBehaviorSwitch = document.getElementById("copy") as IgcSwitchComponent;
        copyBehaviorSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
            grid.clipboardOptions.enabled = ev.detail.checked;
        });

        var copyHeaderSwitch = document.getElementById("headerCopy") as IgcSwitchComponent;
        copyHeaderSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
            grid.clipboardOptions.copyHeaders = ev.detail.checked;
        });

        var formatterSwitch = document.getElementById("formatterCopy") as IgcSwitchComponent;
        formatterSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
            grid.clipboardOptions.copyFormatters = ev.detail.checked;
        });

        var selectionClearBtn = document.getElementById("selectionClear") as IgcButtonComponent;
        selectionClearBtn.addEventListener('click', (ev: any) => {
            grid.cellSelection = 'none';
            grid.cellSelection = 'multiple';
        });

        var input = document.getElementById("input") as IgcInputComponent;
        input.addEventListener("igcChange", (ev: CustomEvent) => {
            if (!this.defaultSeparator) {
                this.defaultSeparator = grid.clipboardOptions.separator;
            }
            grid.clipboardOptions.separator = ev.detail || this.defaultSeparator;
        });
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

    public webGridClearSelection(args: any): void {
        console.log("TODO" + args);
    	//TODO
    }

    public webGridClipboardOperationsColumnInit(args: any): void {
        let column = args.detail;
        column.formatter = (e: any) => { return "** " + e + " **" };
        column.header = "🎉" + column.field;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
  <div class="options horizontal" style="gap: 50px;">
    <igc-input id="input">
      <span slot="prefix">Change copy separator:</span>
      <span slot="helper-text">The default value is a single tabulation.</span>
    </igc-input>
    <igc-switch id="copy" label-position="before" checked>Grid copy behavior</igc-switch>
    <igc-switch id="headerCopy" label-position="before" checked>Copying of header labels</igc-switch>
    <igc-switch id="formatterCopy" label-position="before" checked>Copying column formatters</igc-switch>
    <igc-button id="selectionClear">Clear selection</igc-button>
  </div>

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="ID"
            data-type="number"
            sortable="true">
            </igc-column>
            <igc-column
            field="Name"
            data-type="string"
            sortable="true"
            disable-hiding="true">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            sortable="true"
            disable-hiding="true">
            </igc-column>
            <igc-column
            field="HireDate"
            data-type="date"
            sortable="true"
            hidden="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            sortable="true"
            hidden="true">
            </igc-column>
            <igc-column
            field="Address"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="City"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="Country"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="Fax"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            sortable="true">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssCOPY CODE

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Functionality

Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are:

• Windows/Unix based
  • Ctrl + C / Ctrl + Ins as a keyboard shortcut
  • Ctrl + V / Shift + Ins as a keyboard shortcut
  • Copy action through the browser menu
• macOS
  • ⌘ Cmd + C as a keyboard shortcut
  • ⌘ Cmd + V as a keyboard shortcut
  • Copy action through the browser menu

Limitations

• Both the cut and copy events are not natively supported in Internet Explorer. The exception is the paste event (IE 11) which is emitted but does not expose the ClipboardData property in the event.

In order to copy cells in IE 11, you can use the keyboard selection. Hold the shift key in order to make a multi-cell selection, press Ctrl + C in order to copy.

• The copy behavior is disabled while the grid is in edit mode.
• The current version of this feature covers only the copy from grid behavior. Later on we plan to expose paste within grid behavior.

API Usage

We expose clipboardOptions property, which handles the following options:

• Enabled Enables/disables copying of selected cells.
• CopyHeaders Include the associated headers when copying.
• CopyFormatters Apply any existing column formatters to the copied data.
• Separator The string separator to use the for formatting the data in the clipboard. Default is /t

Excel can automatically detect text that is separated by tabs (tab-delimited /t) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs.

• GridCopy Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the clipboardOptions.

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub