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

[MikeWilliams-UK]

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

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Browser Chrome Version 121.0.6167.140 (Official Build) (64-bit), Edge Version 121.0.2277.98 (Official build) (64-bit)
• Version See above

Additional context Add any other context about the problem here.

[RobbeKR]

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?

[tvanneuville]

We are also experiencing issues in our project with onkeydown events on datagrids.

Datagrids starts lagging when any key is pressed.

[max-meng1]

Had same issue, temp fixed by extending RadzenDataGrid and ignored rendering when ctrl key pressed

public class CustomDataGrid<TItem> : RadzenDataGrid<TItem>
    {
        private bool shouldRender = true;

        protected override bool ShouldRender()
        {
            if (!shouldRender) 
            {
                shouldRender = true;
                return false;
            }

            return base.ShouldRender();
        }

        protected override Task OnKeyDown(KeyboardEventArgs args)
        {
            if (args.CtrlKey)
            {
                shouldRender = false;
            }

            return base.OnKeyDown(args);
        }
    }