Web Components Tree Grid クリップボードの概要

クリップボードへのコピー操作が IgcTreeGridComponent で可能になりました。この機能は、現在の複数セルデータ選択を通して Web Components IgcTreeGridComponent のデータをすばやくコピーするための簡単でカスタマイズ可能な方法を提供します。システムクリップボードの動作により、ユーザーは IgcTreeGridComponent から Excel または他の外部プログラムにデータをコピーできます。

Web Components Tree Grid クリップボードの例

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`
        }));
    }
}
ts

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();
ts

<!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>html

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

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

機能

コピー動作は、ブラウザーとオペレーティングシステムで定義されているデフォルトのインタラクションで動作します。以下は、コピー＆ペースト動作の場合です。

Windows または Unix
- キーボードショートカット: Ctrl + C / Ctrl + Ins
- キーボードショートカット: Ctrl + V / Shift + Ins
- ブラウザーメニューからのコピー操作
macOS
- キーボードショートカット: ⌘ Cmd + C
- キーボードショートカット: ⌘ Cmd + V
- ブラウザーメニューからのコピー操作

制限

カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。paste イベント (IE 11) は発生されますが、イベントの ClipboardData プロパティを公開しません。

IE 11のセルをコピーするためには、キーボード選択を使用できます。複数セルを選択するには Shift キーを押しながらコピーするには Ctrl + C を押します。

グリッドが編集モードの間、コピー動作は無効になります。
この機能の現在のバージョンは、グリッドからのコピー動作のみをカバーします。今後、グリッドの動作内で貼り付けを公開する予定です。

API の使用

次のオプションを処理する IgcClipboardOptions プロパティを公開します。

enabled は選択したセルのコピーを有効または無効にします。
copyHeaders は、コピー時に関連付けられているヘッダーを含めます。
copyFormatters は、既存の列フォーマッタをコピーしたデータに適用します。
separator は、クリップボードのデータのフォーマットに使用する文字列の区切り文字。デフォルトは /t です。

Excel は、タブで区切られたテキスト (タブ区切り /t) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。

GridCopy は、コピー操作が実行されたときに発生します。IgcClipboardOptions を使用してコピー動作が有効になっている場合のみ発生します。

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。