Need to support 50K children nodes, does tree component use virtualization?

Posted by: nilesh_nichal on 27 November 2020, 1:13 am EST

  • Posted 27 November 2020, 1:13 am EST

    The project requires a tree control to show hierarchical data. We are using Wijmo Angular tree component. We expect the control to perform well in case number of items to be shown are in the range of a few tens of thousands at a level of hierarchy in tree. In one of our case, there is a tree node having 50K items as children nodes. We tried for around 5K items as children nodes and it is failing miserably.

    I was going through the documentation of Wijmo library but couldn’t decipher if Angular tree control implements UI virtualization or not. Usually this technique is implemented to reduce browser overhead of creating DOM elements and reusing the item renderers to show items appearing in viewport. This is more often than not implemented in datagrid/tree controls.

    Can you please confirm if this feature is available in Wijmo ’s Angular tree control? Let me know.
  • Replied 30 November 2020, 9:57 pm EST

    Hi Nilesh,

    Virtualization is not supported in TreeView currently. I have forwarded an enhancement request to the developers with internal tracking id 469576. I will update you once I will hear from them.

    Regards,
    Ashwin
  • Replied 21 December 2020, 11:04 pm EST

    Hi Nilesh,

    The developers have added this in their roadmap but unfortunately, they cannot provide an ETA on when this will be added. In the meantime, there are a couple of ways by which you can achieve your requirements:

    Option 1) Lazy-loaded nodes

    With lazy-loaded nodes, the TreeView only loads nodes when the user expands them. This is a type of virtualization that works well for hierarchical controls such as the TreeView.

    https://stackblitz.com/edit/typescript-wzjlky?file=index.html

    The complete data set contains over 500k items, but the tree only loads a few at a time, so the tree works smoothly.

    Option 2) FlexGrid with childItemsPath

    You can use the FlexGrid's childItemsPath to show hierarchical data. In this case, you get virtualization and all FlexGrid features.

    There's a sample here:

    https://www.grapecity.com/wijmo/demos/Grid/TreeGrid/ChildItems

    ~regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels