radzenhq / radzen-blazor

Radzen Blazor is a set of 90+ free native Blazor UI components packed with DataGrid, Scheduler, Charts and robust theming including Material design and FluentUI.
https://www.radzen.com
MIT License
3.42k stars 763 forks source link

Radzen DataGrid <Shift>+Click on horizontal scroll bar freezes in Chrome and Edge #1361

Open MikeWilliams-UK opened 6 months ago

MikeWilliams-UK commented 6 months ago

Describe the bug We are using your DataGrid and have come across an issue when it is used in either Chrome or Edge. Firefox has no issue.

When you have a grid that has advanced filtering turned on and the number of columns is such that the horizontal scroll bar shows, when you <Shift>+Click on the scroll bar the browser "freezes" for a noticable time on most clicks.

To Reproduce Steps to reproduce the behavior:

  1. Using either Chrome or Edge run the demo at https://blazor.radzen.com/datagrid-column-resizing
  2. Click on 'Edit Source' button
  3. Scroll down to 'line 7'
  4. Add the following parameters AllowFiltering="true" FilterMode="FilterMode.Advanced" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
  5. Click on 'Run button
  6. <Shift>+Click to the right of the horizontal scroll bar's grab handle

Actual behavior Significant delays are seen between the mouse click and the grid showing different columns.

Expected behavior No delays are seen between the mouse click and the grid showing different columns.

Screenshots image

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

RobbeKR commented 2 months ago

We've had similar problems using RadzenDataGrid in our project. It happens specifically when selecting an element in the grid, and then holding down any button on your keyboard.

It's especially noticeable in a grid with a lot of columns and thus, a horizontal scroll bar. If you select a row and then try to use shift + scroll on such a grid, it immediately starts stuttering. This demo has an easy way to reproduce this: https://blazor.radzen.com/datagrid-dynamic?theme=standard

Apparently this happens due to the onkeydown event that was added to the RadzenDataGrid component in version 4.23.0. When you hold a key down, it triggers StateHasChanged() a lot of times in quick succession, which naturally causes a grid with a lot of columns to stutter.

I've been able to fix it in our project by using a modified implementation of the ShouldRender() override in this issue. By returning my own bool in said method and setting it to false in an override of the OnKeyDown of the RadzenDataGrid component, I can control when I want the component to re-render and when I don't. I've also found some documentation about handling events without state changes. Using EventUtil.AsNonRenderingEventHandler() when calling a method from the event seems to avoid the re-render entirely. Perhaps this could be used in a setting in the DataGrid somewhere, for people who want to avoid re-renders due to that onkeydown?