This topic provides you with a conceptual overview and examples configuring the position and size of the tasks, and its timelines proportional to the amount of time over which the tasks span in the WinGanttView™ control.
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
New features introduced with the 13.1 release of the WinGanttView™ control allowing you to configure the positions and size of tasks proportional to their duration using a minimal number of properties. With this configuration, notice how accurate the timeline positioning renders relative to the width of the time slot.
You can easily customize the interface parameters related to the tasks by repositioning and resizing them without any size restrictions. Using the left mouse button dragging operation you will be able to fine-tune your project’s task interface to accommodate your application’s needs.
The following table lists the properties added to the Timeline class to support timeline task sizing and positioning feature.
The following table summarizes the new features of the WinGanttView control. Additional details are available following the summary table.
As the cursor moves, when dragging the timeline, the right-edge of the task changes its position accordingly, even when the cursor is not at the edge of a time slot. Since TaskDragIncrement resolves to one hour for a primary interval of one day, this raises the TaskElementDragging event. The task element’s width changes when the cursor moves approximately 1/24th the width of the time slot. The EndDateTime and Duration properties change by one hour with each mouse movement.
TaskWorkingHourMode = AutoAdjust
TaskPositioning = FillTimeSlots
TaskDragIncrement = 2h (2 hours)
PrimaryInterval = Days
The following table lists the various TaskDragIncrement values of corresponding PrimaryInterval types.
Property settings in code.
In C#:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.AutoAdjust;
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.FillTimeSlots;
ultraGanttView1.TimelineSettings.PrimaryInterval = new DateInterval(1, DateIntervalUnits.Days);
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(2);
----In Visual Basic:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.AutoAdjust
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.FillTimeSlots
ultraGanttView1.TimelineSettings.PrimaryInterval = New DateInterval(1, DateIntervalUnits.Days)
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(2)
----Image before dragging the timeline.
Drag the right edge of a task over one or more time slots.
Image after dragging the timeline.
As the cursor moves, when dragging the timeline, the right edge of the task changes position accordingly, even when the cursor is not at the edge of a time slot. Since TaskDragIncrement is explicitly set to four hours, the TaskElementDragging event is raised. The task element’s width changes when the cursor moves approximately 1/6th the width of the time slot. The EndDateTime and Duration properties change by four hours with each mouse movement.
TaskWorkingHourMode = Manual
TaskPositioning = Proportional
TaskDragIncrement = 4h (4 hours)
PrimaryInterval = Days
Property settings in code
In C#:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.Manual;
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional;
ultraGanttView1.TimelineSettings.PrimaryInterval = new DateInterval(1, DateIntervalUnits.Days);
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(4);
----In Visual Basic:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.Manual
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional
ultraGanttView1.TimelineSettings.PrimaryInterval = New DateInterval(1, DateIntervalUnits.Days)
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(4)
----Image before dragging the timeline
Drag the right edge of a task over one or more time slots.
Image after dragging the timeline
This section demonstrates the percent element’s behavior and configuration.
As the cursor moves, the percent complete bar becomes wider, ending approximately at the cursor position. Each cursor movement of approximately 1/12th of the time slot’s width raises the TaskElementDragging event. The event executes 14 times (once for the beginning phase , 12 times for the moving phase , and once for the ending phase ) during the course of the drag operation.
User defined property settings with percent element are:
TaskWorkingHourMode = Manual
TaskPositioning = Proportional
TaskDragIncrement = 2h (2 hours)
PrimaryInterval = Days
Task spans exactly one day
Property settings in code
In C#:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.Manual;
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional;
ultraGanttView1.TimelineSettings.PrimaryInterval = new DateInterval(1, DateIntervalUnits.Days);
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(2);
----In Visual Basic:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.Manual
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional
ultraGanttView1.TimelineSettings.PrimaryInterval = New DateInterval(1, DateIntervalUnits.Days)
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(2)
----Image before dragging the percent complete bar over a timeline
Move the mouse cursor over the left-edge of a task element until you see the percent complete cursor indicator.
Press the left mouse button down and drag the percent complete bar to the right.
Image after dragging the percent complete bar over a timeline
This section demonstrates the task deadline indicator’s behavior and configuration.
As the cursor moves, the deadline indicator moves in a manner similar to the duration and percent complete drag operations. In this case, every four-mouse move segments bring the indicator across one time slot.
You can add a deadline to any task by using the task’s Deadline property, and assigning a start date to it.
[Task name].Deadline = [Task name].StartDateTime.AddDays([n days]);
User defined property settings of the deadline indicator are:
TaskWorkingHourMode = Manual
TaskPositioning = Proportional
TaskDragIncrement = 6h (6 hours)
PrimaryInterval = Days
Property settings in code
In C#:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.Manual;
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional;
ultraGanttView1.TimelineSettings.PrimaryInterval = new DateInterval(1, DateIntervalUnits.Days);
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(6);
----In Visual Basic:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.Manual
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional
ultraGanttView1.TimelineSettings.PrimaryInterval = New DateInterval(1, DateIntervalUnits.Days)
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(6)
----Image before dragging the deadline indicator
Press the left mouse button down on the deadline indicator
image::images/WinGanttView_Task_And_TimeLine_Positioning_8.png[]and drag it to the right.
Image after dragging the deadline indicator
This section demonstrates the task start date behavior and configuration.
On each mouse move, the left edge of the task snaps to match the drag position on the timeline. As the cursor moves by each mouse drag increment, the StartDateTime and EndDateTime property values change accordingly.
User defined property settings of the task start date are:
TaskWorkingHourMode = Manual
TaskPositioning = Proportional
TaskDragIncrement = 6h (6 hours)
PrimaryInterval = Days
Property settings in code
In C#:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.Manual;
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional;
ultraGanttView1.TimelineSettings.PrimaryInterval = new DateInterval(1, DateIntervalUnits.Days);
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(6);
----In Visual Basic:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.Manual
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional
ultraGanttView1.TimelineSettings.PrimaryInterval = New DateInterval(1, DateIntervalUnits.Days)
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(6)
----Image before dragging the task start date
Press the left mouse button down at about the center of the task element and drag it to the right.
Image after dragging the task start date
This section demonstrates the task-working hour’s behavior.
The task’s width increases with each mouse drag movement as it does when you set TaskWorkingHourMode to AutoAdjust . The duration increases by 2 hours with each drag movement. When the drag operation is committed to ending at 12AM, however, the right edge snaps back to 5PM, necessary to enforce the working hours.
User defined property settings of the task’s working hours are:
TaskWorkingHourMode = AutoAdjust
TaskPositioning = Proportional
TaskDragIncrement = 2h (2 hours)
PrimaryInterval = Days
Property settings in code
In C#:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.AutoAdjust;
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional;
ultraGanttView1.TimelineSettings.PrimaryInterval = new DateInterval(1, DateIntervalUnits.Days);
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(2);
----In Visual Basic:
----ultraCalendarInfo1.TaskWorkingHourMode = TaskWorkingHourMode.AutoAdjust
ultraGanttView1.TimelineSettings.TaskPositioning = TimelineTaskPositioning.Proportional
ultraGanttView1.TimelineSettings.PrimaryInterval = New DateInterval(1, DateIntervalUnits.Days)
ultraGanttView1.TimelineSettings.TaskDragIncrement = TimeSpan.FromHours(2)
----Image before changing the task’s working hours are 8AM – 5PM
Drag the right edge of the task element (starting at 5PM) to the right edge of the time slot (11:59:59PM) and release the left mouse button, committing the drag operation.
Image after the task working hours change is committed at 04:59PM. The task spans up to the end of working hours even when dragged beyond working hours.
The following topic provides additional information related to this topic.