Angular Tree Grid 行編集

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

Angular Tree Grid 行編集の例

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

行編集の使用

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>

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
// 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' }
        ];
    }
}

配置

• オーバーレイのデフォルトの位置は編集モードで行の下にあります。

• 行の下にスペースがない場合、オーバーレイが行の上に表示されます。

• 一番上または下に表示されると、オーバーレイは閉じられるまでスクロール時にこの位置を保持します。

動作

• 行が編集モードの場合、編集が継続します。同じ行のセルがクリックされたかどうか。

• [完了] ボタンをクリックすると行編集を完了し、変更をデータソースまたはトランザクションへサブミットします。更に行が編集モードを完了します。

• [キャンセル] ボタンがをクリックすると現在の行のすべての変更を元に戻し、行編集モードを終了します。

• 行が編集モードにある場合、他の行のセルをクリックすると現在の行編集を終了し、行の新規の変更をサブミット ([完了] ボタンをクリックした場合と同じ) します。フォーカスのある新しいセルが編集可能かどうか、新しい行が編集モードに入るかどうか、セルが編集できない場合は前の行のみ編集モードを終了します。

• 行が編集モードの時にグリッドがスクロールされると行が表示領域外になりますが、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 を使用することができます。

$banner-theme: banner-theme(
  $banner-background: #e3e3e3,
  $banner-message-color: color($purple-palette, "secondary", 600)
);

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

テーマを含む

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

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

コンポーネント スタイル

行編集オーバーレイは他の多くのコンポーネントのテーマを利用するため、グローバル スタイルでスタイル設定するとアプリケーションの他の部分 (バナー、ボタンなど) に影響を与える可能性があります。それを防ぐ最善の方法は、バナー テーマを適用する特定のコンポーネントのスタイル ファイルにスコープすることです。

// custom.component.scss

:host {
  ::ng-deep {
    @include tokens($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>

カスタム ボタンを定義した後は、flat-icon-button-theme を使用してスタイルを設定できます。You can learn more about igx-icon-button styling in the Icon Button Styling documentation.[完了] と [キャンセル] のカスタム テーマを作成できます。

// custom.component.scss
...

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

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

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

デモ

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

既知の問題と制限

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

API リファレンス

• rowEditable
• onRowEditEnter
• onRowEdit
• rowEditDone
• onRowEditCancel
• endEdit
• field
• editable
• primaryKey
• TreeGrid

その他のリソース

• igxGrid を使用して CRUD 操作の構築
• Tree Grid 概要
• Tree Grid 編集
• Tree Grid トランザクション

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)