Project1 dependencies in project2. if project2 collapsed can we show the project 1 dependencies


#1

What happens Project 2 not loaded and if Projects 1 have dependencies from Project 2 ?Can we do partial load of project?


#2

Hello,

Gantt chart can contain links that are connected to tasks that aren’t loaded,
such links won’t be displayed and critical path and auto-scheduling will ignore them.

Can you please clarify what exactly do you want to do and how do you want such links to look like?


#3

I have Project 1 and project 2 in the gantt chart. project 1 have 3 subtasks and project 2 have 4 subtasks. project 1 subtask dependency with project 2 subtask in this case if i collapse project2 everything collpased under project2 tasks including dependencies which are related to project 1 also.
In that case i want show project1 to project2 dependent tasks or atleast dependency arrow from project1 to project2 linked tasks.


#4

Hi,
sorry for the delay,

you can add extra elements using gantt.addTaskLayer, invisible links can be added that way
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html

For each task you can find whether it has connected links (task.$source and task.$target fields),
then you check whether the other connected task for a link is hidden. And if so - add a custom element to indicate a link

https://docs.dhtmlx.com/gantt/desktop__link_object_operations.html
https://docs.dhtmlx.com/gantt/api__gantt_istaskvisible.html

code:

gantt.addTaskLayer(function (task) {
	var hiddenLinks = [];
	var fromStart = [];
	var fromEnd = [];
	var linkTypes = gantt.config.links;
	task.$source.forEach(function(linkId){
		var link = gantt.getLink(linkId);
		if(!gantt.isTaskVisible(link.target)){
			hiddenLinks.push(link);
			if(link.type == linkTypes.start_to_start || link.type == linkTypes.start_to_finish){
				fromStart.push(link);
			}else{
				fromEnd.push(link);
			}
		}
	});
	task.$target.forEach(function(linkId){
		var link = gantt.getLink(linkId);
		if(!gantt.isTaskVisible(link.source)){
			hiddenLinks.push(link);
			if(link.type == linkTypes.finish_to_start || link.type == linkTypes.start_to_start){
				fromStart.push(link);
			}else{
				fromEnd.push(link);
			}
		}
	});

	if(!hiddenLinks.length){
		return false;
	}

	var taskPosition = gantt.getTaskPosition(task);

	var el = document.createElement("div");
	var markerWidth = 30;
	if(fromStart.length) {
		var marker = document.createElement("div");
		marker.className = "link-marker";
		marker.style.width = markerWidth + "px";
		marker.style.left = (taskPosition.left) - markerWidth + "px";
		marker.style.top = (taskPosition.top + gantt.config.row_height / 2) + "px";
		el.appendChild(marker);
	}

	if(fromEnd.length) {
		var marker = document.createElement("div");
		marker.className = "link-marker";
		marker.style.width = markerWidth + "px";
		marker.style.left = (taskPosition.left + taskPosition.width) + "px";
		marker.style.top = (taskPosition.top + gantt.config.row_height / 2) + "px";
		el.appendChild(marker);
	}

	return el;
});

Live demo:
http://snippet.dhtmlx.com/5/59678aa00 (be sure to check HTML tab for css)