React Grid 編集

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

    React Grid 編集の例

    EXAMPLE
    DATA
    TSX
    Edit in:

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

    概要

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

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

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

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

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

    Ignite UI for React | CTA Banner

    Excel スタイル編集

    editOnKeyPress を使用すると、Excel の動作と同じように、入力時にすぐに編集を開始できます。さらに、editModeClickAction プロパティを SingleClick に設定して、ユーザーが他のセルに移動しながらセルをすばやく編集できるようにすることができます。デフォルトでは、編集モードに入るにはダブル クリックが必要です。

    コード スニペット

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

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

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

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

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

    <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>
tsx
    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({ });
}
ts

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

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

    <IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    activationMode="Cell"
    cellValueChanging={this.onCellValueChanging}
    dataCommitting={this.onDataCommitting}>
</IgrDataGrid>
tsx
    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);
    }
    else {
        s.acceptEdit(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);
    }
}
ts

    API リファレンス