Interactive Editing and Automatic Scheduling

• Jul 22, 2020
• 8 minutes to read

Our WinForms Gantt Control supports interactive editing. Users can edit tasks in the chart and task areas. In the task area, users can invoke a cell editor to update a task’s start/finish date, progress, or duration. In the chart area, users can move a task to a new time slot, update progress, or change a dependency via drag and drop. Changes in the chart area are automatically reflected in the task area, and vice versa.

Edits in the Chart

You can allow users to reschedule a task, update progress, and create, change, or remove a dependency. Changes are automatically reflected in the task list.

The OptionsCustomization property allows you to access the following properties:

• AllowModifyTasks — enable this option to allow users to reschedule (resize or move) tasks.

  

  

• AllowModifyProgress — enable this option to allow users to update a task’s progress.

  

  See Task Progress for more information.

• AllowModifyDependencies — if enabled, users can change task dependencies. To remove a dependency or attach it to a different task, they need to hover the dependency line first. To create a new dependency, users need to drag points displayed at task edges.

  

  See Task Dependencies for more information.

Note

The Editable option must be enabled and the ReadOnly option must be disabled to allow users to modify tasks.

Automatically Reschedule Dependent Tasks

A task can have the following dependent tasks:

• successor tasks — a successor is a task that depends on its predecessors. For example, a successor cannot start until its predecessor finishes. See Task Dependencies for more information.
• summary tasks — a summary task is a parent task that indicates an overall time slot for its child tasks.

When a user modifies a task, the control automatically updates all dependent tasks. For example, if a user postpones a task or extends its duration, the control shifts all successor tasks. The summary task changes its end date. Note that the control uses work week to reschedule tasks. See Workweek Schedule and Exceptions to learn how to specify the workweek.

Use the ScheduleMode option to specify whether to automatically reschedule dependent tasks on changes:

• Auto — the control automatically reschedules all dependent tasks when a user modifies a particular task.
• Manual — the control does not automatically reschedule dependent tasks.

The GanttControl.CustomTaskScheduling event fires during the automatic rescheduling process when the control calculates new start and finish dates for a task. Allows you to cancel rescheduling the current task and stop the rescheduling process for its successors.

The code below shows how to display an unbound column that allows users to specify whether a task should be re-scheduled when its predecessor’s start or finish date changes.

C#

using DevExpress.Utils;
using DevExpress.XtraEditors.Controls;
using DevExpress.XtraEditors.Repository;
using DevExpress.XtraGantt.Options;
using DevExpress.XtraTreeList.Columns;

enum Mode { Manual, Auto };

TreeListColumn colScheduleMode = ganttControl1.Columns.AddField("ScheduleMode");
colScheduleMode.UnboundType = XtraTreeList.Data.UnboundColumnType.Object;
colScheduleMode.Visible = true;
colScheduleMode.AbsoluteIndex = 0;
ganttControl1.TreeListMappings.HierarchyFieldName = "Name";
colScheduleMode.OptionsColumn.AllowSort = false;
colScheduleMode.OptionsColumn.AllowMove = false;
colScheduleMode.Caption = "Task Mode";
RepositoryItemImageComboBox editor = new RepositoryItemImageComboBox();
editor.SmallImages = imageCollection1;
editor.Items.Add(new ImageComboBoxItem("Manually Scheduled", Mode.Manual, 1));
editor.Items.Add(new ImageComboBoxItem("Auto Scheduled", Mode.Auto, 0));
editor.GlyphAlignment = HorzAlignment.Center;
editor.EditValueChanged += (s, e) => { ganttControl1.PostEditor(); };
ganttControl1.RepositoryItems.Add(editor);
colScheduleMode.ColumnEdit = editor;
Dictionary<int, Mode> columnValues = new Dictionary<int, Mode>();
ganttControl1.CustomUnboundColumnData += (sender, e) => {
    if (e.Column.FieldName == "ScheduleMode") {
        if (e.IsGetData) {
            if (!columnValues.ContainsKey(e.NodeID)) {
                columnValues[e.NodeID] = ganttControl1.OptionsBehavior.ScheduleMode == ScheduleMode.Manual ? Mode.Manual : Mode.Auto;
            }
            e.Value = columnValues[e.NodeID];
        }
        if (e.IsSetData && e.Value != null) {
            columnValues[e.NodeID] = (Mode)e.Value;
        }
    }
};
ganttControl1.CustomTaskScheduling += (s, e) => {
    if ((Mode)e.Node.GetValue("ScheduleMode") == Mode.Manual)
        e.Cancel = true;
};
ganttControl1.CustomDrawTask += (s, e) => {
    if ((Mode)e.Node.GetValue("ScheduleMode") == Mode.Manual)
        e.Info.Appearance.BackColor = Color.Green;
};

