This is a migrated thread and some comments may be shown as answers.

Grid with custom cells that have some expensive calculations doesn't call onPageChange sometimes

4 Answers 15 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alexey
Top achievements
Rank 1
Veteran
Alexey asked on 23 Aug 2020, 01:14 PM

I have the grid set up with a custom cell that has some expensive calculation performed when the cell component init. Usually, when I do scroll it takes some time to be rendered, that's OK. But sometimes I notice the grid doesn't call onPageChange method and the page becomes blank.

I created an example of that. It quite difficult reproduce, although In my real set up I reproduce it more ofter. So I recorded a screencast. Watch it from the 30th second. You can see sometimes it's stacking until I do scroll again
https://take.ms/mXO4h
https://stackblitz.com/edit/react-6dfm1k?devtoolsheight=33&file=app/main.jsx

 

Also I created an issue on github

https://github.com/telerik/kendo-react/issues/709

4 Answers, 1 is accepted

Sort by
0
Alexey
Top achievements
Rank 1
Veteran
answered on 23 Aug 2020, 01:55 PM
I made small investigation and it looks like it happens when VirtualScroll.scrollSyncing set true
0
Stefan
Telerik team
answered on 24 Aug 2020, 01:45 PM

Hello, Alexey,

Thank you for the video and for the example.

I have marked the issue in GitHub and the team will look at it and investigate further.

In the meantime, could you please share the calculations that are made for each cell as in general we do not recommend performing heavy calculations inside the cells, as they will be executed hundreds of times.

If you share them, we may be able to suggest a different solution that removes these calculations from each cell, which will prevent the issue and make the application faster.

Regards,
Stefan
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/.

0
Alexey
Top achievements
Rank 1
Veteran
answered on 24 Aug 2020, 02:13 PM

Well, they are not calculations, but some kind of complex components. I use reakit's composite in order to have cells wide navigations. So I have to wrap each kind of cells with CompositeItems, that registers it's ref to be able to navigate to the previous/above/next/bellow cell. I don't do anything complex and not memoized in render method

 

https://reakit.io/docs/composite/

0
Stefan
Telerik team
answered on 25 Aug 2020, 09:31 AM

Hello, Alexey,

Thank you for the clarification.

Is it possible to share an example of this usage, as this will help us inspect it to see if it can be optimized?

The reason we are asking is that, as the scroll event is async by default and Javascript is a single-threaded language, sometimes with complex operations, the browser may not correctly emit all scroll data. This is why we want to help speeding up the application, as fixing the current issue is not fully in our control and may take longer to resolve. 

Regards,
Stefan
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/.

Tags
General Discussions
Asked by
Alexey
Top achievements
Rank 1
Veteran
Answers by
Alexey
Top achievements
Rank 1
Veteran
Stefan
Telerik team
Share this question
or