Grid 編集

Ignite UI for Angular の Grid コンポーネントは、列のデータ型に基づいて編集可能な列にデフォルト セル テンプレートを提供します。更に編集可能な列にカスタムテンプレートを定義でき、セル値の変更の確定や破棄でデフォルトの動作をオーバーライドできます。

デモ


特定のセルで編集モードに入るには、最初に列を編集可能にする必要があります。データ型固有の編集テンプレートを使用する場合は、列 dataType プロパティを指定してください。以下は各型のデフォルト テンプレートです。

  • string データ型のデフォルトのテンプレートは igxInput を使用します。
  • number データ型のデフォルト テンプレートは、igxInput type="number" を使用し、セルを数値に解析できない値に更新した場合は変更が破棄され、セル値は 0 に設定されます。
  • dateデータ型のデフォルトのテンプレートは igx-date-picker を使用します。
  • boolean データ型のデフォルトのテンプレートは igx-checkbox を使用します。

以下のいずれかの方法でセルがフォーカスされている場合、編集モードに入ることができます。

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

以下のいずれかの方法で変更を確定せずに編集モードを終了します。

  • Escape キーの押下
  • 並べ替え、フィルタリング、検索、非表示の操作時

編集モードを終了して以下のいずれかの方法で変更を確定します。

  • Enter キーの押下
  • F2 キーの押下
  • Tab キーの押下
  • その他のセルをシングル クリック - グリッドのその他のセルをクリックした際に変更が提出されます。
  • ページング、サイズ変更、移動、並べ替え列、ページの変更などの操作は、編集モードを終了して最新の値をサブミットします。
Note

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

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

...
    public updateCell() {
        this.grid1.updateCell(newValue, rowID, 'ReorderLevel');
    }
...

更新したいセルがグリッド表示コンテナ以外の場合、新しい値は提出されません。

セル更新のその他の方法として IgxGridCellComponent の update メソッドがあります。

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

セルが編集モードの際に適用するカスタム テンプレートを定義する方法については、Grid 列の構成をご覧ください。

CRUD 操作

Note

CRUD 操作を実行する場合、フィルタリング、並べ替え、グループ化など適用したすべてのパイプは再度適用されて表示が自動的に更新されます。

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

新しいレコードの追加

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

// Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data.
const record = this.getNewRecord();
this.grid.addRow(record);

グリッド データの更新

グリッド データの更新は、グリッドでプライマリキーが定義されている場合のみ updateRow と updateCell メソッドで行うことができます。セルおよび行の値を直接更新するには update メソッドを使用できます。

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

// Just a particualr cell through the Grid API
this.grid.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.grid.getRowByKey(rowID);
row.update(newData);

グリッド データの削除

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

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

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

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

API リファレンス

その他のリソース

ページを開く: GitHub