Web Components Grid 編集

Ignite UI for Web Components Data Table / Data Grid は、一括更新のセルおよび行編集をサポートします。注: 現在、これは非テンプレート列に制限されています。

Web Components Grid 編集の例

Edit on CodeSandbox

概要

Web Components データ グリッドの編集は、Web Components グリッドの EditMode オプションを使用して設定します。このプロパティには、以下にリストされている 3 つの異なるオプションがあります。

  • None: 編集は有効ではありません。
  • Cell: セルが編集モードに入り、編集モードの終了時に値をコミットできるようにします。
  • CellBatch: セルが編集モードに入りますが、変更はコミットされるまで後でキャッシュされます。
  • Row: 行が編集モードに入り、編集モードの終了時に値をコミットできるようにします。

CellBatch に設定した場合、変更をコミットするにはグリッドから commitEdits メソッドを実行する必要があります。グリッドは、コミットされるまでセルを斜体で表示し、変更をデータソースにプッシュするタイミングを制御します。

さらに、onCellValueChanging イベントをフックし、コミットされる前に新しい値を調べることでエラー処理を実行できます。グリッドはエラー メッセージを出力できる setEditError メソッドを公開します。これにより、有効な値が入力されるまで、セルを編集モードに維持します。それ以外の場合は、グリッドの rejectEdit メソッドを実行して無効な値を元に戻すことができます。無効な値が見つからない場合、グリッドの acceptEdit メソッドを呼び出して変更をコミットすることもできます。

コミットは、acceptCommit または rejectCommit メソッドで onDataCommitting をフックし、commitID イベント引数をパラメーターとして渡すことで、グリッド レベルで承認または拒否できます。このイベントは、コミットされる前のすべての変更を保存する changes コレクションも公開します。たとえば、コミットが追加、更新、削除操作のいずれであるかを changes コレクションで公開された TransactionType プロパティによって確認し、必要に応じて acceptCommit または rejectCommit を実行できます。

コード スニペット

以下は、データ グリッドで編集を設定し、データをコミットする方法を示します。

<button id="clickCommit">Commit</button>
<igc-data-grid id="grid"
    height="100%"
    width="100%"
    activation-mode="Cell"
    edit-mode="Cell">
</igc-data-grid>
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';

this.onCommitClick = this.onCommitClick.bind(this);

public onCommitClick(){
    this.grid.commitEdits();
}

一括変更を元に戻す/やり直し

以下は、一括更新が有効な場合に変更を元に戻す方法を示しています。

<igc-data-grid id="grid"
      height="100%"
      width="100%"
      activation-mode="Cell"
      edit-mode="Cell">
</igc-data-grid>
<button id="undoClick" disabled="true">Undo</button>
<button id="redoClick" disabled="true">Redo</button>
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';

public onUndoClick(){
    this.grid.undo();
    if(this.grid.editMode === EditModeType.CellBatch && this.redo !== null)
    {
        this.redo.disabled = false;
    }
}

public onRedoClick(){
    this.grid.redo();
}

エラー検証とコミットの整合性

以下は、編集モードを終了するときにセルが空かどうかを確認し、更新されたセルからのコミットのみを受け入れることによって、エラーを組み込む方法を示しています。

<igc-data-grid
    id="grid"
    height="calc(100% - 50px)"
    width="100%"
    activation-mode="Cell"
    selection-mode="SingleRow"
    default-column-min-width="125"
    is-column-options-enabled="true"
    auto-generate-columns="false"
    edit-mode="Cell">
import { IgcGridDataCommittingEventArgs } from 'igniteui-webcomponents-grids';
import { TransactionType } from 'igniteui-webcomponents-core'

this.onCellValueChanging = this.onCellValueChanging.bind(this);
this.grid.cellValueChanging = this.onCellValueChanging;

this.onDataCommitting = this.onDataCommitting.bind(this);
this.grid.dataCommitting = this.onDataCommitting;


public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) {
    if(s.editMode === EditModeType.CellBatch && this.undo !== null)
    {
        this.undo.disabled = false;
    }

    //check if value is empty upon exiting edit mode.
    if(e.newValue === "") {
        s.setEditError(e.editID, "Error, cell is empty");
        //or revert changes
        s.rejectEdit(e.editID);
    }
    else {
        s.acceptEdit(e.editID);
    }    
}

public onDataCommitting (s: IgcDataGridComponent, e: IgcGridDataCommittingEventArgs) {    
    if(e.changes[0].transactionType === TransactionType.Update) {      
        //commit was passed      
        s.acceptCommit(e.commitID);
    }
    else{
        //commit was prevented
        s.rejectCommit(e.commitID);
    }        
}