Slow render for around 2000 rows

Radzen.Blazor Components
1

We have radzen grid with only 10 columns and with 1098 records.
Grid also has a expand feature and each column has different templates defined.

Rendering takes longer time, We have checked that

  1. Data from API is fast, after data is reached on UI grid rendering takes long time
  2. I removed all template columns just kept one column then also rendering is slow
  3. Also After all data is rendered when we click on the expand it takes few seconds before it expand the row

For business reason we cannot use the paging

Requesting you to please check and provide suggestion

2

For such amount of rows only virtualization can help:

3

Thanks we applied the virtualization and it loads the records faster.
But when we click expand it is still slow, It takes few seconds before it shows exapnded screen.

4

If you have child DataGrid you can enable virtualization in the same way as in the parent DataGrid.

5

We do not have child DataGrid. we have screen which shows the details of the row
Screen has mostly lables and few textboxes

6

Here is what I see on our demo with 50K records, reworked with virtualization and details template:

image
image1920×1080 458 KB

dg-virt-50k

7

Thanks will check on this

8

I tried your code and edited it same your demo

  1. When i kept 50K my browser crashed
  2. Then i changed it to 2K it rendered but initial load took a while same as my code which we would like to avoid
  3. Also when i click expand it takes few seconds to open and close
  4. Even filtering and clear filtering is also taking a long
  5. Observation is JUST a FYI when i added AllowPaging="true" it works very fast

Below is code

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.Advanced"
    AllowGrouping="true" AllowSorting="true" PageSize="5" AllowVirtualization="true" PagerHorizontalAlign="HorizontalAlign.Left"
    Data="@data" TItem="OrderAndDetail" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or" ShowPagingSummary="true"
    IsLoading=@isLoading Sort="@ShowLoading" Page="@ShowLoading" Group="@ShowLoading" Filter="@ShowLoading">
    <Columns>
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Title="Photo" Frozen="true" Sortable="false" Filterable="false" Width="80px" TextAlign="TextAlign.Center">
            <Template Context="data">
                <RadzenImage Path="@data.Photo" class="rz-gravatar" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="FirstName" Title="First Name" Frozen="true" Width="160px" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="LastName" Title="Last Name" Width="160px" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="Title" Title="Job Title" Width="200px" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="TitleOfCourtesy" Title="Title" Width="120px" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="OrderID" Title="OrderID" Width="160px" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="ProductID" Title="ProductID" Width="160px" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="UnitPrice" Title="UnitPrice" Width="160px" FormatString="{0:C}" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="Quantity" Title="Quantity" Width="160px" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="Discount" Title="Discount" Width="160px" FormatString="{0:P}" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="CustomerID" Title="CustomerID" Width="160px" />
        <RadzenDataGridColumn TItem="OrderAndDetail" Property="OrderDate" Title="OrderDate" Width="160px" FormatString="{0:d}" />
    </Columns>
     <Template>
        <RadzenLabel Text="@context.FirstName" /><RadzenTextBox @bind-Valie = "@context.FirstName" />
        <RadzenLabel Text="@context.LastName" /><RadzenTextBox @bind-Valie = "@context.LastName" />
    </Template>
</RadzenDataGrid>

@code {
    IQueryable<OrderAndDetail> data;

    bool isLoading = false;

    async Task ShowLoading()
    {
        isLoading = true;

        await Task.Yield();

        isLoading = false;
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        await ShowLoading();

        IQueryable<OrderAndDetail> data1  = from o in dbContext.Orders.Take(20)
               from od in dbContext.OrderDetails
               from e in dbContext.Employees
               select new OrderAndDetail()
               {
                    OrderID = od.OrderID,
                    ProductID = od.ProductID,
                    UnitPrice = od.UnitPrice,
                    Quantity = od.Quantity,
                    Discount = od.Discount,
                    CustomerID = o.CustomerID,
                    OrderDate = o.OrderDate,
                    EmployeeID = e.EmployeeID,
                    Photo = e.Photo,
                    FirstName = e.FirstName,
                    LastName = e.LastName,
                    Title = e.Title,
                    TitleOfCourtesy = e.TitleOfCourtesy
               };
                 data = data1.Take(2000);
    }

    public class OrderAndDetail
    {
        public int OrderID { get; set; }
        public int ProductID { get; set; }
        public double? UnitPrice { get; set; }
        public short? Quantity { get; set; }
        public float? Discount { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public int? EmployeeID { get; set; }
        public string Photo { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Title { get; set; }
        public string TitleOfCourtesy { get; set; }
    }
}
9

There is no such setting in the code I’ve posted. I’m afraid I don’t know why your browser is crashing, I’ve tested this on relatively old machine.

10

Yes, right there is no AllowPaging="true" in your code.
When i remove AllowPaging="true" code is slower for 2000 records and crashes for 50K records. This is just i tried

11

You need to set the height of RadzenDataGrid when virtualization is enabled.

<RadzenDataGrid style="height: 400px;" AllowVirtualization="true">

Then the pasted code would behave as expected.
performance

1 Like
12

Amazing @korchev Thanks it worked like a charm.

13

@korchev one question as this works well, i want to set the height of the grid dynamically depending upon size of screen/monitor, can you please suggest how to do that.

Reason - If the user has bigger monitor height 400px or 650px is even smaller for them we need 1000px but it is too large for smaller screen.

14