Angular Tree Grid のセル編集

Ignite UI for Angular Tree Grid コンポーネントは、Angular CRUD 操作のための優れたデータ操作機能と強力な API を提供します。デフォルトで Tree Grid はセル編集を使用し、デフォルトのセル編集テンプレートによって、列のデータ型に基づいてさまざまなエディターが表示されます。さらに、データ更新アクション用の独自のカスタムテンプレートを定義したり、変更をコミット/破棄したりするためのデフォルトの動作をオーバーライドすることもできます。

Angular Tree Grid セル編集とセルテンプレートの例

Note

任意のタイプのエディターコンポーネントで igxCellEditor を使用すると、キーボードナビゲーションフローが中断されます。同じことが、編集モードに入るカスタムセルの直接編集にも当てはまります。これは、追加したエディターコンポーネント (igxSelect、igxCombo など) ではなく、セル要素にフォーカスが残るためです。これが、igxFocus ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の流暢な編集フローが維持されます。

セルの編集

UI を介した編集

編集可能なセルがフォーカスされたときに以下のいずれかの方法で特定のセルを編集モードにすることができます。

ダブルクリック;
シングルクリック - 以前選択したセルが編集モードで現在選択したセルが編集可能な場合のみ、シングルクリックで編集モードに入ります。以前選択したセルが編集モードではない場合、編集モードに入らずにシングルクリックでセルを選択します。
Enter キーの押下;
F2 キーの押下;

変更をコミットしない場合も以下の方法で編集モードを終了できます。

Escape キーの押下;
ソート、フィルターリング、検索、非表示 操作の実行時。

変更をコミットしない場合も以下の方法で編集モードを終了できます。

Enter キーの押下;
F2 キーの押下;
Tab キーの押下;
他のセルをシングルクリック - Tree Grid で他のセルをクリックしたときに変更がサブミットされます。
その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。

Note

セルは、垂直/水平方向へのスクロールや Tree Grid 以外をクリックした場合も編集モードのままです。セル編集と行編集両方で有効です。

API を介した編集

プライマリキーが定義されている場合のみ IgxTreeGrid API でもセル値を変更することができます。

public updateCell() {
    this.treeGrid.updateCell(newValue, rowID, 'Age');
}

セルを更新するその他の方法として IgxGridCell の update メソッドで直接更新する方法があります。

public updateCell() {
    const cell = this.treeGrid.getCellByColumn(rowIndex, 'Age');
    // You can also get cell by rowID if primary key is defined
    // const cell = this.treeGrid.getCellByKey(rowID, 'Age');
    cell.update(9999);
}

セル編集テンプレート

デフォルトのセル編集テンプレートの詳細については、編集トピックを参照してください。

セルが編集モードのときに適用されるカスタムテンプレートを提供する場合は、igxCellEditor ディレクティブを使用できます。これを行うには、igxCellEditor ディレクティブでマークされた ng-template を渡し、カスタムコントロールを cell.editValue に適切にバインドする必要があります:

<igx-column field="class" header="Class" [editable]="true">
    <ng-template igxCellEditor let-cell="cell" let-value>
        <igx-select class="cell-select" [(ngModel)]="cell.editValue" [igxFocus]="true">
            <igx-select-item *ngFor="let class of classes" [value]="class">
                {{ class }}
            </igx-select-item>
        </igx-select>
    </ng-template>
</igx-column>

このコードは、Race、Class、および Alignment 列のセルに IgxSelectComponent を実装する以下のサンプルで使用されています。

Note

編集モードでセルの editValue に加えられた変更は、終了時に適切な編集イベントをトリガーし、トランザクション状態に適用されます (トランザクションが有効な場合)。

Note

セルテンプレート igxCell は、編集モード外での列のセルの表示方法を制御します。 igxCellEditor セル編集テンプレートディレクティブは、編集モードでの列のセルの表示方法を処理し、編集されたセルの編集値を制御します。

Note

列とそのテンプレートの構成方法の詳細については、グリッド列構成のドキュメントを参照してください。

CRUD 操作

Note

CRUD 操作を実行した場合、filtering、sorting、grouping などのパイプが再適用されるため、ビューが自動的に更新されることに注意してください。

IgxTreeGridComponent は基本的な CRUD 操作のための簡易な API を提供します。

新しいレコードの追加

Tree Grid コンポーネントは、提供したデータをデータソースに追加する addRow メソッドを公開します。

public addNewChildRow() {
    // Adding a new record
    // Assuming we have a `getNewRecord` method returning the new row data
    // And specifying the parentRowID.
    const record = this.getNewRecord();
    this.treeGrid.addRow(record, 1);
}

データを Tree Grid で更新

Tree Grid のデータ更新は、グリッドでプライマリキーが定義されている場合のみ updateRow と updateCell メソッドで行うことができます。セルと行の値またはそのいずれかを各 update メソッドで直接更新できます。

// Updating the whole row
this.treeGrid.updateRow(newData, this.selectedCell.cellID.rowID);

// Just a particular cell through the Tree Grid API
this.treeGrid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);

