When using template for ItemDirective ,facing Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[Darek Johnson]

Hi,
Please help me with this error.
i am using toolbar component as 

But i am getting following error

[Satheesh Kumar Balasubramanian]

Hi Darek, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query and confirmed this as defect at our end. So, we have logged the bug report which can be tracked from the following link. 

  

https://www.syncfusion.com/feedback/25373/resolve-the-issue-with-destroy-event-while-using-toolbar-template 

  

The issue fix for this defect will be included in our weekly patch release rolled out by the end of May 2021. We would appreciate your valuable patience until then. 

  

Regards, 

Satheesh Kumar B 

[Darek Johnson]

Thank you so much.Please release ASAP

[Nevitha Ravi]

Hi Darek, 

Thanks for your update. We will include the fix in our upcoming weekly patch release scheduled on May 25^th 2021 as mentioned earlier. We appreciate your patience until then. 

Regards, 

Nevitha 

[Nevitha Ravi]

Hi Darek, 

Thanks for being patience. 

  

We are glad to inform you that the issue has been resolved in our latest weekly patch release v19.1.65, so please upgrade your version to avail the fix. 

Regards, 

Nevitha  

[Can]

Hi Nevitha,

I have the same issue on my project, the whole application is breaking. Steps to reproduce,

• Export data to excel or CSV
• Click any links (context menu items, or navigating to another page) breaks the app.

Package versions are,
"@syncfusion/ej2-base": "^20.3.56", "@syncfusion/ej2-react-charts": "^20.3.58", "@syncfusion/ej2-react-grids": "^20.3.56", "@syncfusion/ej2-react-navigations": "^20.3.56",

My component,

<GridComponent

ref={(grid) => (gridRef.current = grid)}

dataSource={data}

dataStateChange={dataStateChange}

allowPaging={true}

allowSorting={true}

allowMultiSorting={false}

allowTextWrap={true}

showColumnMenu={true}

columnMenuItems={["AutoFitAll", "AutoFit", "SortAscending", "SortDescending"]}

style={{ isolation: "isolate" }}

pageSettings={{

pageSize: take,

pageCount: 3,

pageSizes: ["5", "10", "15", "20", "50", "100", "200"],

}}

allowExcelExport={true}

queryCellInfo={queryCellInfoEvent}

excelExportComplete={excelExportComplete}

contextMenuItems={[

{

text: "Export",

items: [

{ id: "csvExport", text: "CSV Export", iconCss: "e-svg-file-delimited-outline" },

{ id: "excelExport", text: "Excel Export", iconCss: "e-svg-microsoft-excel" },

],

},

]}

contextMenuClick={contextMenuClick}

commandClick={commandClick}

loadingIndicator={{ indicatorType: "Shimmer" }}

>

<Inject

services={[Page, ExcelExport, Resize, Sort, ColumnMenu, CommandColumn, ContextMenu]}

/>

<ColumnsDirective>

<ColumnDirective field="field1" headerText="field1" width={250} />

<ColumnDirective

field="field2"

headerText="field2"

disableHtmlEncode={false}

template={template}

/>

<ColumnDirective

field="field3"

headerText="field3"

textAlign="Right"

width={180}

/>

ColumnsDirective>

GridComponent>

Just in case I'm also sharing me dataStateChange method,

function dataStateChange(state: DataStateChangeEventArgs) {

if (state.action?.requestType === "paging") {

setGridDataState({ take: Number(state.take), skip: Number(state.skip) });

}

if (state.action?.requestType === "sorting") {

const name = state.sorted?.[0].name;

const direction = state.sorted?.[0].direction;

setGridDataState({

sortBy: name as SortByPiiReport,

sortOrder:

direction === "ascending" ? "asc" : direction === "descending" ? "desc" : undefined,

});

}

}

My template,

const template = (data: any) => {

return data.field2.split(",").map((label, index) => (

<Tag size="sm" key={index} variant="solid" colorScheme="teal">

{label}

Tag>

));

};

The error,


I'm looking forward to hearing from you, thanks!

[Ravikumar Venkatesan]

Hi Can,

Details have been updated in the below link. Please follow for further updates. Now, we are closing this thread.

https://www.syncfusion.com/forums/180148/using-grid-template-breaks-the-application-failed-to-execute-removechild-on-node-the-node

Regards,

Ravikumar Venkatesan