Coloring dependency lines

Question

Hello,when I drag a task, if the task breaks the dependency (for example a child has start time earlier than parent) I want to change the color of the dependency line.How can I catch the color property of a single dependency line?Thanks.

Punniyamoorthi Elangovan · Answer

Hi Oscar, Thank you for contacting Syncfusion support. We have analyzed and have achieved your requirement using the taskbarEdited client side event. In the below attached sample, we have changed the dependency line color when child taskbar’s start date begins earlier than parent’s start date. There is no direct property to change the color for that specific dependency line and hence we have updated the color using the below work around. Please refer the below code snippet. Please refer the sample link below https://jsplayground.syncfusion.com/hs1q0ixp We also suggest you another solution of changing the taskbar color instead of dependency line color, using the client side event taskbarEditing. When the child task’s date starts earlier than parent’s, then immediately we can change the taskbar’s color while being edited using this event. Can you please confirm if you need this solution, It would be helpful for us to serve you better. Please let us know if you require further assistance on this Regards, Punniyamoorthi

oscar bartolome · Answer

This works fine when editing, but I also need it to color the dependecy line during the load. Is it possible?

Also, I would like to take account into the child tasks. For example if I move a task forward and then surpass the start time of a child task, the dependecy line beetwen this parent-child color must change. Any idea how to do this?

Thanks.

Punniyamoorthi Elangovan · Answer

Hi Oscar, 
Thank you for your update 
We have analyzed and have achieved your requirement using the taskbarEditing and taskbarEdited client side event. In the below attached sample, when dragging the child taskbar then the child taskbar’s start date begins earlier than parent’s start date then we had changed the dependency line color. Please refer the below code snippet. 




taskbarEditing: function (args) { 
                    var ganttObj = $("#GanttContainer").ejGantt("instance"), 
                     ganttRecord = args.rowData, 
                     predecessor = args.rowData.predecessor, 
                     startdate = ganttObj._getPredecessorDate(ganttRecord, predecessor),//Internal method to get validated start date value as per predecessor Collection 
                    editedDate = ganttRecord.item.StartDate; 
                    var parentstartdate = args.model.updatedRecords[predecessor[0].from - 1]; 
                      if(!ej.isNullOrUndefined(startdate)) 
                          if (parentstartdate.startDate.getTime() > editedDate.getTime()) { 
                        for (i = 0; i < predecessor.length; i++) { 
                            if (predecessor[i].to == ganttRecord.index + 1) { 
                                $("#dependencyViewContainerejGanttChartGanttContainer").find("#ConnectorLineparent" + args.rowData.predecessor[i].from + "child" + args.rowData.predecessor[i].to).find(".e-connectorlineContainer").find(".e-line").css("border-color", "red"); 
 
                            } 
                        } 
                    } 
                    else { 
                        for (i = 0; i < predecessor.length; i++) { 
                            if (predecessor[i].to == ganttRecord.index + 1) { 
                                $("#dependencyViewContainerejGanttChartGanttContainer").find("#ConnectorLineparent" + args.rowData.predecessor[i].from + "child" + args.rowData.predecessor[i].to).find(".e-connectorlineContainer").find(".e-line").css("border-color", "black"); 
 
                            } 
                        } 
 
                    } 
                }, 
As per your requirement we have changed the dependency line color based upon the Progress property in create client side event. Please refer the below code snippet. 




create: function (args) { 
                    var ganttObj = $("#GanttContainer").ejGantt("instance") 
                    for (i = 0; i < args.model.updatedRecords.length; i++) { 
                        if (args.model.updatedRecords[i].item.Progress == 50) { 
                            var predecessor = args.model.updatedRecords[i].predecessor; 
                            for (j = 0; j < predecessor.length; j++) { 
                                $("#dependencyViewContainerejGanttChartGanttContainer").find("#ConnectorLineparent" + predecessor[j].from + "child" + predecessor[j].to).find(".e-connectorlineContainer").find(".e-line").css("border-color", "red"); 
                            } 
                        } 
                    } 
                }, 
Please refer the sample link below  
https://jsplayground.syncfusion.com/bsmufvbu 
Please let us know if you require further assistance on this  
Regards,  
Punniyamoorthi