Task Dependencies in JQuery Gantt widget

Task dependencies or task relationship can be established between two task in Gantt. This dependencies effect the project schedule, if we change the predecessor of one task it will affect the successor task, which effect next task and so on.

Task Relationship Types

Task relationships are categorized into four types based on the start and finish date of the task.

Start to Start(SS)

You cannot start a task until the other task also starts.

Task-Relationship_img1

Start to Finish(SF)

You cannot finish a task until the other task is started.

Task-Relationship_img2

Finish to Start(FS)

You cannot start a task until the other task is completed.

Task-Relationship_img3

Finish to Finish(FF)

You cannot finish a task until the other task is completed.

Task-Relationship_img4

Define task relationship

Task relationships are defined in data source as string value and this values are mapped to Gantt control by using predecessorMapping property. The following code example shows you how to enable the predecessor in the Gantt control.

  • javascript
  • var data = [
        //...
        {
            taskID: 4, 
            taskName: "Develop prototype"
            //...
        },
        {
            taskID: 5, 
            taskName: "Get approval from customer",
            predecessor: "4FS",
            //...
        },
        {
            taskID: 6,
            taskName: "Design complete",
            predecessor: "5FS",
            //...
        }
    ];
    
    $("#GanttContainer").ejGantt({
        //...
        dataSource: data,
        predecessorMapping: "predecessor",
    });

    The following screenshot displays the output of the above code.

    Task-Relationship_img5

    Predecessor offset with duration units

    In Gantt, predecessor offset can be defined with the following duration units.

    • Day
    • Hour
    • Minute

    We can define offset with various offset duration units for predecessors by using the below code example.

  • javascript
  • var data = [
        //...
        {
            //...
            predecessor: "3FS+2d",
        },
        { 
            //...
            predecessor: "3FS+16h"
        },
        { 
            //...
            predecessor: "3FS+960m"
        }
    ];
    $("#GanttContainer").ejGantt({
        //...
        dataSource: data,
        predecessorMapping: "predecessor",
    });

    The following screen shot depicts the duration unit support in the predecessor offset.

    Task-Relationship_img6

    Enable/disable predecessor validation

    By default Gantt tasks date values are validated as per predecessor task and it’s relationship type, we can disable/enable this validation by using enablePredecessorValidation property. The following code example shows how to disable predecessor validation in Gantt.

  • javascript
  • $("#GanttContainer").ejGantt({
        //...
        dataSource: data,
        predecessorMapping: "predecessor",
        enablePredecessorValidation: false,
    });

    The below screenshot shows the output of above code example.

    Task-Relationship_img8
    Predecessor validation disabled mode

    Task-Relationship_img9
    Predecessor validation enabled mode

    In Gantt, it is possible to validate the taskbar editing based on the predecessor connections. Below are the following ways to validate the taskbar editing.

    • Using actionBegin event
    • Using validation dialog

    Using actionBegin event

    The actionBegin event with requestType argument as validateLinkedTask will be triggered when editing a task with predecessor links.

    It is possible to validate the editing within the actionBegin event using the validateMode event argument. The validateMode event argument has the following properties.

    Argument

    Default value

    Description

    args.validateMode.respectLink

    false

    In this validation mode, the predecessor links will be considered as high priority. With this mode enabled, when the successor task is moved before predecessor task’s end date, the editing will be reverted and dates will be validated based on the dependency links.



    args.validateMode.removeLink

    false

    In this validation mode, the taskbar editing will be considered as high priority, where in the case of inappropriate task dates the dependency links will be removed and tasks will be moved to the edited date.



    args.validateMode.preserveLinkWithEditing

    true

    In this validation mode, taskbar editing will be considered along with the dependency links. There will be no validations in task editing.



    By default, the preserveLinkWithEditing validation mode will be enabled thus the validations will not occur when editing the linked tasks.

    The below code snippet explains enabling the respectLink validation mode while editing the linked tasks in the actionBegin event.

  • javascript
  • $("#GanttContainer").ejGantt({
        actionBegin: function(args) {
            if (args.requestType == "validateLinkedTask") {
                args.validateMode.respectLink = true;
            }
        },
    });

    Using validation dialog

    When disabling all the validation modes in the actionBegin event, a validation popup will be displayed prompting the user to select the validation mode to validate taskbar editing.

    This validation popup will display different options based on the successor task’s start date after editing.

    If the user moved the successor task, that starts after predecessor task’s end date then the dialog will be rendered with below options,

    • Cancel, Keep the existing link.
    • Remove the link and move the task to start on edited date.
    • Move the task to start on edited date and keep the link.

    If the user moved the successor task, that starts before the predecessor task’s end date then the dialog will be rendered with below options.

    • Cancel, Keep the existing link.
    • Remove the link and move the task to start on edited date.

    The following code example explains this.

  • javascript
  • $("#GanttContainer").ejGantt({
        actionBegin: function(args) {
            if (args.requestType == "validateLinkedTask") {
                args.validateMode.preserveLinkWithEditing = false;
            }
        },
    });

    In this case, if the user dragging action violated the predecessor type then the following dialog will be rendered to perform operation.

    Task-Relationship_img7