Web Components Grid 編集

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

    Web Components Grid 編集の例

    概要

    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 を実行できます。

    Excel スタイル編集

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

    コード スニペット

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

    <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);
        }
    }