Blazor Grid 編集

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

Blazor Grid 編集の例

概要

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

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

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

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

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

コードスニペット

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

<DataGrid Height="100%" Width="100%" @ref="DataGridRef"
    DataSource="DataSource"
    EditMode="EditModeType.CellBatch" />
<button @onclick="OnCommitClick">Commit Data</button>

@code {
    public DataGrid DataGridRef;

    private void OnCommitClick(MouseEventArgs e)
    {
        this.DataGridRef.CommitEdits();
    }
}

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

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

<DataGrid Height="100%" Width="100%" @ref="DataGridRef"
    DataSource="DataSource"
    EditMode="EditModeType.CellBatch" />
<button @onclick="OnUndoClick">Undo</button>
<button @onclick="OnRedoClick">Redo</button>

@code {
    public DataGrid DataGridRef;

    private void OnUndoClick(MouseEventArgs e)
    {
        this.DataGridRef.Undo();
    }

    private void OnRedoClick(MouseEventArgs e)
    {
        this.DataGridRef.Redo();
    }
}

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

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

@code {
    public void OnCellValueChanging(GridCellValueChangingEventArgs e)
    {
        if(e.NewValue == "")
        {
            this.DataGridRef.SetEditError(e.EditID, "Error, cell is empty");
            this.DataGridRef.RejectEdit(e.EditID);
        }
        else
        {
            this.DataGridRef.AcceptEdit(e.EditID);
        }
    }

    public void OnDataCommitting(GridDataCommittingEventArgs e)
    {
        if(e.Changes[0].TransactionType == TransactionType.Update)
        {
            this.DataGridRef.AcceptCommit(e.CommitID);
        }
        else
        {
            this.DataGridRef.RejectCommit(e.CommitID);
        }
    }
}

Blazor Grid 編集