Web Components Tree Grid 編集

Web Components Tree Grid の Ignite UI for Web Components セル編集機能を使用すると、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。IgcTreeGridComponent は、これらの操作をカスタマイズできる強力なパブリック API を提供します。データ操作のフェーズは次のとおりです。

• セル編集
• 行編集
• 一括編集 (追加予定)

設定

有効にする編集モードを指定するために、IgcTreeGridComponent は editable および RowEditable ブール値プロパティを公開します。

以下のオプションは、プロパティ editable で指定できます。

• false - 対応する列の編集が無効になります 。これがデフォルト値です。
• true - 対応する列の編集が有効になります。

列が編集できない場合でも、IgcTreeGridComponent によって公開されるパブリック API を介して値を変更できます。

以下のオプションは、プロパティ RowEditable で指定できます。

• false - 対応するグリッドの行編集は無効になります。これがデフォルト値です。
• true - 対応するグリッドで行編集が有効になります。

IgcTreeGridComponent で RowEditable プロパティを true に設定し、editable プロパティがどの列にも明示的に定義されていない場合、編集は主キー以外のすべての列で有効になります。

• セルおよび一括編集 - このシナリオでは、各セルの変更は個別に保持され、元に戻す/やり直し操作はセル レベルで使用できます。
• 行および一括編集 - このシナリオでは、変更は行レベルで保持されるため、元に戻す/やり直し操作は変更された各セルではなく、各行のセル全体に対して動作します。

テンプレートの編集

データ型固有の編集テンプレートを使用する場合、列 dataType プロパティを指定する必要があります。次に各型のデフォルト テンプレートについて説明します。

• string データ型の場合、デフォルトのテンプレートは IgcInputComponent を使用します。
• number データ型のデフォルト テンプレートは IgcInputComponent type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。
• date データ型ではデフォルトのテンプレートは IgcDatePickerComponent を使用します。
• dateTime データ型ではデフォルトのテンプレートは DateTimeEditor を使用します。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。
• time データ型ではデフォルトのテンプレートは TimePicker を使用します。
• boolean データ型ではデフォルトのテンプレートは IgcCheckboxComponent を使用します。
• currency データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の InputGroup を使用します。
• percent パーセントデータ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ InputGroup を使用します。

すべての利用可能な列データ型は、公式の列タイプトピックにあります。

イベントの引数とシーケンス

グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、行の編集およびセルの編集のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。

イベント	説明	引数	キャンセル可能
RowEditEnter	RowEditing が有効な場合、行が編集モードに入るときに発生します。	IgcGridEditEventArgs	true
CellEditEnter	セルが編集モードに入るときに発生します。 (RowEditEnter の後)	IgcGridEditEventArgs	true
CellEdit	値が変更された場合、セルの値がコミットされた前に発生します。 (Enter の押下など)	IgcGridEditEventArgs	true
CellEditDone	値が変更された場合、セルが編集され、セルの値がコミットされた後に発生します。	IgcGridEditDoneEventArgs	false
CellEditExit	セルが編集モードを終了したときに発生します。	IgcGridEditDoneEventArgs	false
RowEdit	が有効な場合、編集モードの値の行がコミットされた前に発生します (行編集オーバーレイの [完了] ボタンをクリックなど)。	IgcGridEditEventArgs	true
RowEditDone	が有効な場合、行が編集され、新しい行の値がコミットされた後に発生します。	IgcGridEditDoneEventArgs	false
RowEditExit	が有効な場合、行が編集モードを終了したときに発生します。	IgcGridEditDoneEventArgs	false

イベントのキャンセル

• RowEditEnter - Row も Cell も編集モードに入りません。
• CellEditEnter - セル編集に入ることを防止します。RowEditable が有効な場合、セルの編集は禁止されたままですが、行の編集がトリガーされます。
• CellEdit - Cell/Row の編集を許可し、[完了] ボタンまたは [Enter] を押しても値または行のトランザクションはコミットされません。[キャンセル] ボタンをクリックするまで、セル編集と行編集は閉じません。
• RowEdit - 行全体ではなくセルのコミットは可能です。行は編集モードのままになり、行トランザクションは開いていると見なされます。[完了] を押しても、行をコミットまたは閉じません。[キャンセル] ボタンは、変更をコミットせずに編集プロセスとトランザクションを閉じます。

