React Grid 編集

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

サンプル

Edit on CodeSandbox

概要

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

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

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

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

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

コード スニペット

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

<IgrDataGrid
    height="100%"
    width="100%"
    activationMode="Cell"
    editMode="CellBatch" >
</IgrDataGrid>
<button onClick={this.onCommitClick}>Commit Data</button>
import { IgrDataGrid } from 'igniteui-react-grids';

onCommitClick = () => {
    this._grid.commitEdits();
}

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

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

<IgrDataGrid
    height="100%"
    width="100%"
    activationMode="Cell"
    editMode="CellBatch" >
</IgrDataGrid>
<button disabled={!this.canUndo} onClick={this.onUndoClick}>Undo</button>
<button disabled={!this.canRedo} onClick={this.onRedoClick}>Redo</button>
import { IgrDataGrid } from 'igniteui-react-grids';

onUndoClick = () => {
    this._grid.undo();

    // request a new render so the undo/redo buttons update.
    this.setState({ });
}

onRedoClick = () => {
    this._grid.redo();

    // request a new render so the undo/redo buttons update.
    this.setState({ });
}
import { IgrDataGridComponent } 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();
}

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

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

<IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    activationMode="Cell"    
    cellValueChanging={this.onCellValueChanging}
    dataCommitting={this.onDataCommitting}>
</IgrDataGrid>
import { IgrGridDataCommittingEventArgs } from 'igniteui-react-grids';
import { TransactionType } from 'igniteui-react-core'

onCellValueChanging = (s: IgrDataGrid, e: IgrGridCellValueChangingEventArgs) => {
    //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);
    }        
}

onDataCommitting = (s: IgrDataGrid, e: IgrGridDataCommittingEventArgs) => {

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