Browser is unresponsive after DataGrid loads

Hello,

I've searched the forum for the same issue that I'm having, but I did not find an answer to my problem. I have uploaded an example to reproduce my case.

My issue is that the pages render immediately, but it takes multiple seconds for the page to be responsive to any events. This can be demonstrated multiple ways including hovering over the rows which should highlight because of row selection, by hovering over icons that should change the mouse cursor or by trying to click the column filter buttons. And even after the page becomes responsive, it exhibits the same behavior if the column filter buttons are clicked.

What is even more strange is that I can make subtle changes to the DataGrid, like changing a column header, and the page will no longer be unresponsive.

My example contains 4 pages, 2 which demonstrate the issue and 2 which perform fine and all with the same data.

Example 1
The PaymentsPoorAuditCol.razor page performs poorly while the PaymentsGoodNoAuditCol.razor page performs fine and the only difference is that the "CreatedBy" column's header is changed from "Audit" to "Created By"

Example 2
The PaymentsPoorApprovalProps.razor page performs poorly while the PaymentsGoodApprProps.razor page performs fine. The difference between these 2 pages is that I replaced all properties containing the word "Approve" to "Appr" in both the DTO's property names and column headers.

The example is a Blazor Server application.

Please let me know if I can provide any further detail or answer any questions.

Thanks for your help.

RadzenDataGrid.Performance.zip (334.5 KB)

Here is what I see with your app:

I see also that you are using LoadData binding however none of the DataGrid operations like sorting, filtering and paging are applied properly - check our demos for reference on how to achieve this. If you need also vertical scrolling for the DataGrid and not for the page you will need to set height for the component.

Thanks for taking a look at the application.

As I stated in my initial post, the pages render immediately without issue, but if you stay on the "Poor" pages and try to use them, they are unresponsive for an unacceptable amount of time as you can see in my posted video.

I understand that I don't have the sorting, filtering and paging applied properly as I just quickly made a standalone app to show you the behavior I'm seeing in our real application that is utilizing Entity Framework and does have the sorting, filtering and paging working.

Thanks again and let me know what other details I can provide to resolve this issue.

dg-perf.zip (1.4 MB)

Try also the suggestion from my reply:

I've added a height for vertical scrolling in the grid and I experience the same behavior.

I also have vertical and horizontal scrolling and sorting, filtering and paging working in our real application and I experience the same non-responsive behavior.

Do you have any other suggestions? Are you able to reproduce the unresponsiveness when you run my application?

I’m afraid that I’m unable to replicate such problem. Are our demos working normally for you?

That is unfortunate as this is a show stopper for our application if we can't get our pages to be responsive after loading the data grids.

So when you first load the payments-poor-audit-col or the payments-poor-approval-props page you are able to select rows and/or click filter buttons without any issue? What if you click a filter button, does the page not take awhile for you to be able to enter a filter value?

I've been able to reproduce this on multiple machines and multiple browsers every single time the page loads.

Your demos are working and I have other pages that work as expected with different data.
Thanks again.

dg-perf2

Thanks for verifying. After we saw that you could not reproduce it we kept investigating and found that it is our LastPass extension that is causing the performance issue and it is specific to the filter input controls. If I turn off filtering then it behaves normally.

Our solution is to add our application URL as a Never URL to our LastPass settings.

Thanks again!