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