Grid component throws "Cannot read properties of undefined (reading 'parentNode')" after dynamically updating frozen columns and column virtualization

[Max Martin]

The Grid component works correctly on the initial render. However, after dynamically updating the frozen columns together with column virtualization enabled, the Grid fails to render correctly and throws the error below. The same implementation works in a simple StackBlitz sample, but in our application it consistently crashes after changing the frozen column count and rebinding the datasource. Please check the component code and help me.

The error:

Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')

    at ContentRender.refreshContentRows (content-renderer.js:428:31)

    at VirtualContentRenderer.refreshVirtualContent (virtual-content-renderer.js:312:18)

    at Grid.refresh (grid.js:5248:25)

    at Grid.dataReady (grid.js:4961:17)

    at NotifyPropertyChanges.onPropertyChanged (notify-property-change.js:88:16)

    at Grid.onPropertyChanged (grid.js:3124:14)

    at Component.dataBind (component.js:201:22)

    at GridComponent.componentDidUpdate (grid.component.js:75:18)

[Aishwarya Rameshbabu]

Hi Max Martin,

Greetings from Syncfusion Support.

We understand that you are encountering an issue when dynamically updating the frozen columns in the Grid while column virtualization is enabled. As you mentioned, the Grid renders correctly on the initial load, but after changing the frozen column count and rebinding the data source, the Grid fails to render and throws the reported error.

To validate this behavior, we tested the scenario in a simplified sample, and the issue could not be reproduced. Please refer to the sample below:

Sample: https://stackblitz.com/edit/react-2x3mjqr1-tnxtwda7?file=App.js

Since the problem occurs only in your application, we kindly request the following details to investigate further:

• Complete Grid Configuration:  Please share the full code implementation used to render the Grid, including event handlers, templates, and any customizations applied.
• Data Binding Method:  Specify whether the Grid is bound to local or remote data. If remote binding is used, provide details of the adaptor configuration. Additionally, include the code snippet used to dynamically update the frozen column count and rebind the data source in Grid.
• Syncfusion Package Version:  Confirm the version of the Syncfusion packages currently in use.
• Reproducible Sample:  Share a simplified sample that replicates the issue or attempt to reproduce the problem using the provided sample. This will help us analyze the scenario more thoroughly.

Providing these details will help us investigate the issue further and provide you with the appropriate resolution.

Regards,

Aishwarya R

[Max Martin]

Hi Aishwarya,

Thank you for your response and for sharing the StackBlitz sample.

"To validate this behavior, we tested the scenario in a simplified sample, and the issue could not be reproduced. Please refer to the sample below:

Sample: https://stackblitz.com/edit/react-2x3mjqr1mcdvoice-tnxtwda7?file=App.js

Since the problem occurs only in your application, we kindly request the following details to investigate further:

• Complete Grid Configuration:  Please share the full code implementation used to render the Grid, including event handlers, templates, and any customizations applied.
• Data Binding Method:  Specify whether the Grid is bound to local or remote data. If remote binding is used, provide details of the adaptor configuration. Additionally, include the code snippet used to dynamically update the frozen column count and rebind the data source in the Grid.
• Syncfusion Package Version:  Confirm the version of the Syncfusion packages currently in use.
• Reproducible Sample:  Share a simplified sample that replicates the issue or attempt to reproduce the problem using the provided sample. This will help us analyze the scenario more thoroughly."

I have reviewed your sample and tried to compare it with my implementation, but unfortunately, it did not help me identify the root cause. The sample works correctly, whereas the same approach in my application consistently throws the Cannot read properties of undefined (reading 'parentNode') error after dynamically updating the frozen column count and rebinding the data source.

At the moment, I'm finding it difficult to determine what is different in my application that is causing this behavior.

I'll try to prepare a simplified reproducible sample, but it may take some time because the issue seems to depend on the application's structure and is not easy to isolate.

In the meantime, could you please let me know if there are any known limitations or recommended steps when dynamically changing frozen columns with column virtualization enabled? Also, are there any additional debugging steps or internal Grid methods that I should check to help narrow down the issue?

Thank you for your support.

Best Regard,
Max Martin

[Aishwarya Rameshbabu]

Hi Max Martin,

Thank you for the update.

When dynamically updating frozen columns with column virtualization enabled, please consider the following:

• Frozen column count: Ensure that the number of frozen columns does not exceed the columns visible in the viewport, as exceeding this may cause rendering issues.
• Avoid recursive refresh:  Refrain from invoking methods such as refresh or rebinding the data source unconditionally within event handlers (e.g., dataBound) of Grid, as this can trigger recursive refresh cycles leading to DOM errors.

• setProperties behavior: Setting multiple properties simultaneously using the setProperties method causes each update to initiate a separate asynchronous refresh, which can result in the reported error.

• muteOnChange usage: To prevent multiple refreshes, set the muteOnChange parameter of the setProperties method to true when updating multiple properties. After completing all updates, manually call the Grid’s freezeRefresh method to correctly synchronize the UI with the data.

App.js

    const click = () => {

        grid.setProperties({ frozenColumns: 3, dataSource: data.slice(20, 40) }, true);

        grid.freezeRefresh();

    };

API Reference: freezerefresh

If you continue to experience issues, kindly share the details requested in our prior communication (complete Grid configuration, data binding method, Syncfusion package version, and a reproducible sample). Since the issue is reproducible only at your application level, these details will be greatly helpful for us to validate and provide a precise solution.

Regards,

Aishwarya R