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

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

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

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  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.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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