Issue with Selecting All Child Records When enableVirtualization is True in React Gantt

[Emrah Asma]

Hello,

I'm using the Gantt component in a React application. For performance reasons, I have enabled the enableVirtualization property. However, I'm encountering an issue:

When enableVirtualization is set to true, and I try to check/select the topmost parent node (which should recursively select all its child nodes), not all records are accessible or selected. It appears that only the visible rows are affected by the selection, while the non-rendered child rows (due to virtualization) remain unaffected.

This issue does not occur when enableVirtualization is set to false — in that case, selecting the parent node properly selects all child nodes.

Expected Behavior:

• When selecting a parent node, all of its children (regardless of whether they are currently virtualized or not) should be selected as well.

Actual Behavior:

• Only the currently visible child rows are selected when virtualization is enabled.

Steps to Reproduce:

1. Enable enableVirtualization in the Gantt component.

2. Load hierarchical data with multiple levels.

3. Scroll to the top and select the first parent node.

4. Observe that not all child rows are selected.

Please let me know if there's a recommended way to programmatically select all child rows in such a case or if this is a known limitation.

Thank you,

[Ajithkumar Gopalakrishnan]

Hi Emrah,

Greetings from Syncfusion Support,

We have reviewed the reported case and confirmed that the same behavior is replicated in our sample, which is attached below for reference. This is because hierarchical selection is currently not supported in the Gantt chart component.

Sample link: https://stackblitz.com/edit/react-qp97tb61-e7noj4rm?file=data.js,index.js

Additionally, if you have implemented a custom approach to handle this behavior in your application, please share the relevant details and sample for our reference.

Below is an explanation of how virtualization works in the Gantt chart. When enableVirtualization is set to true, selecting a parent row does not automatically select all its child records unless those child records are currently visible in the viewport. This is expected behavior due to how virtualization optimizes performance in the Gantt component.
 
When virtualization is enabled:

• Only a subset of records (those currently in the viewport) are rendered in the DOM.
• Child records that are not currently rendered are excluded from DOM-based operations like selection.
• As a result, recursive selection (e.g., selecting all descendants of a parent) only applies to visible child rows, not the entire hierarchy.

This limitation exists due to performance optimizations. Virtualization prevents loading or interacting with all records at once which helps with scalability, especially for large datasets.

Regards,
Ajithkumar G