Blazor Grid Editing
The Ignite UI for Blazor Cell Editing feature in Blazor Grid provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The IgbGrid
provides you with a powerful public API which allows you to customize the way these operations are performed. The data manipulation phases are:
- Cell Editing
- Row Editing
- Batch Editing (Coming Soon)
Setup
In order to specify which edit mode should be enabled, the IgbGrid
exposes the following boolean properties - Editable
and RowEditable
.
The Editable
property enables you to specify the following options:
- false - the editing for the corresponding column will be disabled. This is the default value.
- true - the editing for the corresponding column will be enabled.
Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the
IgbGrid
.
The RowEditable
property enables you to specify the following options:
- false - the row editing in the corresponding grid will be disabled. This is the default value.
- true - the row editing in the corresponding grid will be enabled.
In the IgbGrid
, if you set RowEditable
property to true, and the Editable
property is not explicitly defined for any column, the editing will be enabled for all the columns except the primary key.
- Cell and Batch Editing - in this scenario every singe modification of each cell is preserved separately and undo/ redo operations are available on cell level;
- Row and Batch Editing - in this scenario the modifications are preserved on row level so undo/ redo operations will not be working for each cell that is modified but for the bunch of cell from each row.
Editing Templates
If you want to use a data type specific edit templates, you should specify the column's DataType
property. So let's now see what are the default templates for each type:
- For
string
data type, default template is usingIgbInput
. - For
number
data type, default template is usingIgbInput
type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0. - For
date
data type, default template is usingIgbDatePicker
- For
dateTime
data type, default template is usingDateTimeEditor
. This editor will give you a mask directions for the input elements part of the DateTime object. - For
time
- data type, default template is usingTimePicker
. - For
boolean
data type, default template is usingIgbCheckbox
. - For
currency
data type, default template is usingInputGroup
with prefix/suffix configuration based on application or grid locale settings. - For
percent
data type, default template is usingInputGroup
with suffix element that shows a preview of the edited value in percents.
- For custom templates you can see Cell Editing topic
All available column data types could be found in the official Column types topic.
Event Arguments and Sequence
The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the Row Editing and Cell Editing lifecycle - when starting, committing or canceling the editing action.
Event | Description | Arguments | Cancellable |
---|---|---|---|
RowEditEnter |
If RowEditing is enabled, fires when a row enters edit mode |
IgbGridEditEventArgs |
true |
CellEditEnter |
Fires when a cell enters edit mode (after RowEditEnter ) |
IgbGridEditEventArgs |
true |
CellEdit |
If value is changed, fires just before a cell's value is committed (e.g. by pressing Enter ) |
IgbGridEditEventArgs |
true |
CellEditDone |
If value is changed, fires after a cell has been edited and cell's value is committed | IgbGridEditDoneEventArgs |
false |
CellEditExit |
Fires when a cell exits edit mode | IgbGridEditDoneEventArgs |
false |
RowEdit |
If RowEditing is enabled, fires just before a row in edit mode's value is committed (e.g. by clicking the Done button on the Row Editing Overlay) |
IgbGridEditEventArgs |
true |
RowEditDone |
If RowEditing is enabled, fires after a row has been edited and new row's value has been committed. |
IgbGridEditDoneEventArgs |
false |
RowEditExit |
If RowEditing is enabled, fires when a row exits edit mode |
IgbGridEditDoneEventArgs |
false |
Event Cancelation
RowEditEnter
- NeitherRow
norCell
will enter edit mode.CellEditEnter
- Prevents entering cell edit. IfRowEditable
is enabled, row edit will be triggered, although cell edit will remain forbidden.CellEdit
- AllowedCell
and/orRow
edit, hitting Done button or Enter won't commit the value or row transaction. Cell editing and Row editing won't be closed until Cancel button is clicked.RowEdit
- Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting Done does not commit or close the row. Cancel button closes the editing process and the transaction without committing the changes.
The following sample demonstrates the editing execution sequence in action:
Features integration
While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing:
Grid | Filtering | Sorting | Paging | Moving | Pinning | Hiding | GroupBy | Resizing | Escape | Enter | F2 | Tab | Cell Click | Add new row/Delete/Edit |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Keep edit mode | ✔ | |||||||||||||
Exit edit mode | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | |
Commit | ✔ | ✔ | ✔ | ✔ | ✔ | |||||||||
Discard | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
As seen from the table, all interactions, except resizing a column, will end the editing and will discard the new values. Should the new value be committed, this can be done by the developer in the corresponding feature "-ing" event.
Example how to commit new values, if user tries to sort the column while a cell/row is in edit mode:
<IgbGrid
Id="grid"
SortingScript="SortingHandler"
RowEditable="true">
</IgbGrid>
//In JavaScript
function SortingHandler() {
grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);