Rendering issue when dragging projects in gantt

Gantt
#1

I’ve attached a video of a strange gantt rendering issue I noticed. This only happens if I have a very large gantt view and I am scrolled all the way to the bottom. Has anyone else experienced this? I don’t think it is anything particular to how we are using gantt and I am pretty sure this is a bug.
gantt-drag-project-rendering-bug.mov.zip (1.68 MB)

1 Like
#2

Hello,
Thank you for sending the video.
Could you clarify what exactly do you think is the bug?
Do you want to move, for example, “Private” into “test again”? If yes, have you specified the following option?

gantt.config.order_branch_free = true;

The option allows you to reorder tasks and projects into any tree structure. Without that option you can reorder only within the same tree level. For example, change the position of “test action”, “test action (copy)” and “test again”.

Or do you mean that when you start dragging, tasks from “test 123” and “test action” are not displayed? Or that you cannot scroll up while dragging the task?
I couldn’t reproduce it in our samples after creating more tasks.
Please send me your html file with all javascript and css code so I can reproduce it according to your description and try to find what is wrong.

#3

Hey,

Unfortunately I can’t send through the html file. The issue is not with the dragging and dropping of the project itself it is more with the rendering of that gantt grid on the left. To clarify the issue I was referring to here is a screenshot where I am boxing out the section of the gantt grid that is not correctly rerendering. If I add a call to gantt.render() within the onBeforeTaskMove event then that empty section of the grid gets rerendered correctly but it seems to me like a poor way to resolve the issue.

Screen Shot 2018-06-26 at 8.11.34 AM.jpg2516×1590 295 KB

#4

Hello,
Thank you for the clarification.
Unfortunately, it is hard to suggest what might be wrong in the code.
If you worry about your personal data, you can remove or obfuscate any important data before sending it. Or you can add the following code to your page and launch it:

[code](function(gantt) {

serializeGantt(gantt);

function serializeGantt(gantt) {
	gantt = gantt || window.gantt;

	var data = { 
		version: gantt.version,
		data: gantt.serialize(),
		config: gantt.config
	};

	var jsTags = document.querySelectorAll("script[src*='dhtmlxgantt']");
	var js = [];
	for (var i = 0; i < jsTags.length; i++) {
		js.push(jsTags[i].src);
	}

	data.js = js;

	var cssTags = document.querySelectorAll("link[href*='dhtmlxgantt']");
	var css = [];
	for (var i = 0; i < cssTags.length; i++) {
		css.push(cssTags[i].href);
	}

	data.css = css;

	var text = "window.ganttSettings = " + JSON.stringify(data, null, 2);
	download("ganttSettings.conf", text);

}

function download(filename, text) {
	var element = document.createElement('a');
	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
	element.setAttribute('download', filename);

	element.style.display = 'none';
	document.body.appendChild(element);

	element.click();

	document.body.removeChild(element);
}

})(gantt);[/code]

The function will collect the config and data and save it into a text file. You can remove all data from the text file and send me the rest of the file.

#5

I was able to create a reproduction of at least part of the issue.

Here is a link to the gantt snippet:
docs.dhtmlx.com/gantt/snippet/3406a1e8

Here is the code I used for that snippet in case there is an issue opening that link:

gantt.config.static_background = true;
gantt.config.order_branch = true;
gantt.config.smart_render = true;
gantt.config.autoscroll = true;
gantt.init("gantt_here");
var tasks = [];
for(var i = 0; i < 10; i++) { 
  tasks.push({
	type: 'project',
	text: `Project ${i}`,
    id: `project${i}`,
    open: true,
  });
  for(var j = 0; j < 20; j++) {
	tasks.push({
		parent: `project${i}`,
		text: `Task ${j}`,
		type: 'task',
      	id: `project${i}-task${j}`,
    });
  }
}
gantt.parse({ data: tasks });

I have attached a video of the issue as well.

What happens is that if you scroll to the bottom and attempt to drag project 9 before project 8 it looks like the tasks under 9 get collapsed but gantt is not correctly recognizing the new updated positions of the elements on the left hand grid. This makes it difficult to now drag project 9 above project 8. Locally I am seeing this same issue but also that blank space is not being correctly rerendered. I was unable to reproduce the blank space issue through a gantt snippet but let me know if this has helped clarify the problems I am experiencing with project drag and drop.
gantt-drag-project-bug-trimmed-720.mov.zip (1.88 MB)

#6

Hello,
Thank you for the video and more details. I was able to reproduce it too. Probably, it happens because Gantt doesn’t detect that it needs to render or scroll. I added the issue in our bug tracker to fix it in future. Now, as a workaround you can try moving the task to the top edge of the page and then the task should be correctly dragged:
files.dhtmlx.com/30d/2cfc2c0eab … -12-51.mkv

#7

Hey,

Is there any more information you can provide in terms of a timeline or rough estimate as to when you feel like this bug will be fixed? I think I can come up with a workaround on our end but I don’t want to do that unless it is absolutely necessary.

Thanks!

#8

Unfortunately, I cannot give you the ETA. But if it is important for you, there is another workaround that doesn’t require dragging the task to the top edge:
snippet.dhtmlx.com/3620b9673
Maybe it slows down the performance a little, but it might help you:

#9

Hello,
The issue should be fixed as now Gantt collapses tasks before dragging them. It is working correctly in the following sample:
https://docs.dhtmlx.com/gantt/snippet/3406a1e8