VB.NET

Imports DevExpress.Utils
Imports DevExpress.XtraEditors.Controls
Imports DevExpress.XtraEditors.Repository
Imports DevExpress.XtraGantt.Options
Imports DevExpress.XtraTreeList.Columns

Private Enum Mode
    Manual
    Auto
End Enum

Dim colScheduleMode As TreeListColumn = ganttControl1.Columns.AddField("ScheduleMode")
colScheduleMode.UnboundType = DevExpress.XtraTreeList.Data.UnboundColumnType.Object
colScheduleMode.Visible = True
colScheduleMode.AbsoluteIndex = 0
ganttControl1.TreeListMappings.HierarchyFieldName = "Name"
colScheduleMode.OptionsColumn.AllowSort = False
colScheduleMode.OptionsColumn.AllowMove = False
colScheduleMode.Caption = "Task Mode"
Dim editor As New RepositoryItemImageComboBox()
editor.SmallImages = imageCollection1
editor.Items.Add(New ImageComboBoxItem("Manually Scheduled", Mode.Manual, 1))
editor.Items.Add(New ImageComboBoxItem("Auto Scheduled", Mode.Auto, 0))
editor.GlyphAlignment = HorzAlignment.Center
AddHandler editor.EditValueChanged, Sub(s, e)
    ganttControl1.PostEditor()
End Sub
ganttControl1.RepositoryItems.Add(editor)
colScheduleMode.ColumnEdit = editor
Dim columnValues As New Dictionary(Of Integer, Mode)()
AddHandler ganttControl1.CustomUnboundColumnData, Sub(sender, e)
    If e.Column.FieldName = "ScheduleMode" Then
        If e.IsGetData Then
            If Not columnValues.ContainsKey(e.NodeID) Then
                columnValues(e.NodeID) = If(ganttControl1.OptionsBehavior.ScheduleMode = ScheduleMode.Manual, Mode.Manual, Mode.Auto)
            End If
            e.Value = columnValues(e.NodeID)
        End If
        If e.IsSetData AndAlso e.Value IsNot Nothing Then
            columnValues(e.NodeID) = CType(e.Value, Mode)
        End If
    End If
End Sub
AddHandler ganttControl1.CustomTaskScheduling, Sub(s, e)
    If CType(e.Node.GetValue("ScheduleMode"), Mode) = Mode.Manual Then
        e.Cancel = True
    End If
End Sub
AddHandler ganttControl1.CustomDrawTask, Sub(s, e)
    If CType(e.Node.GetValue("ScheduleMode"), Mode) = Mode.Manual Then
        e.Info.Appearance.BackColor = Color.Green
    End If
End Sub

Customize Operations

The control fires events at each stage of the operation: when a user starts to modify a task, the task is being modified, the operation is canceled, or the operation is completed. You can handle the following events to customize an operation:

Task

• TaskMoveStarted — fires when a user starts to move a task.
• TaskMoving — repeatedly fires when a user moves a task.
• TaskMoveCanceled — fires when a user presses Esc to cancel the operation.
• TaskMoveCompleted — fires when a user finishes modifying a dependency. Allows you to cancel the operation.
• TaskMoved — fires when a task is successfully moved.

Task Finish Date

• TaskFinishDateModificationStarted — fires when a user starts to modify a task’s finish date.
• TaskFinishDateModification — repeatedly fires when a user modifies a task’s finish date.
• TaskFinishDateModificationCanceled — fires when a user presses Esc to cancel the operation.
• TaskFinishDateModificationCompleted — fires when a user finishes modifying a finish date. Allows you to cancel the operation.
• TaskFinishDateModified — fires when a task’s finish date is successfully modified.

Progress

• TaskProgressModificationStarted — fires when a user starts to modify a task’s progress.
• TaskProgressModification — repeatedly fires when a user modifies a task’s progress.
• TaskProgressModificationCanceled — fires when a user presses Esc to cancel the operation.
• TaskProgressModificationCompleted — fires when a user finishes modifying progress. Allows you to cancel the operation.
• TaskProgressModified — fires when a task’s progress is successfully modified.

Dependency

• TaskDependencyModification — repeatedly fires when the user modifies a task’s dependency.
• TaskDependencyModificationCanceled — fires when the user presses Esc to cancel the operation.
• TaskDependencyModificationCompleted — fires when a user finishes modifying a dependency. Allows you to cancel the operation.
• TaskDependencyModified — fires when a task’s dependency is successfully modified.

The code below shows how to highlight modified/new dependencies.

C#

using DevExpress.XtraGantt;
using DevExpress.DXperience.Demos.CodeDemo.Data;
using DevExpress.LookAndFeel;

List<DependencyInfo> modifiedDependencies = new List<DependencyInfo>();
List<DependencyInfo> createdDependencies = new List<DependencyInfo>();
ganttControl.TaskDependencyModified += (sender, e) => {
    DependencyInfo dependency = new DependencyInfo(e.PredecessorNode.Id, e.SuccessorNode.Id);
    if(e.ChangeType == ChangeType.Modify)
        modifiedDependencies.Add(dependency);
    if(e.ChangeType == ChangeType.Create)
        createdDependencies.Add(dependency);
};
ganttControl.CustomDrawTaskDependency += (sender, e) => {
    DependencyInfo dependency = new DependencyInfo(e.PredecessorNode.Id, e.SuccessorNode.Id);
    var modifiedDependency = modifiedDependencies.FirstOrDefault(x => Equals(x, dependency));
    if(modifiedDependency != null)
        e.Appearance.BackColor = DXSkinColors.FillColors.Danger;
    var createdDependency = createdDependencies.FirstOrDefault(x => Equals(x, dependency));
    if(createdDependency != null)
        e.Appearance.BackColor = DXSkinColors.FillColors.Success;

};

VB.NET

Imports DevExpress.XtraGantt
Imports DevExpress.DXperience.Demos.CodeDemo.Data
Imports DevExpress.LookAndFeel

Dim modifiedDependencies As New List(Of DependencyInfo)()
Dim createdDependencies As New List(Of DependencyInfo)()
AddHandler ganttControl.TaskDependencyModified, Sub(sender, e)
    Dim dependency As New DependencyInfo(e.PredecessorNode.Id, e.SuccessorNode.Id)
    If e.ChangeType = ChangeType.Modify Then
        modifiedDependencies.Add(dependency)
    End If
    If e.ChangeType = ChangeType.Create Then
        createdDependencies.Add(dependency)
    End If
End Sub
AddHandler ganttControl.CustomDrawTaskDependency, Sub(sender, e)
    Dim dependency As New DependencyInfo(e.PredecessorNode.Id, e.SuccessorNode.Id)
    Dim modifiedDependency = modifiedDependencies.FirstOrDefault(Function(x) Equals(x, dependency))
    If modifiedDependency IsNot Nothing Then
        e.Appearance.BackColor = DXSkinColors.FillColors.Danger
    End If
    Dim createdDependency = createdDependencies.FirstOrDefault(Function(x) Equals(x, dependency))
    If createdDependency IsNot Nothing Then
        e.Appearance.BackColor = DXSkinColors.FillColors.Success
    End If
End Sub

Tip

Run the Code Examples demo to see this behavior. Click Run In Visual Studio in the ribbon for source codes.

Tooltips

The control can display tooltips that describe the current operation. Depending on the operation type, tooltips can show the task’s start and finish date, progress, predecessor, or successor.

Use the InteractionTooltipLocation option to enable tooltips and specify their location in the chart: top-right, bottom-left, etc. Tooltips obtain their captions from the specified data field (InteractionTooltipTextFieldName or TextFieldName).

You can also localize the following tooltip captions:

• InteractionTooltipStartCaption — “TASK START”
• InteractionTooltipFinishCaption — “TASK FINISH”
• InteractionTooltipProgressCaption — “PROGRESS”
• InteractionTooltipPredecessorCaption — “PREDECESSOR”
• InteractionTooltipSuccessorCaption — “SUCCESSOR”

See Localization for an example.

Edits in the Tree List

Users can invoke a cell editor to update a task’s start or finish date, progress, or duration. Changes are automatically reflected in the chart area.

Note

To allow users to modify cell values, the Editable option must be enabled. See Data Editing for more information on editing data in the tree list.

Start and Finish Date Change Mode

The TaskDateChangeMode property specifies how a task changes when a user changes the task’s start or finish date:

• MoveTask — the control shifts a task when a user changes the task’s start or finish date.
• UpdateDuration — the control extends/reduces a task’s duration when a user changes the task’s start or finish date.