Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MikeWilliams-UK opened this issue Feb 6, 2024 · 3 comments

Comments

@MikeWilliams-UK
Copy link

MikeWilliams-UK commented Feb 6, 2024

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):

  • 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
Copy link

RobbeKR commented Jun 21, 2024

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
Copy link

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

Datagrids starts lagging when any key is pressed.

@max-meng1
Copy link

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);
        }
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants