Bug DataGrid not Refreshing after setting the Data Parameter

[vertonghenb]

The DataGrid does not update when setting the Data Parameter.

Quite important since sometimes you want to add / remove items based on the new list.
@pwelter34

This does not work, since the DataGrid is not updated.

private async Task DoesNotWork()
{
    People = new List<Person>();
    await InvokeAsync(() => DataGrid.RefreshAsync(false));
}

This works but we have to re-use the Data parameter.

private async Task ResetItems()
{
    People = new List<Person>();
    await InvokeAsync(() => DataGrid.RefreshAsync(false));

    People.Clear();
    People.Add(new Person("Ben", "Vertonghen", 29, "Aalst"));
    await InvokeAsync(() => DataGrid.RefreshAsync(false));
}

Example

Copy-paste this code in the Basic.razor component.

@using Sample.Core.Services
@using Sample.Core.Models
<h3>Basic</h3>

<button class="btn btn-secondary" @onclick="@(() => DataGrid.SortByAsync("Id"))">Sort By Id</button>
<button class="btn btn-secondary" @onclick="@(() => DataGrid.Pager.Page = 5)">Go to page 5</button>
<button class="btn btn-secondary" @onclick="@(() => DataGrid.Pager.PageSize = 25)">Page Size 25</button>
<button class="btn btn-secondary" @onclick="@ResetItems">Reset Items</button>
<button class="btn btn-secondary" @onclick="@DoesNotWork">Does not work (you need to click twice)</button>


<DataGrid Data="People" class="table table-hover" Selectable="true" @bind-SelectedItems="Selected" @ref="DataGrid">
    <DataColumns>
        <DataColumn TItem="Person" Property="p => p.Id" Width="70px">
            <Template Context="item">
                <a href="#" class="d-block" title="@item.FullName">@item.Id</a>
            </Template>
        </DataColumn>
        <DataColumn TItem="Person" Property="p => p.FirstName" SortIndex="1" />
        <DataColumn TItem="Person" Property="p => p.LastName" SortIndex="0" />
        <DataColumn TItem="Person" Property="p => p.Score" Width="100px" Style="@SoreStyle" />
        <DataColumn TItem="Person" Property="p => p.Location" Sortable="false" />
        <DataColumn TItem="Person" Property="p => p.Birthday" Format="d" />
    </DataColumns>
    <DataPagination Context="grid">
        <DataPager PageSize="10" />
        <DataSizer />
        <div>@grid.Pager.StartItem - @grid.Pager.EndItem of @grid.Pager.Total</div>
    </DataPagination>
</DataGrid>

<div class="mt-5">
    <h4>Selected</h4>
    <ul>
        @foreach (var person in Selected)
        {
            <li>@person.FullName</li>
        }
    </ul>
</div>

@code {
    public ICollection<Person> People { get; set; }

    public IEnumerable<Person> Selected { get; set; } = new List<Person>();

    private DataGrid<Person> DataGrid { get; set; }

    protected override void OnInitialized()
    {
        People = Data.GeneratePeople(200).ToList();
    }

    private async Task ResetItems()
    {
        People.Clear();
        People.Add(new Person("Ben", "Vertonghen", 29, "Aalst"));
        await InvokeAsync(() => DataGrid.RefreshAsync(false));
    }

    private async Task DoesNotWork()
    {
        People = new List<Person>();
        await InvokeAsync(() => DataGrid.RefreshAsync(false));
    }

    protected string SoreStyle(Person person)
    {
        if (person.Score > 75)
            return "background-color: #dc3545";
        if (person.Score > 50)
            return "background-color: #ffc107";

        return null;
    }

}