// Directly using the cell `update` method
this.selectedCell.update(newData);

// Directly using the row `update` method
const row = this.treeGrid.getRowByKey(rowID);
row.update(newData);

Tree Grid からデータを削除

deleteRow() メソッドは、プライマリキーが定義されている場合に指定した行のみを削除することに注意してください。

// Delete row through Tree Grid API
this.treeGrid.deleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
const row = this.treeGrid.getRowByIndex(rowIndex);
row.delete();

igx-tree-grid に関係なく、ボタンのクリックなどのユーザーインタラクションに関連付けできます。

<button igxButton igxRipple (click)="deleteRow($event)">Delete Row</button>

編集イベントでのセル検証

グリッドの編集イベントを使用して、ユーザーがグリッドを操作する方法を変更できます。この例では、cellEdit イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします (event.cancel = true)。また、IgxToast を使用してカスタムエラーメッセージを表示します。

最初に必要なことは、グリッドのイベントにバインドすることです。

<igx-tree-grid (cellEdit)="handleCellEdit($event)"
...>
...
</igx-tree-grid>

cellEdit は、セルの値がコミットされる直前に発生します。handleCellEdit の定義では、アクションを実行する前に特定の列を確認する必要があります。

export class MyTreeGridEventsComponent {
    public handleCellEdit(event: IGridEditEventArgs): void {
        const column = event.column;
        if (column.field === 'Age') {
            if (event.newValue < 18) {
                event.cancel = true;
                this.toast.message = 'Employees must be at least 18 years old!';
                this.toast.open();
            }
        } else if (column.field === 'HireDate') {
            if (event.newValue > new Date().getTime()) {
                event.cancel = true;
                this.toast.message = 'The employee hire date must be in the past!';
                this.toast.open();
            }
        }
    }
}

ここでは、2 つの列を検証しています。ユーザーが従業員の年齢 (18歳未満) または雇用日 (将来の日付) に無効な値を設定しようとすると、編集がキャンセルされ (値は送信されません)、エラーメッセージ付きのトースターが表示されます。

以下は、上記の検証が igx-tree-grid に適用された結果のデモです。

スタイル設定

IgxTreeGrid で Ignite UI for Angular テーマライブラリを使用してセルのスタイルを設定できます。グリッドの grid-theme は、ユーザーがグリッドのさまざまな側面をスタイル設定できる広範なプロパティを公開します。

以下の手順では、編集モードでグリッドのセルのスタイルを設定する方法と、それらのスタイルの範囲を設定する方法について説明します。

Ignite UI テーマライブラリを使用するには、まずグローバルスタイルでテーマ index ファイルをインポートする必要があります。

スタイルライブラリのインポート

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

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

以上で Ignite UI for Angular テーマエンジンによって公開されているすべての機能を使用できます。

パレットの定義

インデックスファイルをインポート後、カスタムパレットを作成します。好きな 3 つの色を定義し、それらを使用して palette でパレットを作成しましょう。

$white: #fff;
$blue: #4567bb;
$gray: #efefef;

$color-palette: palette(
  $primary: $white, 
  $secondary: $blue, 
  $surface: $gray
);

テーマの定義

これで、パレットを使用してテーマを定義できます。セルは grid-theme によってスタイル設定されているため、それを使用して IgxTreeGrid のテーマを生成できます。

$custom-grid-theme: grid-theme(
  $cell-editing-background: $blue,
  $cell-edited-value-color: $white,
  $cell-active-border-color: $white,
  $edit-mode-color: color($color-palette, "secondary", 200)
);

テーマを適用

テーマを適用する最も簡単な方法は、グローバルスタイルファイルに sass @include ステートメントを使用することです。

@include grid($custom-grid-theme);

デモ

上記の手順に加えて、セルの編集テンプレートに使用されるコントロールのスタイルを設定することもできます (input-group、datepicker および checkbox)。

Note

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

Angular Tree Grid のセル編集

Angular Tree Grid セル編集とセルテンプレートの例

Note

セルの編集

UI を介した編集

Note

API を介した編集

セル編集テンプレート

Note

Note

Note

CRUD 操作

Note

新しいレコードの追加

データを Tree Grid で更新

Tree Grid からデータを削除

編集イベントでのセル検証

スタイル設定

スタイルライブラリのインポート

パレットの定義

テーマの定義

テーマを適用

デモ

Note

API リファレンス

その他のリソース

テーマ設定

Angular Tree Grid のセル編集

Angular Tree Grid セル編集とセル テンプレートの例

Note

セルの編集

UI を介した編集

Note

API を介した編集

セル編集テンプレート

Note

Note

Note

CRUD 操作

Note

新しいレコードの追加

データを Tree Grid で更新

Tree Grid からデータを削除

編集イベントでのセル検証

スタイル設定

スタイル ライブラリのインポート

パレットの定義

テーマの定義

テーマを適用

デモ

Note

API リファレンス

その他のリソース

テーマ設定

Angular Tree Grid セル編集とセルテンプレートの例

スタイルライブラリのインポート