Grid 編集

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

デモ


編集モードに入るには、データ型固有の編集テンプレートを使用する場合、列 dataType プロパティを指定する必要があります。次に各型のデフォルト テンプレートについて説明します。

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

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

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

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

  • Escape キーの押下;
  • sortingfilteringsearchinghiding 操作の実行時。

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

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

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

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

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

以外を更新したい場合

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

...
    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 操作を実行した場合、filteringsortinggrouping などのパイプが再適用されるため、ビューが自動的に更新されることに注意してください。

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

新しいレコードの追加

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

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

データを Grid で更新

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

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

// Just a particular 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);

Grid からデータを削除

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 リファレンス

その他のリソース