Skip to content

MudDataGrid: Add inline row editing - #13058

Merged
danielchalmers merged 9 commits into
MudBlazor:devfrom
mmaestro16:dev
Jul 18, 2026
Merged

MudDataGrid: Add inline row editing#13058
danielchalmers merged 9 commits into
MudBlazor:devfrom
mmaestro16:dev

Conversation

@mmaestro16

Copy link
Copy Markdown
Contributor

Description

This PR adds support for inline row editing to MudDataGrid, providing a new edit mode where individual rows can be edited in place without opening a dialog. This feature complements the existing Cell and Form edit modes.

What's Changed

New Inline Enum Value
• Added Inline to the DataGridEditMode enum
• When a row enters edit mode, only that row displays input controls
• All other rows continue to display plain text

New Public API Methods

• IsEditingItem(T item) - Checks if a specific item is currently being edited in inline mode
• CommitInlineEditAsync() - Commits inline edits, validates changes, and persists to the source item
• Internal GetEditingItemOrSource(T item) - Returns the editing copy if the item is being edited, otherwise returns the source item

Enhanced CellContext

• New IsEditing property - Indicates whether the row containing the cell is currently being edited
• Updated CommitEditingItemAsync - Now works with inline mode to commit and exit edit mode
• Properly distinguishes between the editing copy and source item

Updated Cell Rendering Logic

• Cells now check for inline edit mode and render appropriate controls
• EditTemplate is used when the row is being edited
• Regular CellTemplate or formatted values are shown otherwise
• Proper handling of editable vs. non-editable columns during inline editing

Key Features

• Manual Trigger: Works with EditTrigger.Manual via custom action buttons in a TemplateColumn
• Validation Support: Respects CommittedItemChanges callback for validation - return DataGridEditFormAction.KeepOpen to prevent commit
• Event Callbacks: Triggers StartedEditingItem, CanceledEditingItem, CommittedItemChanges, and CommittedItemChanged appropriately
• Single Row Editing: Only one row can be edited at a time
• Isolated Changes: Edits are made to a cloned copy; canceling discards all changes
• No Dialog: Unlike Form mode, inline editing keeps users in the grid context

Usage Example

<MudDataGrid T="Element" 
             Items="@elements" 
             ReadOnly="false"
             EditMode="DataGridEditMode.Inline"
             EditTrigger="DataGridEditTrigger.Manual"
             CommittedItemChanges="@ValidateChanges">
    <Columns>
        <PropertyColumn Property="x => x.Name">
            <EditTemplate>
                <MudTextField @bind-Value="context.Item.Name" 
                              Margin="Margin.Dense" 
                              Variant="Variant.Text" />
            </EditTemplate>
        </PropertyColumn>
        
        <TemplateColumn>
            <CellTemplate>
                @if (context.IsEditing)
                {
                    <MudIconButton Icon="@Icons.Material.Filled.Check" 
                                   OnClick="@context.Actions.CommitEditingItemAsync" />
                    <MudIconButton Icon="@Icons.Material.Filled.Close" 
                                   OnClick="@context.Actions.CancelEditingItemAsync" />
                }
                else
                {
                    <MudIconButton Icon="@Icons.Material.Outlined.Edit" 
                                   OnClick="@context.Actions.StartEditingItemAsync" />
                }
            </CellTemplate>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

Tests

Added comprehensive unit tests covering:
• Starting edit mode and showing edit controls
• Canceling edits and restoring original values
• Committing edits and persisting changes
• Validation with KeepOpen behavior
• Validation failure preventing commits
• Validation failure then success flow
• IsEditing property state management
• Only edited row showing inputs
• Direct API calls (CommitInlineEditAsync(), CancelEditingItemAsync)
• No dialog opened in inline mode

Test components created:
• DataGridInlineEditTest.razor - Comprehensive inline editing scenarios
• DataGridInlineEditValidationTest.razor - Validation-focused testing

Screenshots

image image

