Completed
Last Updated: 17 Jan 2022 18:59 by ADMIN
Release 3.0.0
BENAISSA
Created on: 25 Aug 2021 18:26
Category: Grid
Type: Bug Report
7
Grid Freezes or Lags when Filtering with Virtual Scrolling

Grid virtual scrolling will freeze in the following scenario:

  1. Open https://demos.telerik.com/blazor-ui/grid/virtual-scrolling
  2. Scroll to the lower part of the Grid
  3. Filter any column, so that the number of items becomes less than the current scroll position
  4. The Grid will show "no records to display" and row placeholders, even if there are items to display

 

4 comments
ADMIN
Dimo
Posted on: 01 Nov 2021 07:44

Hello Matthias,

Thanks for the additional information. I believe this scenario boils down to the same problem that is related to how the virtual Grid handles a reduced amount of data.

I have included this scenario in our internal GitHub issue, so that it is tested with the fix as well. On a side note, the issue priority is now the highest, so I expect our devs to include it in their short-term to-do list soon.

Regards,
Dimo
Progress Telerik

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
Matthias
Posted on: 01 Nov 2021 07:19

Simple steps to reproduce this bug without using the internal filter:

* TelerikGrid with many rows (300-500 will do fine)

* ScrollMode="@GridScrollMode.Virtual"

* Scroll all the way down to the end of the list

* Change the number of displayed rows to a small amount (e.g. display a filtered subset of the original rows)

-->

* The list displays item placeholders and flickers

* The list displays the "No records available." text below the flickering placeholders

* Lots and lots of Blazor SignalR messages are exchanged with the server

* The scrollbar thumb slowly grows and stays at the bottom of the scrollbar

* finally (after a lag depending on the row count) the correct end result is displayed, scrollbar thumb still at the end

This takes

  7 s for 500 rows
  14 s for 1000 rows
  137 s (!) for 10000 rows

so it seems to be linear.


Regards
Matthias

Code snippet to reproduce:

@page "/test"

<h1>Test TelerikGrid</h1>

<button @onclick="ToggleFilter">Toggle filter</button>
<br />
<br />
<p>@CurrentState</p>

<TelerikGrid Data=@CurrentGridData
             ScrollMode="@GridScrollMode.Virtual"
             Height="600px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu">
   <GridColumns>
      <GridColumn Field="Id" />
      <GridColumn Field="Name" Title="First Name" />
      <GridColumn Field="LastName" Title="Last Name" />
      <GridColumn Field="HireData" Width="200px">
         <Template>
            @((context as SampleData).HireDate.ToString("MMMM dd, yyyy"))
         </Template>
      </GridColumn>
   </GridColumns>
</TelerikGrid>

@code { public class SampleData { public int Id { get; set; } public string Name { get; set; } public string LastName { get; set; } public DateTime HireDate { get; set; } } public List<SampleData> CurrentGridData { get; private set; } public string CurrentState => _filterActive ? $"Filter active: {CurrentGridData.Count} rows" : $"All data displayed: {CurrentGridData.Count} rows - scroll down to the end and toggle the filter to see the problem"; private List<SampleData> _gridData; privatebool _filterActive; protected override void OnInitialized() { _gridData = Enumerable.Range(1, 500).Select(x => new SampleData { Id = x, Name = $"name {x}", LastName = $"Surname {x}", HireDate = DateTime.Now.Date.AddDays(-x) }).ToList(); CurrentGridData = _gridData; } private void ToggleFilter() { _filterActive = !_filterActive; CurrentGridData = _filterActive ? _gridData.Skip(100).Take(25).ToList() : _gridData; } }

ADMIN
Hristian Stefanov
Posted on: 27 Oct 2021 11:45

Hi all,

We've found a possible workaround for the time being.

You can avoid this problematic behavior by using the OnStateChanged event on the Grid and setting "args.GridState.Skip" to "0" upon filtering.

<TelerikGrid Data="@MyData" Height="460px" RowHeight="60" Sortable="true" PageSize="10" FilterMode="@GridFilterMode.FilterMenu" ScrollMode="@GridScrollMode.Virtual"
             OnStateChanged="@((GridStateEventArgs<SampleData> args) => OnStateChangedHandler(args))" @ref="GridRef">
    <GridColumns>
        <GridColumn Field="Id" />
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<SampleData> GridRef { get; set; }

    async void OnStateChangedHandler(GridStateEventArgs<SampleData> args)
    {
        Console.WriteLine(args.PropertyName);

        if (args.PropertyName == "FilterDescriptors")
        {
            args.GridState.Skip = 0;

            await GridRef.SetState(args.GridState);
        }
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 10000).Select(x => new SampleData
    {
        Id = x,
    });

    public class SampleData
    {
        public int Id { get; set; }
    }
}

You can extend this example to cover your application needs.

Regards,
Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Dimo
Posted on: 25 Aug 2021 18:36

Hello Benaissa,

Thank you for reporting this issue. It is now confirmed as a bug and we have added it to our backlog. You will receive status updates automatically.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.