Essential Gantt for WPF is a MS Project-like Project Viewer with built-in grid, schedule and resource assignment constraints. It is designed to assist project managers in developing plans, assigning resources to the task, tracking task progress and so on. Some of the key features of Gantt control are: drag support for increasing and decreasing the Start and Finish Date of the Task, Drag and Drop support for the task within a row and automatic data synchronization between Grid and Chart. This page has information about the Gantt Control.
On this page:
Requirements
This control is available only for Windows WPF applications
Configuration
- Go to Displays / Draw.
- On the Components Panel, select Charts, then GanttChart.
- Click or drag-and-drop it on the Drawing area to use it.
- Double-click the object to open the configuration window.
Configuration | Description |
|---|---|
Control Name | Defines the name used to identify the control. |
Data Source | Specifies the data source used to populate the Gantt chart. |
Visual Style | Enables you to customize the appearance of the control. The available options for Visual Style are: VS2010 |
Connector Stroke | Sets the color for the connector lines between tasks. |
Schedule Background | Specifies the background color of the schedule area. |
Schedule Foreground | Defines the text color for the schedule area. |
Task Node Background | Sets the background color for the task nodes. |
Grid Header Background | Specifies the background color of the grid header. |
Grid Header Foreground | Defines the text color of the grid header. |
Show Chart Lines | Toggles the visibility of lines between chart elements. |
Show Non-Working Hours Background | Displays the background color for non-working hours. |
Use Auto Update Hierarchy | Enables automatic updates for hierarchical task dependencies. |
Show Baseline | Toggles the visibility of the project baseline on the chart. |
Baseline Color | Sets the color for the baseline representation on the chart. |
Baseline Thickness | Specifies the thickness of the baseline line. |
Field Name | Selects the data field used for the specific column (e.g., TaskName, StartDateTime). |
Column Name | Defines the custom name for the selected column. |
Property | Description |
|---|---|
GridHeaderBackground | Changes the background color for Grid Header row. |
GridHeaderForeground | Changes the foreground color for Grid Header row. |
ScheduleBackground | Changes the background color for Schedule row. |
ScheduleForeground | Changes the foreground color for Schedule row. |
ProgressIndicatorBackground | Changes the background color for Progress bar. |
ConnectorStroke | Changes the stroke color for connector. |
TaskNodeBackground | Changes the background color for task node. |
ShowChartLines | Changes the background color for Progress bar. |
ShowNonWorkingHoursBackground | Indicates holidays with a background color. |
Show Baseline | Toggles the visibility of the project baseline on the chart. |
BaselineColor | Sets the color for the baseline representation on the chart. |
BaselineStrokeThickness | Specifies the thickness of the baseline line. Default value is 3d |
Below are the properties listed, which are not exposed in the Gantt Control configuration window but you can still make use of it through the CodeBehind.
Property | Description |
|---|---|
Predecessor | Enables you to set the relationship between the tasks. |
GanttTaskRelationship | Contains four relationships: StartToStart, StartToFinish, FinishToFinish, FinishToStart. |
ValidationMode | Contains two modes: Manual & Auto (Default value is Manual). |
UseAutoUpdateHierarchy | Enable or disable the auto update hierarchy support. |
ToolTipTemplate | Gets or sets the TaskBarCollection Property of GanttControl. |
CustomScheduleSource | Gets/Sets the custom schedule items Source of the Gantt. |
CellDate | Gets/Sets the current schedule cell date in the datetime schedule. |
CellToolTip | Gets/Sets the current schedule cell tool tip. |
CellTimeUnit | Gets/Sets the current schedule row time unit — like weeks, months and so on. |
Content | Gets/Sets the current schedule cell content. |
WeekBeginsOn | Gets or sets the starting day of a week in the project schedule. Default is Sunday. |
FiscalYearBeginsOn | Gets or sets the starting month of a fiscal year. Default is January. |
IsFYNumberingEnabled | Gets or sets the Fiscal Year Numbering. If this property is changed, it will be reflected in the schedule. By default, FY Numbering is set to false. |
DefaultStartTime | Gets or sets the task starting time in a day. This is based on the GanttTime class of the Gantt control. Default is 9.00 AM. |
DefaultEndTime | Gets or sets the task ending time in a day. This is based on the GanttTime class of the Gantt control. Default is 6.00 PM. |
Weekends | Gets or sets the weekend days. Default value is Saturday, Sunday. |
ShowWeekends | Enables or disables the weekend days in schedule. Default value is true. |
ExcludeWeekends | Excludes or includes the weekend days in duration calculation. Default value is false. |
ShowNonWorkingHoursBackground | Enables or disables the background for weekend days. Default value is true. |
UseOnDemandSchedule | To get the expected performance you need to use dynamic schedule rendering. |
BaseCellMaxLength | Splits the schedule cells by comparing the cell size with the API value on zooming-in |
BaseCellMinLength | Merges schedule cells by comparing the cell size with the API value on zooming-out |
ZoomFactor | Zooming takes place based on the ZoomFactor. The ZoomFactor should be greater than zero. |
HighlightedItems | The items that are passed through this API will be highlighted in Gantt chart region. The items should be in linear form. |
HighlightItemBrush | Specifies the color in which items should be highlight |
CurrentDateLine | Gets the user-defined line for the DateTime indicator. |
StickCurrentDateLineTo | Get/sets the StickCurrentDateLineTo property of the Gantt control. Default is Today. |
Background | Gets/sets background color of strip line. |
Content | Gets/sets the content of the strip line. |
ContentTemplate | Gets/sets the content template of the strip line. |
ContentTemplateSelector | Gets/sets the TemplateSelector of the strip line. |
StartDate | Gets/sets the start date of the strip line. |
EndDate | Gets/sets the end date of the strip line. |
RepeatBehavior | Gets/sets the repeat behavior of the strip line. |
RepeatFor | Gets/sets the intervals between the repeating strip lines. |
RepeatUpto | Gets/sets DateTime value. The strip line will be repeated up to this value. |
Style | Gets/sets the style for the strip line. |
StyleSelector | Gets/sets the style selector of the strip line. |
VerticalContentAlignment | Gets/sets the vertical alignment of the content present in the strip line. |
HorizontalContentAlignment | Gets/sets the horizontal alignment of the content present in the strip line. |
Type | Gets/sets the type of the strip line. |
Position | Gets/sets the absolute position of the strip line for Absolute strip line type. |
Height | Gets/sets the absolute height of the strip line for Absolute strip line type. |
Width | Get/sets the absolute width of the strip line for Absolute strip line type. |
ShowStripLines | Gets the user option to show the strip lines. |
StripLines | Get/sets the collection of StripLineInfo from the user. |
To configure the Gantt control in the CodeBehind, create an instance for Gantt Control as shown below
T.Wpf.Controls.TGanttControl gant = this.CurrentDisplay.GetControl("controlname") as T.Wpf.Controls.TGanttControl;
With the instance above, it is possible to access all properties of Gantt Control as shown in the below screenshot
Column Mapping
Click the Add button to add a column to the list.
To map user table column with default column, you need to configure the field and column name properties.
Select Field and map the user column with column name textbox
E.g.: In Field, we selected “TaskId” from the default column and I have mapped user column “ID” to the default “TaskId” column, as in the image above.
Click OK to save the configuration.
Runtime
To view the data in the runtime as shown in the screenshot below, you need to configure DataSource in the Gantt Control configuration window. It can be a tag or a dataset
Samples configurations
Sample 1
Create a tag with a type of DataTable (E.g.: TestTable) as shown in the below screenshot
2. In CodeBehind DisplayOpening() method, create a datatable and assign it to ‘Tag.TestTable’ as shown in the screenshot below.
public void DisplayOpening()
{
DataTable dt = new DataTable("TaskDetails");
dt.Columns.Add("TaskId", typeof(int));
dt.Columns.Add("TaskName", typeof(string));
dt.Columns.Add("StartDate", typeof(DateTime));
dt.Columns.Add("FinishDate", typeof(DateTime));
dt.Columns.Add("Progress", typeof(Double));
dt.Columns.Add("ParentId", typeof(string));
dt.Columns.Add("PrecedesserTaskId", typeof(string));
dt.Columns.Add("PredecessorDependencyRelation", typeof(string));
dt.Columns.Add("Cost", typeof(int));
dt.Columns.Add("BaseLineCost", typeof(int));
dt.Columns.Add("BaseLineStart", typeof(DateTime));
dt.Columns.Add("BaseLineFinish", typeof(DateTime));
dt.Rows.Add(1, "Adam", new DateTime(2022, 2, 1), new DateTime(2022, 2, 4), 40d, "", "", "", 1000, 999, new DateTime(2022, 2, 1), new DateTime(2022, 2, 5));
dt.Rows.Add(2, "Eve", new DateTime(2022, 2, 7), new DateTime(2022, 2, 9), 40d, 1, "", "", 1000, 800, new DateTime(2022, 2, 7), new DateTime(2022, 2, 12));
dt.Rows.Add(2, "Kain", new DateTime(2022, 2, 7), new DateTime(2022, 2, 9), 40d, 1, "", "", 2000, 2600, new DateTime(2022, 2, 5), new DateTime(2022, 2, 11));
dt.Rows.Add(10, "Hebel", new DateTime(2022, 2, 7), new DateTime(2022, 2, 16), 40d, 1, "", "", 1500, 1600, new DateTime(2022, 2, 6), new DateTime(2022, 2, 17));
dt.Rows.Add(13, "Extraterrestrial", new DateTime(2022, 2, 7), new DateTime(2022, 2, 14), 40d, 10, 14, 1, 1800, 1600, new DateTime(2022, 2, 6), new DateTime(2022, 2, 13));
@Tag.TestTable = dt;
}
In the screenshot above, columns ParentId, PrecedesserTaskId and PredecessorDependencyRelation are string type. Input for these columns should be empty string or NULL if there is no data.
3. In configuration window, Data Source is configured as ‘Tag.TestTable’.
In the example, the table columns are in sync with default table columns, so it is necessary to map the columns
4. Click Ok to save the configuration.
5. Click Run Test to start the test.
6. In Runtime, now it is possible to see the startup window as shown in the screenshot below.
Sample 2
1. Create a tag with a type of DataTable (E.g.: TestTable1) as shown in the screenshot below.
2. In code behind DisplayOpening() method, create a datatable and assign it to ‘Tag.TestTable1’ as shown in the below screenshot.
public void DisplayOpening()
{
DataTable dt1 = new DataTable("TaskDetails");
dt1.Columns.Add("ID", typeof(int));
dt1.Columns.Add("Name", typeof(string));
dt1.Columns.Add("Start", typeof(DateTime));
dt1.Columns.Add("Finish", typeof(DateTime));
dt1.Columns.Add("Progress", typeof(Double));
dt1.Columns.Add("PID", typeof(string));
dt1.Rows.Add(1, "Adam", new DateTime(2022, 2, 1), new DateTime(2022, 2, 4), 40d, "");
dt1.Rows.Add(2, "Eve", new DateTime(2022, 2, 7), new DateTime(2022, 2, 9), 40d, 1);
dt1.Rows.Add(2, "Kain", new DateTime(2022, 2, 7), new DateTime(2022, 2, 9), 40d, 1);
dt1.Rows.Add(10, "Hebel", new DateTime(2022, 2, 7), new DateTime(2022, 2, 16), 40d, 1);
dt1.Rows.Add(13, "Extraterrestrial", new DateTime(2022, 2, 7), new DateTime(2022, 2, 14), 40d, 10);
@Tag.TestTable1 = dt1;
}
In the example, the table columns did not match with the default columns. In this case, it is necessary to map the columns in the configuration window.
Field Name represents default column, and Column Name represents user table column
3. In configuration window, datasource is configured as ‘Tag.TestTable1’
In screenshot above screenshot, columns are mapped with default columns.
4. Click Ok to save the configuration.
5. Click Run Test to start the test
6. In Runtime, now you can able to see the startup window as shown in the below screenshot
Sample 3
In this sample, the data source is a table from SQL server.
1. First, you need to establish connection with your database as shown in the screenshot below.
The screenshot below shows the table from SQL server
In the example, the database table columns did not match with the default columns. In this case, it is necessary to map the columns in the configuration window.
4. In configuration window, Data Source is configured as ‘Dataset.Table.Tasks’.
5. In the screenshot above, columns are mapped with default columns. Click Ok to save the configuration.
6. Click Run Test to start the test.
7. In Runtime, now you can able to see the startup window as shown in the below screenshot
In this section: