Angular Tree Grid 行編集

Tree Grid コンポーネントは、Angular CRUD 操作のためのデータ操作と強力な API を提供します。行をクリックして Enter キーを押すか、変更する行をダブルクリックします。

Angular Tree Grid 行編集の例

以下の手順では、Tree Grid で行編集を有効にする方法を示します。セル値を変更してから同じ行の他のセルをクリックまたはナビゲーションした場合も [完了] ボタンを使用して確定するまで行値を更新しません。または [キャンセル] ボタンを使用して破棄します。

Note

行が編集モードにある場合、他の行のセルをクリックすると [完了] ボタンが押されたように動作し、前の行の変更をすべての変更をサブミットします。フォーカスのある新しいセルが編集可能かどうか、新しい行が編集モードに入るかどうか、セルが編集できない場合は前の行のみ編集モードを終了します。

行編集の使用

IgxTreeGridModule を app.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxTreeGridModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxTreeGridModule],
    ...
})
export class AppModule {}

次に Tree Grid をバインドしたデータソースで定義し、rowEditable を true に設定してバインドします。

<igx-tree-grid [data]="data" [primaryKey]="EmployeID" [foreignKey]="PID"
               [rowEditable]="true" [rowSelection]="'multiple'" [moving]="true">
    <igx-column *ngFor="let c of columns"
        [editable] ="c.editable"
        [field]="c.field"
        [dataType]="c.dataType"
        [header]="c.label"
        [resizable]="c.resizable"
        [sortable]="c.sortable"
        [filterable]="c.filterable">
    </igx-column>
</igx-tree-grid>

Note

プライマリキーは行編集操作で必須です。

Note

各列の編集を有効にする必要はありません。Tree Grid で rowEditable プロパティを使用するとプライマリ行以外 field プロパティを定義したすべての行が編集可能になります。特定の列の編集を無効にする場合、editable 列の入力を false に設定します。

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent } from 'igniteui-angular';
// import { IgxTreeGridComponent } from '@infragistics/igniteui-angular'; for licensed package
import { FLAT_DATA } from './data';

@Component({
   providers: [],
    selector: 'app-tree-grid-row-editing-sample',
    styleUrls: ['tree-grid-row-editing-sample.component.scss'],
    templateUrl: 'tree-grid-row-editing-sample.component.html'
})
export class TreeGridRowEditSampleComponent implements OnInit {

    public data: any[];
    public columns: any[];

    @ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent;
    public ngOnInit(): void {
        this.data = FLAT_DATA;

        this.columns = [
            { field: 'FirstName', label: 'First Name', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' },
            { field: 'LastName', label: 'Last Name', resizable: false, sortable: false, filterable: false, editable: true, dataType: 'string' },
            { field: 'Title', label: 'Title', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' },
            { field: 'HireDate', label: 'Hire Date', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'date' }
        ];
    }
}

Note

Tree Grid は、保留中のセル変更を保持するプロバイダー IgxBaseTransactionService を行ステートをサブミットまたはキャンセルするまで内部使用します。

配置

オーバーレイのデフォルトの位置は編集モードで行の下にあります。
行の下にスペースがない場合、オーバーレイが行の上に表示されます。
一番上または下に表示されると、オーバーレイは閉じられるまでスクロール時にこの位置を保持します。

動作

行が編集モードの場合、編集が継続します。同じ行のセルがクリックされたかどうか。
[完了] ボタンをクリックすると行編集を完了し、変更をデータソースまたはトランザクションへサブミットします。更に行が編集モードを完了します。
[キャンセル] ボタンがをクリックすると現在の行のすべての変更を元に戻し、行編集モードを終了します。
行が編集モードにある場合、他の行のセルをクリックすると現在の行編集を終了し、行の新規の変更をサブミット ([完了] ボタンをクリックした場合と同じ) します。フォーカスのある新しいセルが編集可能かどうか、新しい行が編集モードに入るかどうか、セルが編集できない場合は前の行のみ編集モードを終了します。
行が編集モードの時にグリッドがスクロールされると行が表示領域外になりますが、Tree Grid は編集モードのままです。Tree Grid をスクロールすると編集行は再度表示されますが編集行が編集モードのままになります。Tree Grid 以外をクリックしたときにセルも編集モードに残ります。
ソート、フィルタリング、検索、および非表示操作を実行すると、現在の行のすべての変更が元に戻され、行の編集モードを終了します。
ページング、サイズ変更、ピン固定、移動操作を実行すると、編集モードを終了して最新の値を送信します。
編集した各セルは行編集が終了するまで変更スタイルを取得します。Tree Grid がトランザクションで提供されない場合の動作です。トランザクションが有効な場合、すべての変更がコミットされるまでセル編集スタイルが適用されます。

キーボードナビゲーション

Enter と F2 で行編集モードに入ります。
Esc で行編集モードを終了し、行の編集モード時に変更されたいずれのセルの変更もサブミットしません。
Tab で行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンからのナビゲーションは現在の編集行内で編集可能なセルへ移動します。

機能の統合

すべてのデータ変更操作は行変更操作を終了し、現在の行の変更をサブミットします。ソート、グループの変更、フィルタリング条件、ページングなどが含まれます。
行編集が終了した後に集計が更新されます。同様にソートやフィルタリングなどの他の機能が有効になります。

行編集オーバーレイのカスタマイズ

テキストのカスタマイズ

igxRowEditTextDirective を使用した行編集オーバーレイのテキストのカスタマイズが可能です。 rowChangesCount プロパティが公開されて変更されたセルのカウントを保持します。

<ng-template igxRowEditText let-rowChangesCount>
	Changes: {{rowChangesCount}}
</ng-template>

ボタンのカスタマイズ

igxRowEditActionsDirective を使用して行編集オーバーレイのボタンのカスタマイズが可能です。キーボードナビゲーションにボタンを含める場合、各ボタンに igxRowEditTabStopDirective が必要です。

<ng-template igxRowEditActions let-endRowEdit>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>

スタイル設定

Ignite UI for Angular テーマライブラリを使用して、行編集オーバーレイを大幅に変更できます。行編集オーバーレイは複合要素です。UI は、他の 2 つのコンポーネントで構成されています。 - コンテンツをレンダリングするための igx-banner - igx-button はデフォルトのテンプレートでレンダリングされます ([完了] ボタンと [キャンセル] ボタンの場合)。

以下の例では、これら 2 つのコンポーネントのスタイル設定オプション (ボタンスタイル & バナースタイル) を使用して、IgxTreeGrid の行編集のエクスペリエンスをカスタマイズします。次に、現在のセルのエディターと背景をより明確にするためにスタイルを設定します。セルスタイリングの詳細については、こちらをご覧ください。

テーマのインポート

行編集バナーのスタイルを設定する最も簡単な方法は、アプリのグローバルスタイルファイル (通常 styles.scss) でスタイルを定義することです。はじめに themes/index ファイルをインポートすることにより、Ignite UI for Angular Sass フレームワークの強力なツールへアクセスできるようになります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

テーマファイルをインポートしたら、カスタムテーマを作成できます。

テーマの定義

行編集の背景にカスタムの banner テーマを定義して、定義済みのパレットの 1 つである $purple-palette を使用することができます。

    $my-light-gray: #e3e3e3;
    $my-banner-palette: $purple-palette;

    $banner-theme: banner-theme( 
        $banner-background: $my-light-gray,
        $banner-message-color: color($my-banner-palette, "secondary", 600)
    );

ここでは、色を生成するために my-banner-palette を igx-color (テーマライブラリによって公開) と共に使用しています。

テーマを含む

次に Sass @include ステートメントを使用してテーマを適用します。新しく定義された $banner-theme を igx-banner mixin で渡します。

@include banner($banner-theme);

これにより、カスタムバナーテーマが行編集オーバーレイに適用されます。ただし、グローバルスタイルファイルで定義したため、これらのスタイルはアプリケーションのすべてのバナーにも適用されます。

コンポーネントスタイル

行編集オーバーレイは他の多くのコンポーネントのテーマを利用するため、グローバルスタイルでスタイル設定するとアプリケーションの他の部分 (バナー、ボタンなど) に影響を与える可能性があります。回避策としては、バナーテーマのスコープがあります。igx-tree-grid を含むコンポーネントでスタイル (theme/indexインポートを含む) を定義できます。

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、::ng-deep を使用してこのカプセル化を解除する必要があります。ステートメントがコンポーネントの外にある要素に影響を与えないよう、ステートメントを :host セレクター内にラップします。

// custom.component.scss

:host {
    ::ng-deep {
        @include banner($banner-theme);
    }
}

上記の構文で、カスタムバナーテーマはグリッドの行編集オーバーレイに適切に適用されます。

カスタムテンプレート

行編集オーバーレイをさらにカスタマイズするには、[完了] ボタンと [キャンセル] ボタンを別々にスタイル設定できるようにカスタムテンプレートを渡します。

<!-- in component.html -->
<igx-tree-grid>
    <ng-template igxRowEditActions let-endRowEdit>
        <div class="custom-buttons">
            <button igxIconButton="flat" class="custom-button" igxRowEditTabStop (click)="endRowEdit(false)">
                <igx-icon>clear</igx-icon>
            </button>
            <button igxIconButton="flat" class="custom-button" igxRowEditTabStop (click)="endRowEdit(true)">
                <igx-icon>check</igx-icon>
            </button>
        </div>
    </ng-template>
</igx-tree-grid>

カスタムボタンを定義した後は、button-theme を使用してスタイルを設定できます。こちらで igx-button のスタイリングについてさらに学ぶことができます。完了とキャンセルのカスタムテーマを作成できます。

// custom.component.scss
...

$button-theme: button-theme(
  $palette: $purple-palette
);

...
.custom-buttons {
    @include button($button-theme);
  }

@include ステートメントを .custom-buttons でスコープ設定して、[完了] ボタンと[キャンセル] ボタンにのみ適用されるようにします。

デモ

バナーとボタンのスタイルを設定後、編集モードのセルのカスタムスタイルも定義します。以下は、すべてのスタイルを組み合わせた結果です。

Note

このサンプルは、「テーマの変更」から選択したグローバルテーマに影響を受けません。

既知の問題と制限

グリッドに primaryKey が設定されておらず、リモートデータシナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモートサーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
- Row Selection
- Row Expand/collapse
- Row Editing
- Row Pinning

API リファレンス

その他のリソース

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

Angular Tree Grid 行編集