Filtering and sorting taking longer than expected on first use

Radzen.Blazor Components
1

Hello,

I've checked some of the topics regarding this issue but could not find the answer to my problem. As the title states, I have been struggling with the performance of the filtering and sorting. The datagrid has now 2000 records and takes about 7-8s to filter/order on the first time, then it works as fast as a rocket. I have checked also the performance page in the docs but could not get anything useful either.

I would also like to clarify that the page rendering is quite fast so the records seem not to be the problem.

I will add the code snippet (.razor and .razor.cs).

<RadzenDataGrid TItem="Recibo" Responsive="true" Data="@RecibosPendientes" AllowPaging="true" PageSize="10" AllowFiltering="true" AllowSorting="true" PagingSummaryFormat="{2} recibos" ShowPagingSummary="true" 
                AllowAlternatingRows="true" AllowFilterDateInput="false" ColumnWidth="150px" PagerAlwaysVisible="true" PageNumbersCount="3" FilterMode="FilterMode.Advanced"
                PrevPageTitle="Página anterior" PrevPageAriaLabel="Retroceder página"AndOperatorText="Y" ApplyFilterText="Aplicar" ClearFilterText="Borrar" ContainsText="Contiene" DoesNotContainText="No contiene" EndsWithText="Termina en..." 
                EqualsText="Igual a" FilterText="Filtro" FirstPageTitle="Primera página" GreaterThanOrEqualsText="Mayor o igual que" GreaterThanText="Mayor que" IsEmptyText="Está vacío" IsNotEmptyText="No está vacío" IsNotNullText="No es nulo" 
                IsNullText="Es nulo" LastPageTitle="Última página" LessThanOrEqualsText="Menor o igual que" LessThanText="Menor que" LogicalOperatorArialLabel="Filtro de operador lógico" NextPageAriaLabel="Avanzar página" NextPageTitle="Siguiente página" 
                NotEqualsText="No es igual a" OrOperatorText="O" PageAriaLabelFormat="Ir a página {0}" PageSizeText="Registros por página" StartsWithText="Empieza por" PageTitleFormat="Página {0}" ShowMultiColumnSortingIndex="true" 
                AllowMultiColumnSorting="true" RowSelect="@ClickOnRow" >
    <Columns>
        <RadzenDataGridColumn TItem="Recibo" Title="Fecha" Property="Fecha" FormatString="{0:d}" SortOrder="SortOrder.Ascending"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="NRecibo" Title="Nº recibo"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Title="Nº póliza" Property="NPoliza"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="NIFAgente" Title="NIF Agente"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="Tomador" Title="Tomador"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="Producto" Title="Producto"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="Importe" Title="Importe">
            <Template Context='data'>
                <RadzenRow>
                    @data.Importe
                    <RadzenText Text="€" Style="margin-left: -10px" />
                </RadzenRow>
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="Estado" Title="Estado" Visible="true">
            <Template Context='data'>
                @if (data.Estado == 1)
                {
                    <RadzenIcon Icon="done" Style="color:green">
                    </RadzenIcon>
                }
                else if (data.Estado == 2)
                {
                    <RadzenIcon Icon="close" Style="color:red">
                    </RadzenIcon>
                }
            </Template>

        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

        public IList<Recibo> RecibosPendientes { get; set; }

        protected override async Task OnInitializedAsync()
        {
            RecibosPendientes = new List<Recibo>();
            Random random = new Random();
            string NombresProductos = "Vida,Salud,Hogar,Accidentes,Mascotas,Decesos,Autos,Ahorro,Legal";
            string  NombreGente= "Pedro Martinez,Juan Lopez,Maria Sala,Silvia Rodriguez,Paula Mendoza,Javier Rosales";
            string[] Prods = NombresProductos.Split(new char[] { ','}, StringSplitOptions.RemoveEmptyEntries);
            string[] Gente = NombreGente.Split(new char[] { ','}, StringSplitOptions.RemoveEmptyEntries);

            for (int i = 0; i < 2000; i++) {
                RecibosPendientes.Add(
                    new Recibo()
                    {
                        Fecha = new DateTime(random.Next(2021, 2024), random.Next(1, 13), random.Next(1, 29)),
                        NRecibo = random.Next(1000000),
                        NPoliza = random.Next(1000000),
                        NIFAgente = Convert.ToBoolean(random.Next(2)),
                        Tomador = Gente[random.Next(Gente.Length)],
                        Producto = Prods[random.Next(Prods.Length)],
                        Importe = random.Next(1, 101) + (decimal)random.Next(100)/100,
                        Estado = random.Next(1, 3),
                    });
            }  
        }

        protected async System.Threading.Tasks.Task ClickOnRow(Recibo args)
        {
            NavigationManager.NavigateTo($"/");
        }
    }
}