Checklist:

  • I've read the contribution guidelines
  • My code follows the style of this project
  • I've added or updated relevant unit tests

@mudbot mudbot Bot changed the title DataGrid - Inline Row Editing MudDataGrid: Add inline row editing Apr 16, 2026
@mudbot mudbot Bot added the enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library label Apr 16, 2026
@mmaestro16

Copy link
Copy Markdown
Contributor Author

@versile2 please have a look. I would like to know if I can count on this solution in my project.

@versile2

Copy link
Copy Markdown
Contributor

I can promise you in either scenario it won't be fast, we all have our hand full for reviews. As to if it will be accepted I will let you know, we'll talk to the team and make sure it's something we can support moving forward.

V

@Phen-Ro

Phen-Ro commented May 13, 2026

Copy link
Copy Markdown

Personally I am looking forward to this review and eventual merge. I was trying to hunt down how to allowed row-level edit mode without manual workarounds when I stumbled across this PR. For what it's worth, you will have guaranteed users of this new feature.

@versile2

Copy link
Copy Markdown
Contributor

I have gotten no dissenting opinions, so I've queued this up for review.

@versile2
versile2 self-requested a review July 6, 2026 21:14

@versile2 versile2 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this. I think the inline edit direction is useful, but there are a couple of compatibility/behavior problems here that should be fixed before merge.

Blocking: cell edit no longer raises StartedEditingItem before the value changes

In Cell.cs, StringValueChangedAsync and NumberValueChangedAsync now set the property directly and then call CommitItemChangesAsync.

Before this change, the cell edit path called BeginCellEditAsync(_item) first. That initialized the editing source item, cloned the row, and raised StartedEditingItem before mutation. Consumers using DataGridEditMode.Cell can currently use that callback to snapshot pre-edit state.

This PR removes that ordering, so the callback semantics regress. The cell-edit path should still begin the edit and raise StartedEditingItem before applying the changed value.

Blocking: public API source break in CellContext<T> / CellActions

CellContext<T> replaces the existing public two-argument constructor with a three-argument constructor, and CellActions now has a new public required member.

That breaks consumer code that constructs these public types directly. Please keep the existing constructor overload and avoid adding a new required member to the public nested type. The new source item plumbing can be added without forcing existing callers to change.

Should fix: Selected and Open use the edited clone instead of the source row

CellContext.Selected and CellContext.Open still check Item, but inline edit now uses a cloned editing item while selection and hierarchy state are tracked against the original source row.

That means templates using context.Selected or context.Open can temporarily see the wrong value while the row is being edited. These should use the source item instead.

Cleanup: trailing whitespace

git diff origin/dev...HEAD --check currently fails on trailing whitespace in the PR diff, including the inline row editing example/test files and MudDataGrid.razor.

-- Comment / Review / Code handled by AI
-- Codebringer for versile2
-- Approved by versile2

@mudbot mudbot Bot added the needs: changes A maintainer has asked for further modifications to be made to this pull request label Jul 9, 2026
@mmaestro16

Copy link
Copy Markdown
Contributor Author

I merged code to latest dev branch and did required changes. Please check again.

mmaestro16 and others added 3 commits July 13, 2026 22:06
…InlineRowEditingExample.razor

Co-authored-by: Versile Johnson II <148913404+versile2@users.noreply.github.com>
@mmaestro16

Copy link
Copy Markdown
Contributor Author

I hope now is all good.

@mudbot mudbot Bot removed the needs: changes A maintainer has asked for further modifications to be made to this pull request label Jul 14, 2026

@versile2 versile2 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work, thank you!
LGTM

@versile2
versile2 requested a review from ScarletKuro July 15, 2026 22:16
@danielchalmers
danielchalmers merged commit 039429b into MudBlazor:dev Jul 18, 2026
8 checks passed
@danielchalmers

Copy link
Copy Markdown
Member

Thanks!

This was referenced Aug 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

API change Modifies the public API surface in a non-breaking way (ex: adds a new property) enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants