[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Blazor Grid Editing
The Ignite UI for Blazor Data Table / Data Grid supports cell and row editing with batch updating. Note, this is currently limited to non-templated columns.
Blazor Grid Editing Example
Overview
Editing in the Blazor data grid is configured by using the EditMode
option of the Blazor grid. This property takes three different options, listed below:
None
: Editing is not enabled.Cell
: Allow cells to enter edit mode and commit the value on exiting edit mode.CellBatch
: Allows cells to enter edit mode but changes will be cached later until they are committed.Row
: Allow rows to enter edit mode and commit the value on exit.
When set to CellBatch
, in order to commit the changes you must perform the commitEdits
method from the grid. The grid will italicize the cells until they are committed providing control over when to push changes back to the datasource.
In addition, error handling can be performed by hooking the onCellValueChanging
event and inspecting new values before they are committed. The grid exposes a setEditError
method that can output an error message. This keeps the cell in edit mode until a valid value is entered. Otherwise the grid's rejectEdit
method can be performed to revert the invalid value. If no invalid value is found, you can also commit your changes by calling the grid's acceptEdit
method.
Commits can be approved or declined at the grid level by hooking onDataCommitting
via the acceptCommit
or rejectCommit
methods passing the commitID
event argument as the parameter. This event also exposes a changes
collection which stores all the modifications prior to being committed. For example, you can check if a commit was from an add, update, or delete operation via the TransactionType
property exposed on the changes
collection and perform an acceptCommit
or rejectCommit
when necessary.
Excel Style Editing
EditOnKeyPress
enables you to instantly begin editing when typing similar to how Excel behaves. In addition you may set the EditModeClickAction
property to SingleClick
to allow users to quickly edit cells while navigating to other cells. By default double-clicking is required to enter edit mode.
Code Snippet
The following demonstrates how to configure editing on the data grid and committing the data.
<IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
DataSource="DataSource"
EditMode="EditModeType.CellBatch" />
<button @onclick="OnCommitClick">Commit Data</button>
@code {
public IgbDataGrid DataGridRef;
private void OnCommitClick(MouseEventArgs e)
{
this.DataGridRef.CommitEdits();
}
}
Undo/Redo batch changes
The following demonstrates how to revert changes while batch updating is enabled.
<IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
DataSource="DataSource"
EditMode="EditModeType.CellBatch" />
<button @onclick="OnUndoClick">Undo</button>
<button @onclick="OnRedoClick">Redo</button>
@code {
public IgbDataGrid DataGridRef;
private void OnUndoClick(MouseEventArgs e)
{
this.DataGridRef.Undo();
}
private void OnRedoClick(MouseEventArgs e)
{
this.DataGridRef.Redo();
}
}
Error Validation and Commit Integrity
The following demonstrates how incorporate error by checking if cells are empty when leaving edit mode and accepts commits that are from updated cells only.
<IgbDataGrid Height="100%" Width="100%"
@ref="DataGridRef"
CellValueChanging="OnCellValueChanging"
DataCommitting="OnDataCommitting">
</IgbDataGrid>
@code {
public IgbDataGrid DataGridRef;
public void OnCellValueChanging(IgbGridCellValueChangingEventArgs e)
{
//check if value is empty upon exiting edit mode.
if (e.NewValue == "")
{
this.DataGridRef.SetEditError(e.EditID, "Error, cell is empty");
//or revert changes
this.DataGridRef.RejectEdit(e.EditID);
}
else
{
this.DataGridRef.AcceptEdit(e.EditID);
}
}
public void OnDataCommitting(IgbGridDataCommittingEventArgs e)
{
if (e.Changes[0].TransactionType == TransactionType.Update)
{
//commit was passed
this.DataGridRef.AcceptCommit(e.CommitID);
}
else
{
//commit was prevented
this.DataGridRef.RejectCommit(e.CommitID);
}
}
}
API References
CellBatch
EditModeClickAction
EditMode
SingleClick
TransactionType