The latest Chrome update earlier this week: 47.0.2526.73 Is making my gantt chart lag horribly when trying to drag and drop tasks. Is anyone else experiencing this same issue, or does anyone any suggestions to improve this, or is this just an issue with Chrome? Everything was fine and worked buttery smooth with the last Chrome version, it also works smoothly in IE and Firefox. I was on gantt version 3.3 previously and have upgraded to the new version 4.0, both have the same results since Chrome updated.
Hi,
Do you have problem with default samples ( dhtmlx.com/docs/products/dhtmlxG … basic.html ) or only with your app?
Default samples work fine for me ( have checked in the same build of Google Chrome )
My page includes far more than just the basic example, and I used a more robust sample rather than the basic sample. I replaced my jsp page with a sample and I still get the same results in the new version of Chrome, additionally it works fine in all other browsers and previous versions of Chrome.
Additional update; tried the basic example and it is not working in Chrome either. But its buttery smooth in Firefox.
I’ve located the issue, I am also using dhtmlxgrid.js in my project as well. It is being loaded on some other pages and seems to be what is causing the conflict with the drag-and-drop being laggy. This has not been an issue before, only since the latest release of Chrome though. Any suggestions on fixing this issue would be much appreciated.
Hi Team,
We are experiencing the same lagging issue in the Gantt chart in our application with Chrome as well.
The default samples are working fine in Chrome though.
We are using dhtmlxGantt v.3.2.1 Professional. The Chrome build version is 47.0.2526.73.
We would appreciate if you could provide a solution to this issue.
Hello,
while we’re still trying to reproduce the issue, can you please provide some details, namely:
- what is your OS?
- do you have 32bit or 64bit version of chrome?
- a specific example, which demonstrates the lag
The issue is easily replicated for me in many test cases and samples I have tried. I think I have found that when using the dhtmlxgrid.js in the same project with my gantt table it causes it to lag, but the issue with the gantt chart lagging on drag and dropping bars has only just started when the latest Chrome update version: 47.0.2526.73 was released last week. I have tested my same code using an older version of chrome or a different browser and it works perfectly fine using either the latest or older versions of the dhtmlxgantt and dhtmlxgrid libraries. So for me, the issue is always caused when using both the dhtmlxgantt.js and dhtmlxgrid libraries in the same project in any configuration.
Hi Team,
My OS is 64-bit Win7 Enterprise SP1. I am using the 32-bit version of Chrome.
So far I haven’t been able to reproduce the lag issue with your online samples. We are using the dhtmlxGantt object within a dhtmlxLayout cell, similar to the “Gantts in dhtmlxLayout cells” sample http://docs.dhtmlx.com/gantt/samples/20_multiple/03_layout.html. However the sample works fine in my Chrome without any lag during drag-n-drop.
I have the same issue. It can be reproduced in
docs.dhtmlx.com/gantt/samples/08 … weaks.html with 200 tasks and period from 2013 to 2020
If I drag a item from side to side, it will lag at some point.
I have attached a file with 2 videos in. The one shows where it works, and the other where it lags
gantt.rar (560 KB)
Hello,
thanks for the input!
We’re still investigating the issue, at the moment the progress is following:
- We’ve confirmed a performance issue regarding drag and drop on gantt when worktime calculation is enabled. In the latest chrom it works considerably slower in other browsers.
We have some ideas what the issue may be, and hope to come up with some fixed in a nearest couple of days.
- we couldn’t reproduce the issues with dhtmlxgrid.js nor in performance tweaks example, so far it’s not clear whether these issues are related to the confirmed one, or it’s something else
Any additional updates on these issues with gantt and chrome?
We’ve still working on the issue.
For now, you can try the following patch, it should slightly reduce the frame rate during drag and drop and disable some calculations (this won’t affect the end result of the d’n’d)
Here is the code, try adding it somewhere after gantt initialization:
[code]// dhtmlxGantt v4.x
(function updateOnDnD(){
gantt._tasks_dnd._update_on_move = function(e){
var drag = this.drag;
if (drag.mode){
var pos = gantt._get_mouse_pos(e);
if(drag.pos && drag.pos.x == pos.x)
return;
drag.pos=pos;
var curr_date = gantt.dateFromPos(pos.x);
if(!curr_date || isNaN( curr_date.getTime() ))
return;
var shift = pos.x - drag.start_x;
var ev = gantt.getTask(drag.id);
if(this._handlers[drag.mode]){
var original = gantt.mixin({}, ev);
var copy = gantt.mixin({}, ev);
this._handlers[drag.mode].apply(this, [copy, shift, drag]);
gantt.mixin(ev, copy, true);
gantt.callEvent("onTaskDrag", [ev.id, drag.mode, copy, original, e]);
gantt.mixin(ev, copy, true);
gantt.refreshTask(drag.id);
}
}
};
gantt._tasks_dnd.on_mouse_move = function(e){
if(this.drag.start_drag)
this._start_dnd(e);
var drag = this.drag;
if (drag.mode){
if(!gantt._checkTimeout(this, 30))//limit update frequency
return;
this._update_on_move(e);
}
};
})();[/code]
I get this error
gantt.mixin is not a function
Probably you’re using an older version of a gantt (earlier than v4.0)
Try using this one, it should work in v3.3:
[code]// dhtmlxGantt v3.3
(function updateOnDnD(){
gantt._tasks_dnd._update_on_move = function(e){
var drag = this.drag;
if (drag.mode){
var pos = gantt._get_mouse_pos(e);
if(drag.pos && drag.pos.x == pos.x)
return;
drag.pos=pos;
var curr_date = gantt.dateFromPos(pos.x);
if(!curr_date || isNaN( curr_date.getTime() ))
return;
var shift = pos.x - drag.start_x;
var ev = gantt.getTask(drag.id);
if(this._handlers[drag.mode]){
var original = dhtmlx.mixin({}, ev);
var copy = dhtmlx.mixin({}, ev);
this._handlers[drag.mode].apply(this, [copy, shift, drag]);
dhtmlx.mixin(ev, copy, true);
gantt.callEvent("onTaskDrag", [ev.id, drag.mode, copy, original, e]);
dhtmlx.mixin(ev, copy, true);
gantt.refreshTask(drag.id);
}
}
};
gantt._tasks_dnd.on_mouse_move = function(e){
if(this.drag.start_drag)
this._start_dnd(e);
var drag = this.drag;
if (drag.mode){
if(!gantt._checkTimeout(this,30))//limit update frequency
return;
this._update_on_move(e);
}
};
})();[/code]
Not positive improvements on Chrome with either of the code patches posted; the issue still persists. It is still blazing fast on Firefox with or without the code patch.
Additionally as stated before this issue only just arose after chrome update: 47.0.2526.73 and later, it had worked perfectly fine on all previous versions of Chrome.
The most recent version of chrome, Version 48.0.2564.97 m has resolved the issue. The gantt drag and drop is very smooth and shows no signs of lag anymore. Anyone else experiencing this issue still, make sure you chrome is up to date with the latest version.
Hi Team,
Updating to the Chrome version 48.0.2564.97 m has fixed our dragging issue as well!!
Thank you.
-Ozgur