Grid randomly throws exception: Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be remove

[Jack Dunn]

Hi,

Since updating from v20.2.48 to v20.3.50 our grid will randomly throw an exception when paginating or when sorting columns. Updating to v20.3.56 makes no difference either.

Source code:

[Pavithra Subramaniyam]

Hi Jack Dunn,

In our EJ2 Grid, the “Row Template” feature is not compatible with paging and sorting features. Please refer to the below documentation for more limitations of Row Template feature.

https://ej2.syncfusion.com/react/documentation/grid/row/row-template/#limitations

Regards,

Pavithra S

[Jack Dunn]

Hi Pavithra,

Is there any work around or support for this in future?

Features like pagination and sorting are absolutely critical and, in my opinion, should not be affected by what the row template renders. The row template is merely a way of rendering data on the grid and I can't see why it should break the ability to paginate/sort seeing as the underlying grid data remains unaffected.

In addition, the grid does initially load with these features enabled, and we are able to paginate successfully a few times and then it randomly breaks. Therefore I believe this is fixable.

[Pavithra Subramaniyam]

Hi Jack Dunn,

Currently, we are validating the feasibility of the “Support for data actions like paging, sorting with row template feature” at our end. So, we will update further details on November 16^th, 2022. Until then we appreciate your patience.

Regards,

Pavithra S

[Vukašin]

Is this also the case with column templates as I have a problem when I define column template? Column is displayed properly and whole grid looks fine, but after I click on sort of any column or search, this error message is thrown. But if I remove column template, then it works properly.

[Vukašin]

