JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid CPU goes over 100% and page freezes when navigating large datasets in TreeGrid

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #109018
    mydoal
    Participant

    When scrolling and navigating datasets of hundreds of records with a 5 level Angular TreeGrid, the cpu goes above 100% and causes the page to freeze. High cpu is measured also even when navigating the TreeGrid in the show case.

    It seems that there might be a design flaw with the angular change detection during runtime that does too many checks (e.g. nodes that are scrolled off screen or that are not visible).

    This prevents us from using the component alltogether.

    Is this a know issue? Is there a solution or workaround for this?

    Thank you in advance.

     

     

    #109019
    ivanpeevski
    Participant

    Hi mydoal,

     

    When working with large datasets, we recommend using the TreeGrid in Virtual Mode instead. We have an example in our demos section – https://www.htmlelements.com/angular/demos/grid/virtual-tree-grid/

     

    In Virtual Mode, the child rows are generated through a callback whenever a row is expanded. In this way, the grid doesn’t need to process all records at once and it considerably improves performance.

     

    Ivan Peevski
    Smart UI Team
    https://www.htmlelements.com

    #109026
    mydoal
    Participant

    Thank you for your prompt reply. Just to make sure before we continue to do more tests with the virtual tree grid, in case we theoretically expand all the nodes and scroll the expanded tree – will it have the same performance “problem” as the regular TreeGrid?

    #109027
    Markov
    Keymaster

    Hi,

    It would be good, if you provide a stackblitz sample showing the behavior so we would be able to see, if there is some configuration issue, too. For example, if the height is auto and you load hundreds of items, the component will have to create ui element for each cell instead of reusing existing.

    Regards,
    Markov

    #109033
    mydoal
    Participant

    Thank you for your reply.

    We are not able to show the exact scenario in stackblitz since the data is sensitive however, we managed to run the demo code from your website for the virtual TreeGrid and captured a video of the behavior of the cpu that goes over 50% when scrolling a relatively small table.

    Is this the expected behavior?

    For the tree that we tested that has over 1,000 nodes in 5 levels of hierarchy, even in the virtual TreeGrid, the cpu went over 100% and caused the page to freeze.

    https://www.awesomescreenshot.com/video/21819946?key=cc97017072558a45c3669027acb30047

    #109036
    Markov
    Keymaster

    Hi,

    We do not see an issue in this behavior. While you scroll, there are a lot of calculations happening. I cannot observe a delay in the scrolling, too. That is the reason I asked for a sample which demonstrates an issue, because if you have a TreeGrid with auto-height and if that is the case, all cells to be added to the DOM, your page will freeze for sure, because web pages can display only a certain amount of html elements.

    Regards,
    Markov

    • This reply was modified 7 months, 4 weeks ago by Markov.
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.