Blazor Grid Batch Editing and Transactions
The Batch Editing feature of the IgbGrid is based on the IgbTransactionService.
Below is a detailed example of how is Batch Editing enabled for the IgbGrid component.
Blazor Grid Batch Editing and Transactions Example
The following sample demonstrates a scenario, where the IgbGrid has IgbGrid.BatchEditing enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed.
Transaction state consists of all the updated, added and deleted rows, and their last states.
Usage
You need to enable IgbGrid.BatchEditing from your Grid:
<IgbGrid Data=data BatchEditing="true">
</IgbGrid>This will ensure a proper instance of Transaction service is provided for the IgbGrid. The proper IgbTransactionService is provided through a TransactionFactory.
After batch editing is enabled, define a IgbGrid with bound data source and IgbGrid.RowEditable set to true and bind:
<IgbGrid @ref="grid" BatchEditing="true" Data=data PrimaryKey=primaryKey Width="100%" Height="500px"
RowEditable="true">
</IgbGrid>
<button @onclick="OnCommitClick" disabled="@grid.transactions.getAggregatedChanges(false).length < 1">Commit</button>
<button @onclick="OnUndoClick" disabled="!@grid.transactions.canUndo">Undo</button>
<button @onclick="OnRedoClick" disabled="!@grid.transactions.canRedo">Redo</button>
@code {
private string primaryKey = "ProductID";
private IgbGrid grid;
protected override async Task OnInitializedAsync() => forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
private void OnCommitClick(MouseEventArgs e)
{
this.grid.transactions.commit(this.data);
}
private void OnUndoClick(MouseEventArgs e)
{
this.grid.transactions.undo();
}
private void OnRedoClick(MouseEventArgs e)
{
this.grid.transactions.redo();
}
}The following code demonstrates the usage of the IgbTransactionService API - undo, redo, commit.
The transactions API won’t handle end of edit and you’d need to do it by yourself. Otherwise, IgbGrid would stay in edit mode. One way to do that is by calling EndEdit in the respective method.
Disabling IgbGrid.RowEditable property will modify IgbGrid to create transactions on cell change and will not expose row editing overlay in the UI.
API References
Additional Resources
Our community is active and always welcoming to new ideas.