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?