[DataGrid] Setting initial filter with async OnInitialized does not work

Radzen.Blazor Components
1

I have a weird issue with initial filtering on a DataGrid. When an async method is being used in the OnInitializedAsync override, then the initial filtering on the grid does not work. When you remove that async method (and so the OnInitializedAsync override runs synchronously) it works again.

In my use case I really need the async version since I am loading data from the database, so the synchronous method is not an option.

Below I have a minimum working example that demonstrates the issue. I'm using the latest Radzen version.

@page "/test"

<div style="width: 600px;">
    <RadzenDataGrid Data="people" AllowFiltering=true FilterMode=FilterMode.Simple @ref=grid>
        <Columns>
            <RadzenDataGridColumn Property="Id" Title="Id" Width="50px" />
            <RadzenDataGridColumn Property="Name" Title="Name" />
            <RadzenDataGridColumn Property="IsActive" Title="Is Active?" TextAlign="TextAlign.Center" Width="100px">
                <Template Context="person">
                    <RadzenCheckBox @bind-Value=person.IsActive Disabled=true />
                </Template>
            </RadzenDataGridColumn>
        </Columns>
    </RadzenDataGrid>
</div>

@code {
    private List<Person> people = [];
    private RadzenDataGrid<Person> grid;

    protected override async Task OnInitializedAsync()
    {
        //Comment line below to make it work again.
        await Task.Delay(1000);

        people = new List<Person>
        {
            new Person { Id = 1, Name = "John Doe", IsActive = true },
            new Person { Id = 2, Name = "Jane Smith", IsActive = false },
            new Person { Id = 3, Name = "Alice Johnson", IsActive = true }
        };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var column = grid.ColumnsCollection.Where(c => c.Property == "IsActive").FirstOrDefault();

            if (column != null)
            {
                column.SetFilterValue(false);
                column.SetFilterOperator(FilterOperator.Equals);
                await grid.Reload();
            }
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    class Person
    {
        public int Id { get; set; }
        public string? Name { get; set; }
        public bool IsActive { get; set; }
    }
}
2

This is due to the fact that binding comes late most probably - try to use LoadData instead to retrieve async data and bind the DataGrid.

3

Do you mean like this? Because that also doesn't work :frowning:

@page "/test"

<div style="width: 600px;">
    <RadzenDataGrid Data="people" LoadData=OnLoadData AllowFiltering=true FilterMode=FilterMode.Simple @ref=grid>
        <Columns>
            <RadzenDataGridColumn Property="Id" Title="Id" Width="50px" />
            <RadzenDataGridColumn Property="Name" Title="Name" />
            <RadzenDataGridColumn Property="IsActive" Title="Is Active?" TextAlign="TextAlign.Center" Width="100px">
                <Template Context="person">
                    <RadzenCheckBox @bind-Value=person.IsActive Disabled=true />
                </Template>
            </RadzenDataGridColumn>
        </Columns>
    </RadzenDataGrid>
</div>

@code {
    private List<Person> people = [];
    private RadzenDataGrid<Person> grid;

    protected override async Task OnInitializedAsync()
    {
        
    }

    private async Task OnLoadData()
    {
        // Comment line below to make it work again.
        await Task.Delay(1000);

        people = new List<Person>
        {
            new Person { Id = 1, Name = "John Doe", IsActive = true },
            new Person { Id = 2, Name = "Jane Smith", IsActive = false },
            new Person { Id = 3, Name = "Alice Johnson", IsActive = true }
        };

        var column = grid.ColumnsCollection.Where(c => c.Property == "IsActive").FirstOrDefault();

        if (column != null)
        {
            column.SetFilterValue(false);
            column.SetFilterOperator(FilterOperator.Equals);
            await grid.Reload();
        }
    }

    class Person
    {
        public int Id { get; set; }
        public string? Name { get; set; }
        public bool IsActive { get; set; }
    }
}
4

There are multiple problems with this code. There is no Count defined, Reload() is called in LoadData, etc. - I strongly suggest you to check our demos for reference on how to use LoadData event.

5

That was kind of on purpose, since I had hoped there was another approach to the one displayed on the demo page. That one seems like a lot of extra code just to make a filter working on initialization. I think I'm just gonna build a custom filtering then. Thanks for the reply.