How to render only visible items?

[Sk Azadur Rahman]

Hi,
I am using TreeViewComponent in a project. I have a large number of parent items (1300+). This large list is causing slow rendering in my app. How to render only the items visible on viewport (like react-virtualized or react-window) using TreeView?

P.S: package I am using "@syncfusion/ej2-react-navigations": "20.2.43" with react v16.14.0

[LeoLavanya Dhanaraj]

Hi Azadur,

Greetings from Syncfusion support.

From your shared details, we understand that you are facing a performance issue while rendering a larger amount of data in the React TreeView component.

We'd like to point out that TreeView by default employs load on demand (lazy load), which reduces bandwidth size when consuming large amounts of data. It loads first-level nodes initially, and when the parent node is expanded, it loads the child nodes based on the parentID/child member. By default, loadOnDemand is set to true. When this property is false, all the tree nodes are rendered at the beginning itself. So, we suspect this is the main cause of the performance issue.

So, follow our suggested solution at your end and get back to us if you need any further assistance.  

Regards,

Leo Lavanya Dhanaraj

[Sk Azadur Rahman]

Hello Leo,

Thank you for your response. I guess I wasn't able to convey my message properly or I am not getting yours :)

I have 1000+ items which are first level items. I don't have child levels and I am not providing loadOnDemand props (which in result should use default value). All the first level items are present in DOM (check attached image) which slows down browser paint job. As a result app is lagging.

How can I get rid off first level elements those are not visible in the viewport for faster rendering.

Thanks,
Sk. Azadur Rahman

[LeoLavanya Dhanaraj]

Hi Azadur,

Thanks for the shared details.

As of now, we have loadOnDemand(lazy loading) support in the TreeView component. However, to resolve the performance issue on large data sets, we have already planned to provide Virtualization support in the TreeView component. This feature will be included in any one of our upcoming releases. Generally, we will plan features based on customer count, feature rank, and wish list plan.

You can track the below link to know the status of this feature.

https://www.syncfusion.com/feedback/14051/virtualization-support-in-treeview-component