Blazor Grid — Cell Editing CTP (v23.2)

In this blog post, I'll describe the capabilities of the  DevExpress Blazor Grid component's new cell editing mode (available as a Community Tech Preview in our v23.2 release cycle). Should you have questions about this new feature or the contents of this post, feel free to submit a support ticket via the DevExpress Support Center.

Cell Editing UI

When Cell Editing is enabled, users can click a cell, and by doing so, switch it to edit mode. Once in edit mode, our Blazor Grid will display an in-place editor within the cell. Users can edit the current cell value using this editor or move focus to other cells and display associated editors. When focus moves to a different row, the control validates user input and saves changes as necessary.

Edit, Cancel, and Save buttons are unnecessary when using the Blazor Grid's Cell Editing mode. You can remove these buttons from the command column or you can remove the entire command column. Instead of using our built-in command column, you can add a toolbar or a context menu to display your own New record and/or Delete buttons.

To activate Cell Editing in your Blazor application, you must:

1. Enable the KeyboardNavigationEnabled property and set the EditMode property to EditCell.
2. If your data object has one or more primary keys, assign it/them to the KeyFieldName/KeyFieldNames property.
3. Handle EditModelSaving and DataItemDeleting events to process save and delete operations.
4. (Optional) To display CRUD-related command buttons in the Grid component, you can declare a DxGridCommandColumn object in the Columns template.

<DxGrid Data="DataSource"
    KeyFieldName="EmployeeId"
    EditMode="GridEditMode.EditCell"
    KeyboardNavigationEnabled="true"
    EditModelSaving="Grid_EditModelSaving"
    DataItemDeleting="Grid_DataItemDeleting">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
</DxGrid>
@code {
    IGrid Grid { get; set; }
    IEnumerable<EditableEmployee> DataSource { get; set; }
    // ...
    async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
        // Saves changes
    }
    async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) {
        // Deletes the processed data item
    } 
}

Similar to our Blazor Grid's other data edit modes, Cell Editing mode automatically generates cell editors based on column data types. For advanced usage scenarios, you may need to customize auto-generated editors or replace them with desired editors. As you explore this feature, be certain to check if Cell Editing works as expected with DevExpress editors defined for EditSettings and CellEditTemplate (as well as with automatically generated editors).

Keyboard Support

Cell Editing supports keyboard navigation and ships with a set of predefined keyboard shortcuts. As such, it requires you to enable the KeyboardNavigationEnabled property. To display an editor in a data cell, users can focus the cell and press Enter. When the editor is visible, the following keyboard shortcuts are available:

• Enter — Validates the cell value and hides the editor.
• Esc — Hides the editor and discards changes made in this cell. Pressing Esc when the editor is hidden discards all changes made in the row and cancels row editing.
• Tab/Shift+Tab — Hides the editor, focuses the next/previous data cell, and displays an editor in the newly focused cell.

To quickly navigate between Grid cells, users can also execute the following built-in shortcuts (available when an in-place editor is hidden):

• Home/End — Focuses the first/last cell of the current row.
• Ctrl+Home/Ctrl+End — Focuses the first/last data cell on the current page.
• Page Up/Page Down — Moves focus one page up/down.

Refer to the following help topic for more information about navigation rules and keyboard shortcuts: Keyboard Support in Blazor Grid.

Built-in Validation

Our Blazor Grid automatically validates user input based on data annotation attributes defined in the edit model. Once a user moves focus away from the edited cell, the Grid validates this cell’s value. The Grid validates all field values of the edited data item when focus leaves the edited row or a user presses the Save button.

Once validated, the component marks editors with colored outlines and displays validation icons. Users can hover the mouse pointer over an error icon to display the corresponding error message within the tooltip. The Grid prevents users from editing other rows until they address all validation errors.

Saving Changes

With Cell Editing, you can save changes whenever you wish. You can post changes in EditModelSaving and DataItemDeleting event handlers directly to the underlying database and thus implement row by row save operations. Alternatively, you can accumulate changes in memory (batch editing) and post them to the database once a user performs a specific action (for instance, presses an external button).

To introduce batch data editing in your Blazor app, make the following changes to your code:

1. Create a storage that accumulates user changes.
2. In EditModelSaving and DataItemDeleting event handlers, place changes within this storage instead of posting them to the database.
3. Create buttons that allow users to discard accumulated changes or apply them to the underlying data source.
4. Handle the CustomizeElement event to highlight modified cells as needs dictate.

Refer to the following demo to review our batch editing implementation: Blazor Grid — Batch Edit (Preview).

Your Feedback Matters

Please take a moment to respond to the following survey question. Your answers will help us understand your needs and refine future Cell Editing-related development plans.