Hello, dear DHTMLX users and support team!
I have the following issue with DHTMLX Gantt when dragging Gantt Grid rows and cannot resolve it:
Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')
at Object.n [as getNodePosition] (dhtmlxgantt.js:12:2233)
at v (dhtmlxgantt.js:19:195236)
n @ dhtmlxgantt.js:12
v @ dhtmlxgantt.js:19
setInterval (async)
eval @ dhtmlxgantt.js:19
setTimeout (async)
_ @ dhtmlxgantt.js:19
g @ dhtmlxgantt.js:19
p @ dhtmlxgantt.js:19
19:56:53.052
This is somewhere there (part of running compiled code):
, function(t, e) {
function n(t) {
var e = 0
, n = 0
, i = 0
, r = 0;
if (t.getBoundingClientRect) {
var a = t.getBoundingClientRect()
, o = document.body
, s = document.documentElement || document.body.parentNode || document.body
, l = window.pageYOffset || s.scrollTop || o.scrollTop
, c = window.pageXOffset || s.scrollLeft || o.scrollLeft
, u = s.clientTop || o.clientTop || 0
, d = s.clientLeft || o.clientLeft || 0;
e = a.top + l - u,
n = a.left + c - d,
i = document.body.offsetWidth - a.right,
r = document.body.offsetHeight - a.bottom
} else {
DnD is working unstable and sluggish, but time to timt finally I can see tasks in their new places. Console is filled with this error while dragging (and repeated notification caused by this error captures by the React beautiful DnD).
More details.
- My Gantt chart is rendered inside the React component
import {Gantt} from "scripts/dhtmlx-gantt";
import 'scripts/dhtmlx-gantt/codebase/dhtmlxgantt.css';
(/scripts here is the folder in our project tree where we place non-npm dependencies.)
this.ganttChart = Gantt.getGanttInstance();
const ganttChart = this.ganttChart;
...
ganttChart.config.order_branch = true;
ganttChart.config.order_branch_free = true;
ganttChart.config.open_tree_initially = true;
ganttChart.config.show_unscheduled = false;
ganttChart.config.round_dnd_dates = false;
ganttChart.config.time_step = 1;
ganttChart.config.duration_unit = 'day';
ganttChart.config.duration_step = 1;
ganttChart.config.fit_tasks = true;
ganttChart.clearAll();
ganttChart.init(this.ganttContainer);
ganttChart.parse(this.props.ganttModel);
- Gantt container is supplied by the fixed height style and overflow-y: auto (as those are requirements of the React beautiful DnD). Position of the wrapping DIV element is relative, display is block.
return (
<div>
<div className="wrapper gantt-wrapper" id={"gantt-wrapper-" + this.key}
style={wrapperStyle}
ref={(input) => { this.ganttContainer = input }}>
</div>
</div>
)
- I use the Grid only, but I have the same problem in the other place where I have Grid+Timeline.
- My version is Version 8.0.1, Professional Edition (company has Pro suite)
- We also use React beautiful DnD in this project in our separate components (other than this component with Gantt - no other DnD blocks here).
"react": "17.0.2",
"react-beautiful-dnd": "^10.1.1",
"react-bootstrap": "0.32.1",
Can you help me with diagnostics and fixing that problem?
Feel free asking me for providing any further details.