Using await in SelectColumns OnSelect

[tokg-semler]

Hi,

I hope you can help me out and point me in the right direction.

I want to use DataGrid checkboxes and catch the event when something is selected. After that, I want to use that information to check if other options should be disabled.

But every time I perform some async work in the OnSelect event, I get an error:
Unhandled exception rendering component: Collection was modified; enumeration operation may not execute.
in /_/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs:line 121

Any help is very much appreciated.

Sample code:

@page "/test"
<h3>Test</h3>

<FluentDataGrid Items="@People" ShowHover="true" SelectFromEntireRow="false" TGridItem="Person">
    <SelectColumn TGridItem="Person"
                  SelectMode="DataGridSelectMode.Multiple"
                  OnSelect="@(e => PersonSelected(e.Item))"
                  Selectable="@(e => e.IsSelectable)">
        <SelectAllTemplate>&nbsp;</SelectAllTemplate>
    </SelectColumn>
    <PropertyColumn Property="@(p => p.Name)" Title="Description" Align="Align.Start" />
</FluentDataGrid>

@code {
    record Person(int PersonId, string Name)
    {
        public bool IsSelectable { get; set; } = true;
    };

    IQueryable<Person> People = new[]
       {
        new Person(10895, "Jean Martin"),
        new Person(10944, "António Langa"),
        new Person(11203, "Julie Smith"),
        new Person(11205, "Nur Sari"),
        new Person(11898, "Jose Hernandez"),
        new Person(12130, "Kenji Sato"),
    }.AsQueryable();

    async Task PersonSelected(Person person)
    {
        await Task.Delay(100); // simulate that the we are fetching selectable rules from the server

        People = new[] {
            new Person(10895, "Jean Martin"),
            new Person(10944, "António Langa"),
            new Person(11203, "Julie Smith"),
            new Person(11205, "Nur Sari"),
            new Person(11898, "Jose Hernandez")  { IsSelectable = false },
            new Person(12130, "Kenji Sato") { IsSelectable = false },
        }.AsQueryable();
    }
}

[rpodevns]

@vnbaaij @dvoituron I wonder if this might be considered a bug?

The FluentDatagridRow.HandleOnRowClickAsync is iterating over the an internal list while the FluentDatagrid.Items collection is being modified in the client code.

I see this a lot in WPF and the ToList() method usually saves the day. Changing foreach (var column in Grid._columns) to foreach (var column in Grid._columns.ToList()) appears to resolve the issue. Do you see any reason why that fix should not be applied?

internal async Task HandleOnRowClickAsync(string rowId)
{
        var row = GetRow(rowId);

        if (row is not null && !string.IsNullOrWhiteSpace(row.Class) && (row.Class.Contains(FluentDataGrid<TGridItem>.EMPTY_CONTENT_ROW_CLASS) || row.Class.Contains(FluentDataGrid<TGridItem>.LOADING_CONTENT_ROW_CLASS)))
        {
            return;
        }

        if (row != null && Grid.OnRowClick.HasDelegate)
        {
            await Grid.OnRowClick.InvokeAsync(row);
        }

        if (row != null && row.RowType == DataGridRowType.Default)
        {
            // foreach (var column in Grid._columns)
            foreach (var column in Grid._columns.ToList())
            {
                await column.OnRowClickAsync(row);
            }
        }
 }

[rpodevns]

I can replicate the collection was modified error with this code.

If await Task.Delay(100); is removed, the error does not occur. Selecting a row changes its internal state, and the await allows HandleOnRowClickAsync to execute, causing it to iterate over columns and rows that have already been modified.

<FluentDataGrid Items="@Products.AsQueryable()" ShowHover="true" SelectFromEntireRow="false" TGridItem="Product">
    <SelectColumn TGridItem="Product"
        SelectMode="DataGridSelectMode.Multiple"
        OnSelect="@(e => ProductSelected(e.Item, e.Selected))">
    </SelectColumn>
    <PropertyColumn Property="@(p => p.Name)" Title="Description" Align="Align.Start" />
</FluentDataGrid>

@code {
    record Product(int ProductId, string Name);

    List<Product> Products = new List<Product>
    {
        new Product(10895, "Smart product standard"),
    };

    async Task ProductSelected(Product product, bool selected)
    {
        await Task.Delay(100);
    }
}

[tokg-semler]

That is a good example. Does this classify the case as an error?

[rpodevns]

Does this classify the case as an error?

I'm not sure. It likely depends on whether the library permits await in a method handling OnSelect. Using ToArray() on the internal _columns List would be cleaner, but potential side effects would need further investigation.

I managed to get something working but requires a fire-and-forget Task with cancellation support in case the user clicks faster that your remote query executes.

<FluentDataGrid Items="@Products.AsQueryable()" ShowHover="true" SelectFromEntireRow="false" TGridItem="Product">
    <SelectColumn TGridItem="Product"
        SelectMode="DataGridSelectMode.Multiple"
        OnSelect="@(e => ProductSelected(e.Item, e.Selected))"
        Selectable="@(p => p.IsSelectable)">
    </SelectColumn>
    <PropertyColumn Property="@(p => p.Name)" Title="Description" Align="Align.Start" />
</FluentDataGrid>

@code {
    int renderCount = 0;
    CancellationTokenSource? _cts;

    public class Product
    {
        public int ProductId { get; }
        public string Name { get; }
        public bool IsSelectable { get; set; } = true;

        public Product(int productId, string name)
        {
            ProductId = productId;
            Name = name;
        }
    }

    List<Product> Products = new List<Product>
    {
        new Product(10895, "Smart product standard"),
        new Product(10944, "Smart product premium"),
        new Product(11203, "Cool product standard"),
        new Product(11205, "Cool product premium")
    };

    protected override void OnAfterRender(bool firstRender)
    {
        renderCount++;
        System.Diagnostics.Debug.WriteLine($"Render count: {renderCount}");
    }

    Task ProductSelected(Product product, bool selected)
    {
        System.Diagnostics.Debug.WriteLine($"Product: {product.ProductId}, IsSelected: {selected}");

        _cts?.Cancel();
        _cts = new CancellationTokenSource();
        CancellationToken token = _cts.Token;

        _ = Task.Run(async () =>
        {
            try
            {
                await Task.Delay(5000, token).ConfigureAwait(false);

                if (!token.IsCancellationRequested && product.ProductId == 10895)
                {
                    await InvokeAsync(() =>
                    {
                        var targetProduct = Products.FirstOrDefault(p => p.ProductId == 10944);
                        if (targetProduct != null)
                        {
                            targetProduct.IsSelectable = !selected;
                            System.Diagnostics.Debug.WriteLine($"Product 10944 IsSelectable = {targetProduct.IsSelectable}");
                            StateHasChanged();
                        }
                    });
                }
            }
            catch (TaskCanceledException) when (token.IsCancellationRequested)
            {
                System.Diagnostics.Debug.WriteLine("Previous task was cancelled.");
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine($"Unexpected exception: {ex}");
            }
        });

        return Task.CompletedTask;
    }
}

[tokg-semler]

@rpodevns I appreciate the time you put into this! I'll give your solution a try with my code. Thanks again! 😊

[rpodevns]

Sounds good @tokg-semler . Keep in mind that even if the async await is allowed in the OnSelect method, you'd still need to cancel previous requests -- with code similar to above -- if users are able to change selections faster than the remote code executes.