RadiantQ jQuery Gantt Package
Dependency Lines
Previous Topic  Next Topic 

Dependency Lines

Yes, even render dependency lines between bars in FlexyGantt. The FlexyGantt doesn't enforce any times or constraints as mentioned already, but these dependency lines might help visualize some dependencies that you have between tasks in your model.

Dependency Information

You could use a like this represent dependency lines in your sample:

   FGDependencyHandler.resolveDependencyInfo(task, "ID", "Predecessor");

Note: This resolveDependencyInfo implemented in "FGDependencyHandler.js" file which is in sample level scripts folder that you can customize it as you needed.

The Predecessor(StartTask) and ID(EndTask) should refer to objects in your model that represent tasks (bars in the chart area).


Here are the available dependency types that you can use,

Dependency Type

FinishToStart (Default)




which is a type defined by Gantt. This allows you to define how you want the lines to be rendered between the Start and End task, but it's optional, in which case the usual FinishToStart approach will be used.

Then create a list of DependencyInfo instances and bind it to the gantt as follows:


         DependencyListSource: depLinesList


Specifying Bindings in Sample

Assuming each row is represented by an Employee with these properties:

Employee {EName, EmployeeTasks }

where EmployeeTasks is a list of type Task:

Task{ TaskName, StartTime, EndTime}

Then in Sample you can specify these bindings to let the gantt automatically figure out the relationships and render the dependency lines:


                DependencyLineStartRowItemBinding: new RadiantQ.BindingOptions("StartTask.Employee"),

                DependencyLineEndRowItemBinding: new RadiantQ.BindingOptions("EndTask.Employee"),

                DependencyLineStartItemBinding: new RadiantQ.BindingOptions("StartTask"),

                DependencyLineEndItemBinding: new RadiantQ.BindingOptions("EndTask"),

                DependencyLineTypeBinding: new RadiantQ.BindingOptions("DependencyType"),

                DependencyLineStartItemYPosAdjustmentBinding: new RadiantQ.BindingOptions("StartTask", RadiantQ.Gantt.BindingMode.TwoWay, new YPosAdjustmentConverter()),

                DependencyLineEndItemYPosAdjustmentBinding: new RadiantQ.BindingOptions("EndTask", RadiantQ.Gantt.BindingMode.TwoWay, new YPosAdjustmentConverter()),


Here is a sample FlexyGantt with dependency lines between tasks:

FlexyGantt with dependency lines

This is illustrated in this samples:

In HTML                : ..\Samples\FlexyGanttWithDepLines.htm.

In ASP.NET MVC     : ..\Views\Home\FlexyGantt\FlexyGanttWithDepLines.cshtml.

In ASP.NET            : ..\Samples\FlexyGantt\FlexyGanttWithDepLines.aspx.

RadiantQ 2009-2017. All Rights Reserved.