The List "RecibosPendientes" is defined in a file Recibos.cs and only has those fields.

I hope you could help me solve this problem or at least guide me in the correct direction.

Thanks in advance.

2

Hi @Naress,

Please make sure you are using the right forum category (which you probably aren't at the moment).

We also need a runnable code snippet that we can test. You can use the online demos to prepare one - simply click the Edit source button and modify the demo until it mimics your issue.

3

Hello @korchev,

I am sorry about the category, please tell me which one should I select and I will change it as soon as possible.

Also I add the code I wrote to test the problem.

<RadzenDataGrid TItem="Recibo" Responsive="true" Data="@RecibosPendientes" AllowPaging="true" PageSize="10" AllowFiltering="true" AllowSorting="true" PagingSummaryFormat="{2} recibos" ShowPagingSummary="true" 
                AllowAlternatingRows="true" AllowFilterDateInput="false" ColumnWidth="150px" PagerAlwaysVisible="true" PageNumbersCount="3" FilterMode="FilterMode.Advanced"
                PrevPageTitle="Página anterior" PrevPageAriaLabel="Retroceder página"AndOperatorText="Y" ApplyFilterText="Aplicar" ClearFilterText="Borrar" ContainsText="Contiene" DoesNotContainText="No contiene" EndsWithText="Termina en..." 
                EqualsText="Igual a" FilterText="Filtro" FirstPageTitle="Primera página" GreaterThanOrEqualsText="Mayor o igual que" GreaterThanText="Mayor que" IsEmptyText="Está vacío" IsNotEmptyText="No está vacío" IsNotNullText="No es nulo" 
                IsNullText="Es nulo" LastPageTitle="Última página" LessThanOrEqualsText="Menor o igual que" LessThanText="Menor que" LogicalOperatorArialLabel="Filtro de operador lógico" NextPageAriaLabel="Avanzar página" NextPageTitle="Siguiente página" 
                NotEqualsText="No es igual a" OrOperatorText="O" PageAriaLabelFormat="Ir a página {0}" PageSizeText="Registros por página" StartsWithText="Empieza por" PageTitleFormat="Página {0}" ShowMultiColumnSortingIndex="true" 
                AllowMultiColumnSorting="true">
    <Columns>
        <RadzenDataGridColumn TItem="Recibo" Title="Fecha" Property="Fecha" FormatString="{0:d}"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="NRecibo" Title="Nº recibo"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Title="Nº póliza" Property="NPoliza"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="NIFAgente" Title="NIF Agente"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="Tomador" Title="Tomador"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="Producto" Title="Producto"></RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="Importe" Title="Importe">
            <Template Context='data'>
                <RadzenRow>
                    @data.Importe
                    <RadzenText Text="€" Style="margin-left: -10px" />
                </RadzenRow>
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Recibo" Property="Estado" Title="Estado" Visible="true">
            <Template Context='data'>
                @if (data.Estado == 1)
                {
                    <RadzenIcon Icon="done" Style="color:green">
                    </RadzenIcon>
                }
                else if (data.Estado == 2)
                {
                    <RadzenIcon Icon="close" Style="color:red">
                    </RadzenIcon>
                }
            </Template>

        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

@code{
public IList<Recibo> RecibosPendientes { get; set; }

    protected override async Task OnInitializedAsync()
    {
        RecibosPendientes = new List<Recibo>();
        Random random = new Random();
        string NombresProductos = "Vida,Salud,Hogar,Accidentes,Mascotas,Decesos,Autos,Ahorro,Legal";
        string  NombreGente= "Pedro Martinez,Juan Lopez,Maria Sala,Silvia Rodriguez,Paula Mendoza,Javier Rosales";
        string[] Prods = NombresProductos.Split(new char[] { ','}, StringSplitOptions.RemoveEmptyEntries);
        string[] Gente = NombreGente.Split(new char[] { ','}, StringSplitOptions.RemoveEmptyEntries);
            for (int i = 0; i < 2000; i++) {
                RecibosPendientes.Add(
                    new Recibo()
                    {
                        Fecha = new DateTime(random.Next(2021, 2024), random.Next(1, 13), random.Next(1, 29)),
                        NRecibo = random.Next(1000000),
                        NPoliza = random.Next(1000000),
                        NIFAgente = Convert.ToBoolean(random.Next(2)),
                        Tomador = Gente[random.Next(Gente.Length)],
                        Producto = Prods[random.Next(Prods.Length)],
                        Importe = random.Next(1, 101) + (decimal)random.Next(100)/100,
                        Estado = random.Next(1, 3),
                    });
            }  
        }

    public class Recibo
    {
    public DateTime Fecha { get; set; }
    public int NRecibo { get; set; }
    public int NPoliza { get; set; }
    public Boolean NIFAgente { get; set; }
    public string Tomador { get; set; }
    public string Producto { get; set; }
    public decimal Importe { get; set; }
    public int Estado { get; set; }
    }
}
4

Here is what I see when I test your page here.

performance
Everything looks and feels instant.

5

I have tested also my page in your datagrid component by pasting the code. I have noticed it takes like 5 seconds to execute but works smooth.

On the other hand my code in my app executes instantly but takes long to filter. This is what I see with the exact same code you used in your web.

Example

6

There is an initial delay to run custom code which is unrelated to the demo. A few resources need to download for the compilation to happen.

I don't see you filtering. Do you mean sorting? Is your app Blazor server or web assembly? In blazor server scenarios there could be delays caused by latency. Also are you testing with the exact sample code provided or is your RadzenDataGrid populated in some other way (from a database etc).?

7

There is an initial delay to run custom code which is unrelated to the demo. A few resources need to download for the compilation to happen.

Oh I understand now the delay in your web, thanks!

I don't see you filtering. Do you mean sorting? Is your app Blazor server or web assembly? In blazor server scenarios there could be delays caused by latency. Also are you testing with the exact sample code provided or is your RadzenDataGrid populated in some other way (from a database etc).?

Regarding to the filtering/sorting, yes it is an ordering action but the delay its the same in both cases. My app is web assembly on .net7. The video I posted is the exact same code I posted in the previous comment.

8

That's odd indeed. Our demo application is web assembly with .net 8. You can try upgrading to .net 8 to see if this would have any effect. You can also try running in production mode to see if this makes a difference. Sometimes debug information could introduce initial delays.

9

After trying the same code in a .net8 application I realized that it takes 5s more or less to load the page but the filter/sort works instantly so the time it takes to be useful its the same. But if the loading process takes longer it can be handled by showing other items first then when the datagrid works it could be used.

However, my application cannot be upgraded to .net8 since it is only a client side application even if it is webassembly. If there is a workaround you know I'll be happy to try it. If there is no solution I'll try to get one.

10

You can create a standalone .NET 8 web assembly application too.

11

Hello @korchev,

After a couple of days trying solutions, creating a new .net8 web assembly standalone app didn't fix this. However, I have noticed that a service call to microsoft graph was delaying this action.

It is complex to explain by text but, this code:

builder.Services.AddGraphClient(baseUrl, scopes);

makes the filter/sort work slowly. In fact, when entering the page I showed you in the video, deleting the cache makes the filter and sort work instantly.

I don't know if this is because the service makes a call to a server and never finishes until the sort/filter is executed the first time and breaks that action or what can be the problem. I'm looking into ways to fix this. If you know any similar case I'll be glad to read about it.