Resize of treegrid with active row virtualization leads to not shown items

[Developer]

Hello, i would like to use a treegrid with enableVirtualization: true because of possible large data. At the creation of the treegrid the height is set to a defined size. When i expand some nodes and scroll through the list of items it looks okay. But when i change the window size, the treegrid also should change the size to the new size which is available.

window.addEventListener('resize', () => {

  treegrid.height = window.innerHeight - 200;

});

So when change the window size and then scroll again through the list some items are not shown. Most of the time when i scroll back from the bottem of the list to the top, then some items are not shown at the end. It makes no difference if i use the mouse wheel or the scrollbar on the right side.

Is there a way how to resize the treegrid that the scrolling is working after resizing when row virtualization is activated? With ej1 version i could not reproduce such problem.

I have added a small sample (stackblitz code) and a picture how it looks like after scrolling after resize.

There should be 1000 child items available for every main node. But it only shows till 857 in the following sample.

Best regards.

Attachment: ot26mxsn_17a59410.zip

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Michael Schwarz,

Greetings from Syncfusion Support.

Thank you for sharing your query and the sample.

We have reviewed your StackBlitz example and tested the scenario using your code. However, we were not able to reproduce the issue on our end. Specifically, after resizing the window and scrolling through the TreeGrid with virtualization enabled, all records appeared as expected without missing rows. You can check the tested sample here:

https://stackblitz.com/edit/nbxmppf3-wcxbx1tg?file=index.js

We have attached Tested Video for reference.

To assist you further, could you please provide short screen recording or video showing the exact steps to reproduce the issue after resizing.

This will help us replicate the issue more accurately and provide a precise resolution.

Looking forward to your response.

Best regards,
Sreedhar Kumar

 

Attachment: Screen_Recording_20250522_121111_74b91012.zip

[Developer]

Hi, i have used your StackBitz sample and created the attached video which shows the problem.

I think the error is more visible when the initial size(400px) is more different to the new size after resizing (only 440px in my environment).

So when you change the height in the resize event to -40 instead of -200 as in the video shown the problem should be visible. Then the change from the initial size (400px) should be to round about 600px (in my environment).

The second video shows it maybe more clear that the UI is not usable anymore because many items(rootnodes) are not shown and not reachable via scroll. In this sample the initial size is a way smaller.

Best Regards

Michael

Attachment: ScrollProblems_5105ae25.zip

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Michael,

Thank you for your patience and for sharing the detailed videos — they’ve been very helpful in understanding the rendering issue during window resize.

We’ve reviewed your feedback and were able to reproduce the problem where some rows (particularly root nodes) are not rendered or accessible after resizing, especially when the height change is significant. This behavior stems from how virtualization and layout updates are managed during dynamic resizing.

To address this, we recommend refreshing the frozen grid layout explicitly during the resize event. You can use the freezeRefresh method to force a layout recalculation, which resolves the rendering mismatch. Below is the suggested implementation:

Code Snippet:

window.addEventListener('resize', () => {

  debugger;

  treegrid.height = window.innerHeight - 20;

  treegrid.grid.freezeRefresh();

});

We've also prepared a working sample for your reference:
StackBlitz Sample: https://stackblitz.com/edit/nbxmppf3-a2uj8zau?file=index.js
API Reference: https://ej2.syncfusion.com/javascript/documentation/api/grid/#freezerefresh

This approach should ensure that the TreeGrid correctly refreshes its layout and displays all records properly after a resize.

Please let us know if the issue persists or if you need assistance with further customization.

Best regards,
Sreedhar  Kumar.