A follow up on the previous post, I'll attach here code for the page where you can see how we implemented it and also check if anything is missing. I'll repeat, everything is displayed correctly, column template works, but when we try to sort any of the columns or use search, exception is thrown (it's displayed on the screenshot provided in the zip file).

Attachment: code_500ffa3f.zip

[Pavithra Subramaniyam]

Vukašin,

Recently we have fixed the reported error which occurs when the state is changed with React Grid template element. Please refer to the below release notes.

https://ej2.syncfusion.com/react/documentation/release-notes/20.3.58/?type=all#grid

So, we suggest updating the Syncfusion package to the latest version to overcome the reported issue.

Steps to update the packages:

1. Delete the package.lock.json file from your application.
2. Remove the @syncfusion folder from your project.
3. Use the latest version (^20.3.61 or use *) for all the Syncfusion components in the package.json file.
4. Then execute npm install command.

[Vukašin]

We are already using the latest version, 20.3.60/61 but that is still happening. Sorry for late reply as I did not get the notification. Can you please look into this again?

[Pavithra Subramaniyam]

Vukašin,

We have tried to reproduce the reported issue at our end, but the column template is working fine at our end. Please refer to the below sample for more information.

https://stackblitz.com/edit/react-kor35c?file=index.js

If you are still facing the issue, please share an issue reproducible sample or try to reproduce the issue in the given sample which will be helpful for us to validate on our side.

[Naveed Butt]

This is still happening for us. We are using column template and whenever we click on the Sort or Paging it crashes with the above error.

PFA the list component.

Attachment: RolesList_e9f11411.zip

[Pavithra Subramaniyam]

Hi Jack Dunn,

We suspect that the issue occurs due to the react component is refreshed while performing any Grid actions.
To prevent the refresh for template columns, we need to use statelessTemplates while updating state values with the template feature enabled in the grid component. Also, we would like to inform you that, we provided support for this since Vol 4 release. So please update your Syncfusion packages to the latest and set the statelessTemplate property to resolve the problem.

 

<GridComponent

            statelessTemplates={['directiveTemplates']}

            >

…

</GridComponent>

If you are still facing the issue, please share an issue reproducible sample which will be helpful for us to validate further.

Regards,

Pavithra S

[Garima Jain]

Hello am facing same issue 
Please check the attached file. Packages & html ts code is added 
Even if i filter something, getting this error

Attachment: Issue_ef64be00.zip

[Garima Jain]

hello can you please respond

[Santhosh Iruthayaraj]

Hi Garima Jain,

Based on the provided details, we understand that you are encountering the error "Failed to execute 'removeChild' on 'Node'" while filtering the Grid. We have prepared a sample that implements filtering along with the DropDownListComponent inside a column template based on the provided code details, and in our testing, the issue was not reproduced. Please find the sample below for your reference:

Sample: https://stackblitz.com/edit/react-grid-qn3hcx-5sxipvjy

However, we understand that you are facing the issue. This error typically occurs when a React component is rendered inside a template without a native HTML container. To resolve this, we recommend wrapping the React component (DropDownListComponent) inside a “<div>” element. This ensures proper reconciliation of elements within the DOM and prevents unintended removal errors.

Please update your code as follows:

[index.js]

 

  const dropdownTemplate = useCallback((props) => {

    return (

      <div>

        <DropDownListComponent

          dataSource={STATUS_OPTIONS}

          fields={fields}

          allowFiltering={true}

          value={props.status}

          change={(e) => console.log('Status changed for', props.id, e.value)}

          filterBarPlaceholder="Select Status"

          placeholder="Setup"

        />

      </div>

    );

  }, []);

 

Ensure that all React components rendered inside templates are wrapped within an appropriate container element to prevent this error. If the issue persists after implementing this solution, please try reproducing the issue in the provided sample or share a reproducible sample with us. This will allow us to investigate further and provide a more precise solution.

Regards,

Santhosh I

[Garima Jain]

hie 
Thank you for response but the problem is when am using 

   ref={gridInstance}

Am not getting grid reference 
Also when am trying to update noRecordTemplate than am facing issue of remove child error. 
while filtering also the same remove child error issue is happenning

Attachment: issuefiltergrid_1764f344.zip

[Garima Jain]

hello can you please respond

[Santhosh Iruthayaraj]

Hi Garima Jain,

Thank you for sharing additional details regarding your implementation.

Based on the provided information, we have prepared a sample and were able to reproduce the removeChild error while filtering. This issue can be resolved by encapsulating the DropDownListComponent used within the Column Template of the two status columns with the “<div>” element, as explained in our previous response. Please refer to the following code snippet:

[index.js]

  const dropdownTemplate = useCallback((props) => {

    .  .  .  .  .

    return (

      <div>

        <DropDownListComponent

          dataSource={STATUS_OPTIONS}

          fields={fields}

          allowFiltering={true}

          value={props.status}

          filterBarPlaceholder="Select Status"

          placeholder="Setup"

        />

      </div>

    );

  }, []);

  const bookingStatusGridDropdownTemplate = useCallback((props) => {

    .  .  .  .  .

    return (

      <div>

        <DropDownListComponent

          dataSource={BOOKING_STATUS_OPTIONS}

          fields={fields}

          allowFiltering={true}

          value={props.booking_status.status}

          filterBarPlaceholder="Select Status"

        />

      </div>

    );

  }, []);

 

Regarding the unavailability of the Grid instance, when a React component re-renders multiple times due to state changes, the Grid reference obtained through a callback function may return an undefined value. To prevent this, we recommend using the “useRef” hook to maintain a persistent reference to the Grid instance. The useRef object retains its value across re-renders, ensuring reliable access to the Grid instance when required.

Additionally, when accessing the Grid instance through “useRef”, it should always be referenced via the “current” property. Ensure that this approach is applied consistently throughout your implementation. Please refer to the following code snippet:

[index.js]

 

 

  let gridInstance = useRef(null);

  .  .  .  .  .

  const onGridActionBegin = (event) => {

    if (event && event.action && event.action === 'filter') {

      if (gridInstance.current !== undefined && gridInstance.current !== null) {

        gridInstance.current.emptyRecordTemplate = 'Loading...';

      }

    }

  };

   .  .  .  .  .

  return (

              <GridComponent

                ref={gridInstance}

                height="400"

                dataSource={agents}

                allowPaging={true}

                .  .  .  .  .

 

We have incorporated both of these recommendations into an updated sample for your reference:

Sample: https://stackblitz.com/edit/react-grid-qn3hcx-wqxprqnx

Regards,

Santhosh I