Angular Tree Grid のセル編集

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

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

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

    セルの編集

    UI を介した編集

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

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

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

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

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

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

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

    API を介した編集

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

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

    セルを更新するその他の方法として 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);
}
typescript

    セル編集テンプレート

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

    セルが編集モードのときに適用されるカスタム テンプレートを提供する場合は、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>
html

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

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

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

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

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

    CRUD 操作

    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);
}
typescript

    データを 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);
typescript

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

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

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

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

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

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

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

    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();
            }
        }
    }
}
typescript

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    スタイル設定

    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';
scss

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

    パレットの定義

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

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

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

    テーマの定義

    これで、パレットを使用してテーマを定義できます。セルは 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)
);
scss

    テーマを適用

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

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

    デモ

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

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

    App Builder | CTA Banner

    API リファレンス

    その他のリソース