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

5 posts, 0 answers
  1. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 23 Aug 2020 Link to this post

    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

  2. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 23 Aug 2020 Link to this post

    I made small investigation and it looks like it happens when VirtualScroll.scrollSyncing set true
  3. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 24 Aug 2020 Link to this post

    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/.

  4. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 24 Aug 2020 in reply to Stefan Link to this post

    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/

  5. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 25 Aug 2020 Link to this post

    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/.

Back to Top