Blazor Syncfusion SFGrid not allowing Edit after Add

Question

I have simple SFGrid component in my razor page.

<SfGrid
    @ref="_grid"
    Toolbar="@(new List<string> { "Add", "Update", "Cancel" })"
    DataSource="Data"
    EnableStickyHeader ="true">
    <GridEditSettings 
        AllowAdding="true" 
        AllowDeleting="true" 
        AllowEditing="true" 
        Mode="EditMode.Batch">
    </GridEditSettings>
    <GridEvents
        TValue="MODEL"
        CellSelected="OnCellSelected"
        OnActionComplete="OnActionComplete"
        OnBatchAdd="OnBatchAdd"
        OnBatchCancel="OnBatchCancel">
    </GridEvents>
    <GridSelectionSettings Mode="SelectionMode.Cell"></GridSelectionSettings>
    <GridColumns>
        <GridColumn Field="@nameof(Id)" IsPrimaryKey="true">
        </GridColumn>
        <GridColumn Field="@nameof(Name)" HeaderText="Name"></GridColumn>
    </GridColumns>
</SfGrid>

When the grid is loaded, it is empty. I click on Add button to add a new row. I select some value in the field Name. I click outside the grid and then i can't edit that value.

This does not happen if i have some data already filled in the grid. It only happens when the grid is totally empty.

If i make the Id column visible then it works with empty grid but I do not want to make that column visible.

Is there any other solution?

Answer 1

This is an issue with the grid's batch editing mode. The grid is designed to update all changes made in the batch editing mode to the data source when the grid is in a "dirty" state, meaning there are changes that have not been committed.

To resolve this issue, you can try to call the Update method on the grid in the CellSelected event. This will update the changes made to the grid immediately. Here is the code for that:

@code {

    private SfGrid<MODEL> _grid;

    private void OnCellSelected(SelectedCellArgs<MODEL> args)
    {
        _grid.Update();
    }
}

You can also try to call the Commit method on the grid in the OnActionComplete event, which is fired after an action is completed in the grid, such as adding a new row or updating a cell value. Here is the code for that:

@code {
    private void OnActionComplete(ActionEventArgs<MODEL> args)
    {
        _grid.Commit();
    }
}