[Bug]: DataGridSelectColumn dataloading breaks on async methods

[Mr-Pearce]

Blazorise Version

1.6.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive Filterable>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Category )" Caption="Category" Editable
                          Data="employeeCategories" ValueField="(x) => ((EmployeeCategory)x).Id.ToString()" TextField="(x) => ((EmployeeCategory)x).Name" />

</DataGrid>


@code {
    private List<Employee> employeeList;
    public static List<EmployeeCategory> employeeCategories = new();
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeCategories.Clear();

        employeeCategories.Add(new EmployeeCategory() { Name = "test1", Id = Guid.NewGuid() }); // is loaded into the dropdown
        await Task.Run(async () => { await Task.Delay(1000); });
        employeeCategories.Add(new EmployeeCategory() { Name = "test2", Id = Guid.NewGuid() }); // isn't loaded into the dropdown

        await base.OnInitializedAsync();
    }
}

    public class Employee
    {
        public Guid Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public int Salary { get; set; }
        public EmployeeCategory Category { get; set; }
    }

    public class EmployeeCategory
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
    }

Steps to reproduce & bug description

Run the view.
Only test1 is shown in the drop down.
As it "loads" the page when you get into the first await
(here it is just a Task.Run we load the category's by an async REST Api call)

The "test" dropdown wont be loaded.

awaitable task execution is breaking the loading.
I already tried datagrid.Refresh()/Reload()/Statehaschanged but it didn't change anything.

What is expected?

Categorys aka. other SelectColumnItems should be loadable by awaitable calls.

What is actually happening?

Only synchron calls are working.

What browsers do you see the problem on?

Chrome

Any additional comments?

No response

[David-Moreira]

@Mr-Pearce
Most column parameters are taken only once at initialization time and not expected to be updated dynamically. This is also the case with the Data parameter.

We understand that for a parameter like this that can have the data initialized at a slightly later date, it would be great if it automatically update, we'll work on improving this specifically.

As a workaround in the meantime you can:

• Add a flag to render your column or even the full DataGrid only when the data is loaded
  i.e:

    @if (dataLoaded){
        <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Category )" Caption="Category" Editable
        Data="employeeCategories" ValueField="(x) => ((EmployeeCategory)x).Id.ToString()" TextField="(x) => ((EmployeeCategory)x).Name" />
    }

• Wrap your DataGrid inside a specialized component that takes in the Data as a parameter. Only render this specialized component when everything is ready... you can add loading screens, etc...