.NET MAUI DataGrid Editing Commands

The .NET MAUI DataGrid control provides the following commands for editing the data inside the column:

• BeginEdit—Provides an entry point just before the editing begins.
• CancelEdit—Provides an entry point just before the editing is canceled.
• CommitEdit—Provides an entry point just before the editing is committed.

The execution parameter of the Editing Commands is of type EditContext that exposes the following properties:

• CellInfo—Gets the cell information associated with the operation.
• TriggerAction—Gets the SourceTriggerAction value that triggered the operation.
• Parameter—Gets an optional parameter holding additional information associated with the operation.

BeginEdit and CommitEdit Commands Example

Here is an example how the DataGrid Editing commands work.

1. Create the needed business objects, for example type Data with the following properties:

public class Data
{
    public string Country { get; set; }

    public string Capital { get; set; }
}

2. Chen, create a ViewModel with a collection of Data objects:

public class ViewModel
{
    public ObservableCollection<Data> Items { get; set; }

    public ViewModel()
    {
        this.Items = new ObservableCollection<Data>()
        {
            new Data { Country = "India", Capital = "New Delhi"},
            new Data { Country = "South Africa", Capital = "Cape Town"},
            new Data { Country = "Nigeria", Capital = "Abuja" },
            new Data { Country = "Singapore", Capital = "Singapore" }
        };
    }
}

3. Set the ViewModel class as BindingContext of the page:

this.BindingContext = new ViewModel();

4. Handle the BeginEdit action as a Command. First, create a class that inherits from the DataGridCommand and set its Id property. You will also need to override the CanExecute and Execute methods as demonstrated in the example below:

public class BeginEditCommand : DataGridCommand
{
    public BeginEditCommand()
    {
        this.Id = DataGridCommandId.BeginEdit;
    }

    public override void Execute(object parameter)
    {
        var context = (EditContext)parameter;
        var cellEdit = $"BeginEdit on: {context.CellInfo.Value} via {context.TriggerAction} \n";
        App.DisplayAlert(cellEdit);
        this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.BeginEdit, parameter);
    }
}

5. Handle the CommitEdit action as a Command. First, create a class that inherits from the DataGridCommand and set its Id property. You will also need to override the CanExecute and Execute methods as demonstrated in the example below:

public class CommitEditCommand : DataGridCommand
{
    public CommitEditCommand()
    {
        this.Id = DataGridCommandId.CommitEdit;
    }

    public override void Execute(object parameter)
    {
        var context = (EditContext)parameter;

        App.DisplayAlert("Edit Committed");
        this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.CommitEdit, parameter);
    }
}

6. Add this Command to the Commands collection of the RadDataGrid instance:

this.BindingContext = new ViewModel();
dataGrid.Commands.Add(new BeginEditCommand());
dataGrid.Commands.Add(new CommitEditCommand());

7. Define the DataGrid in XAML:

<telerik:RadDataGrid x:Name="dataGrid" 
                     ItemsSource="{Binding Items}"
                     UserEditMode="Cell"/>

See Also

• Validation
• DataGrid Styling
• Columns Styling