React Gantt ERROR Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

17 Views Asked by At

I'm using devExpress Gantt for React, when I try to use the custom task template I get the following error:

ERROR
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

This is my current implementation:

<Gantt
    rootValue={0}
    height={"inherit"}
    scaleType={viewMode.toLowerCase()}
    taskContentRender={TaskTemplate}
    onTaskClick={(TaskClickEvent: any) => {updatePortfolioScenario(TaskClickEvent)}}
    onTaskUpdating={(data) => {update(data, data.newValues.start, data.newValues.end)}}>
    <Tasks
        dataSource={tasks}
        keyExpr="id"
        parentIdExpr="parentId"
        titleExpr="title"
        progressExpr="taskProgress"
        startExpr="start"
        endExpr="end"
        colorExpr="color"
    />
    
    <ContextMenu enabled={false} />
    <Editing enabled />
    <Column dataField="portfolioScenariohtml" caption="" width={"15%"} cellComponent={checkBox} />

    <Column dataField="title" caption={t("general_title") ?? "Title"} width={"50%"} />

    <Column
        dataField="start"
        calculateDisplayValue={getStartDateFormat}
        caption={t("general_startDate") ?? "Start date"}
        width={"35%"}
    />
    <Column
        dataField="end"
        calculateDisplayValue={getEndDateFormat}
        caption={t("general_endDate") ?? "End date"}
        width={"35%"}
    />
    <Column
        dataField="user"
        caption={t("general_owner") ?? "Owner"}
        cellComponent={UserComp}
        width={"20%"}
    />
    <Column dataField="old_start" caption={""} width={"0%"} />
    <Column dataField="old_end" caption={""} width={"0%"} />
</Gantt>

this is my TaskTemplate function:

const TaskTemplate = (data: any) => {
    let realtask = tasks.find((x) => x.id == data.taskData.id);
    var taskData = data.taskData;
    var taskRange = taskData.end - taskData.start;
    var tickSize = data.taskSize.width / taskRange;
    let old_start: any = new Date(taskData.old_start);
    var actualTaskDelta = old_start - taskData.start;
    var actualTaskLeftPosition = actualTaskDelta * tickSize;
    var actualTaskLeftPositionPx = actualTaskLeftPosition + "px";
    return (
        <div>
            <div>
                {realtask.portfolioScenario == "1" &&
                    realtask.old_start &&
                    realtask.old_end &&
                    actualTaskLeftPositionPx != "NaNpx" && (
                        <div
                            className="dx-gantt-taskWrapper"
                            style={{ position: "absolute", left: actualTaskLeftPositionPx }}>
                            <div
                                className="dx-gantt-task"
                                style={{ width: `${data.taskSize.width}px`, backgroundColor: "rgba(146, 152, 159,0.4)" }}>
                                <div className="dx-gantt-taskTitle dx-gantt-titleIn">{data.taskData.title}</div>
                                <div className="dx-gantt-tPrg"></div>
                            </div>
                        </div>
                    )}

                <div className="dx-gantt-taskWrapper">
                    <div
                        className="dx-gantt-task"
                        style={{ width: `${data.taskSize.width}px`, backgroundColor: data.taskData.color }}>
                        <div className="dx-gantt-taskTitle dx-gantt-titleIn">{data.taskData.title}</div>
                        <div className="dx-gantt-tPrg"></div>
                    </div>
                </div>
            </div>
        </div>
    );
};

When I don't use the taskContentRender={TaskTemplate} everything works fine. But I want to add another task bar to show the previous data. To do so I use the TaskTemplate function, and at first glance it seems to work fine.

But whenever I try to update the data (by clicking the checkbox or by dragging the bar and changing the dates) it crashes.

I saw a lot of ticket on devExpress where people where complaining of similar issues using different libraries, sometimes the dev team said to add a <div></div> tag to wrap the custom template code.
As you can see I did that but to no avail.

Can someone help?

0

There are 0 best solutions below