以下のサンプルは、実行中の編集実行シーケンスを示しています。

EXAMPLE

DATA

TS

HTML

CSS

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

    public Age: number;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Phone: string;
    public OnPTO: boolean;
    public ParentID: number;
    public Title: string;

}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
    public constructor(items: Array<EmployeesFlatDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDataItem(
                {
                    Age: 55,
                    HireDate: `2008-03-20`,
                    ID: 1,
                    Name: `Johnathan Winchester`,
                    Phone: `0251-031259`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Development Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 42,
                    HireDate: `2014-01-22`,
                    ID: 4,
                    Name: `Ana Sanders`,
                    Phone: `(21) 555-0091`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `CEO`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 49,
                    HireDate: `2014-01-22`,
                    ID: 18,
                    Name: `Victoria Lincoln`,
                    Phone: `(071) 23 67 22 20`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `Accounting Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 61,
                    HireDate: `2010-01-01`,
                    ID: 10,
                    Name: `Yang Wang`,
                    Phone: `(21) 555-0091`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Localization Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 43,
                    HireDate: `2011-06-03`,
                    ID: 3,
                    Name: `Michael Burke`,
                    Phone: `0452-076545`,
                    OnPTO: true,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 29,
                    HireDate: `2009-06-19`,
                    ID: 2,
                    Name: `Thomas Anderson`,
                    Phone: `(14) 555-8122`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 31,
                    HireDate: `2014-08-18`,
                    ID: 11,
                    Name: `Monica Reyes`,
                    Phone: `7675-3425`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Software Development Team Lead`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 35,
                    HireDate: `2015-09-17`,
                    ID: 6,
                    Name: `Roland Mendel`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2009-10-11`,
                    ID: 12,
                    Name: `Sven Cooper`,
                    Phone: `0695-34 67 21`,
                    OnPTO: true,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 14,
                    Name: `Laurence Johnson`,
                    Phone: `981-443655`,
                    OnPTO: false,
                    ParentID: 4,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 5,
                    Name: `Elizabeth Richards`,
                    Phone: `(2) 283-2951`,
                    OnPTO: true,
                    ParentID: 4,
                    Title: `Vice President`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 13,
                    Name: `Trevor Ashworth`,
                    Phone: `981-443655`,
                    OnPTO: true,
                    ParentID: 5,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 17,
                    Name: `Antonio Moreno`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 18,
                    Title: `Senior Accountant`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 50,
                    HireDate: `2007-11-18`,
                    ID: 7,
                    Name: `Pedro Rodriguez`,
                    Phone: `035-640230`,
                    OnPTO: false,
                    ParentID: 10,
                    Title: `Senior Localization Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 27,
                    HireDate: `2016-02-19`,
                    ID: 8,
                    Name: `Casey Harper`,
                    Phone: `0342-023176`,
                    OnPTO: true,
                    ParentID: 10,
                    Title: `Senior Localization`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 15,
                    Name: `Patricia Simpson`,
                    Phone: `069-0245984`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 9,
                    Name: `Francisco Chang`,
                    Phone: `(91) 745 6200`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2018-03-18`,
                    ID: 16,
                    Name: `Peter Lewis`,
                    Phone: `069-0245984`,
                    OnPTO: true,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import { IgcRowSelectionEventArgs, IgcGridComponent, IgcGridEditEventArgs, IgcGridEditDoneEventArgs } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
        this.webTreeGridRendered = this.webTreeGridRendered.bind(this);
        this.webGridRowEditEnter = this.webGridRowEditEnter.bind(this);
        this.webGridRowEdit = this.webGridRowEdit.bind(this);
        this.webGridRowEditDone = this.webGridRowEditDone.bind(this);
        this.webGridRowEditExit = this.webGridRowEditExit.bind(this);
        this.webGridCellEditEnter = this.webGridCellEditEnter.bind(this);
        this.webGridCellEdit = this.webGridCellEdit.bind(this);
        this.webGridCellEditDone = this.webGridCellEditDone.bind(this);
        this.webGridCellEditExit = this.webGridCellEditExit.bind(this);

        this._bind = () => {
            grid.data = this.employeesFlatData;
            grid.addEventListener("rendered", this.webTreeGridRendered);
            grid.addEventListener("rowEditEnter", this.webGridRowEditEnter);
            grid.addEventListener("rowEdit", this.webGridRowEdit);
            grid.addEventListener("rowEditDone", this.webGridRowEditDone);
            grid.addEventListener("rowEditExit", this.webGridRowEditExit);
            grid.addEventListener("cellEditEnter", this.webGridCellEditEnter);
            grid.addEventListener("cellEdit", this.webGridCellEdit);
            grid.addEventListener("cellEditDone", this.webGridCellEditDone);
            grid.addEventListener("cellEditExit", this.webGridCellEditExit);
        }
        this._bind();
    }

    private _employeesFlatData: EmployeesFlatData = null;
    public get employeesFlatData(): EmployeesFlatData {
        if (this._employeesFlatData == null)
        {
            this._employeesFlatData = new EmployeesFlatData();
        }
        return this._employeesFlatData;
    }

    public webTreeGridRendered(args:any): void {
        const grid = document.getElementById("grid");
        grid.parentElement.style.display = "flex";
        const container = document.createElement("div");
        container.id = "container";
        container.style.height = "100vh";
        container.style.width = "100%";
        container.style.overflow = "auto";
        grid.parentElement.appendChild(container);
        const title = document.createElement("span");
        title.textContent = "Events execution sequence";
        container.appendChild(title);
    }

    public webGridRowEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `=> 'rowEditEnter' with 'RowID':` + args.detail.rowID;
        container.appendChild(message);
    }

    public webGridRowEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `=> 'rowEdit'`;
        container.appendChild(message);
    }

    public webGridRowEditDone(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `=> 'rowEditDone'`;
        container.appendChild(message);
    }

    public webGridRowEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `=> 'rowEditExit'  << End of cycle >>`;
        container.appendChild(message);
    }

    public webGridCellEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `=> 'cellEditEnter' with 'value':` + args.detail.oldValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webGridCellEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `=> 'cellEdit' with 'newValue':` + args.detail.newValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webGridCellEditDone(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `=> 'cellEditDone'`;
        container.appendChild(message);
    }

    public webGridCellEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `=> 'cellEditExit'`;
        container.appendChild(message);
    }

}

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 ig-typography">

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid"
        row-editable="true"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="Name"
            data-type="string"
            editable="true">
            </igc-column>
            <igc-column
            field="Title"
            header="Job Title"
            data-type="string"
            editable="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            editable="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コピー

Edit in: Codesandbox

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

機能の統合

セル/行が編集モードの場合、ユーザーはさまざまな方法でグリッドを操作できます。以下のテーブルは、特定の操作が現在の編集にどのように影響するかを示しています。

Tree Grid	フィルタリング	ソート	ページング	移動	ピン固定	非表示	グループ化	サイズ変更	Escape	Enter	F2	Tab	セル クリック	新しい行の追加/削除/編集
編集モードを保持								✔
編集モードを終了	✔	✔	✔	✔	✔	✔	✔		✔	✔	✔	✔	✔	✔
コミット										✔	✔	✔	✔	✔
破棄	✔	✔	✔	✔	✔	✔	✔		✔

テーブルからわかるように、列のサイズ変更を除くすべての操作は編集を終了し、新しい値を破棄します。新しい値がコミットされる場合、対応する機能の 「-ing」 イベントで開発者が実行できます。

たとえば、ユーザーがセル/行が編集モードのときに列をソートしようとする場合に、新しい値をコミットする方法を示します:

<igc-tree-grid id="grid" primary-key="ProductID" >
</igc-tree-grid>
html

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.addEventListener("sorting", this.onSorting);
}

public onSorting(event: IgcSortingEventArgs) {
    var grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.endEdit(true);
}
typescript

API リファレンス

• IgcTreeGridComponent

その他のリソース

• 列のデータ型
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列のピン固定
• 列のサイズ変更
• 選択