Get started

Get and apply the software library to your project using the NuGet package.

The necessary DlhSoft.* assembly references (based on whether you are using .NET Framework or .NET Core) are automatically added to your application project in Visual Studio®. Reference the appropriate namespaces in code with Register elements and/or using clauses in code behind:


<%@ Register TagPrefix="pdgcc" Namespace="DlhSoft.Web.UI.WebControls" 
                               Assembly="DlhSoft.ProjectData.GanttChart.ASP.Controls" %>

                                

using DlhSoft.Web.UI.WebControls;

                                

Note: If you used NuGet to get the DlhSoft assemblies in a .NET Framework 4.5+ environment, both *.ASP.*, targeting ASP .NET WebForms and *.MVC.*, targeting ASP .NET MVC, assemblies are added; keep only the ones that target your project's platform - ASP - and remove the others, or compilation error messages may appear.


Add the required control instances as child nodes of appropriate container elements or create component objects in code behind:


<pdgcc:GanttChartView ID="GanttChartView" runat="server" … />

                                

var ganttChartView = new GanttChartView { … };
Page.Controls.Add(ganttChartView);

                                

Data items

To load and present data items within GanttChartView or other Gantt Chart based component instances initialize their Items collections (with a single setter or Add method calls). The item type to use depends on the actual component type. For Gantt Chart controls define GanttChartItem objects providing these properties:

  • Content values usually specify task names;
  • Start and Finish date and time values indicate the scheduled times of their displayed bars;
  • CompletedFinish date and time values specify the schedule times of their completion displayed bars (indicating completion percentages);
  • IsMilestone Boolean values determine the project milestones that are presented as diamond shapes in the chart;
  • AssignmentsContent values specify indicate the assigned resource names of each task, separated by commas;
  • Indentation values generate the hierarchical work breakdown structure of the project (summary and standard tasks).

var item1 = new GanttChartItem { Content = "My summary task" };
var item2 = new GanttChartItem { Content = "My standard task", Indentation = 1,
                                 Start = DateTime.Today, Finish = DateTime.Today.AddDays(5), CompletedFinish = DateTime.Today.AddDays(3),
                                 AssignmentsContent = "My resource" };
GanttChartView.Items = new ObservableCollection<GanttChartItem> { item1, item2 };
var item3 = new GanttChartItem { Content = "My milestone", Indentation = 1,
                                 IsMilestone = true };
GanttChartView.Items.Add(item3);

                                

To initialize dependencies between Gantt Chart bars, use the successor item’s Predecessors collection. The referred Item is determined by reference within the component’s Items collection. DependencyType enumeration supports all common types of task links:


item3.Predecessors.Add(new PredecessorItem { Item = item2, DependencyType = DependencyType.FinishFinish });

                                

You may supplementary customize items using their CustomValues dictionaries, if needed:


item.CustomValues["Description"] = "My task’s description";

                                

To customize the displayed grid columns, use the Columns property of the component. By design, the Content column type displays data hierarchically. You may also prepare new or updated Column objects referring custom values by PropertyName or using JavaScript® statements referring item values as defined by CellTemplateClientCode:


GanttChartView.Columns[(int)ColumnType.Content].Header = "Work items"; 
GanttChartView.Columns[(int)ColumnType.Content].Width = 240; 
GanttChartView.Columns[(int)ColumnType.Start].  Header = "Beginning"; 
GanttChartView.Columns[(int)ColumnType.Finish]. Header = "End";
GanttChartView.Columns.Add(new Column { Header = "Description", Width = 200, PropertyName = "Description" });
GanttChartView.Columns.Add(new Column { Header = "Description", Width = 200, 
                                        CellTemplateClientCode = "return window.document.createTextNode(item.customDescriptionValue);" });

                                

Timeline definition

To specify the scrollable timeline and the zoom level of the chart:


GanttChartView.SetTimeline(start, finish);
GanttChartView.HourWidth = zoomLevel;

                                

To specify the time schedule displayed and used by default by the control:


GanttChartView.WorkingWeekStart  = DayOfWeek.Monday;
GanttChartView.WorkingWeekFinish = DayOfWeek.Friday;
GanttChartView.VisibleWeekStart  = DayOfWeek.Sunday;
GanttChartView.VisibleWeekFinish = DayOfWeek.Saturday;
GanttChartView.VisibleDayStart   = TimeOfDay.Parse("09:00:00"); // 9 AM
GanttChartView.VisibleDayFinish  = TimeOfDay.Parse("17:00:00"); // 5 PM

                                

Alternatively, you can use Schedule objects, which are supported also at task item level:


GanttChartView.Schedule = new Schedule(workingWeekStart: DayOfWeek.Monday, workingWeekFinish: DayOfWeek.Friday …);
item.Schedule           = new Schedule(…);

                                

To set up the scales displayed by the control use the Scales collection. The Scale objects define their type, header texts, and separator lines. Weeks scales are displayed as starting on the day of week defined by the current culture (CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek). Finally, if you change the scale count, update the HeaderHeight value accordingly:


GanttChartView.Scales = new List<Scale>
{
    new Scale { ScaleType = ScaleType.Months, HeaderTextFormat = ScaleHeaderTextFormat.Month, IsSeparatorVisible = true },
    new Scale { ScaleType = ScaleType.Weeks,  HeaderTextFormat = ScaleHeaderTextFormat.Date,  IsSeparatorVisible = true },
    new Scale { ScaleType = ScaleType.Days,   HeaderTextFormat = ScaleHeaderTextFormat.Day }
};
GanttChartView.HeaderHeight = 21 * 3;

                                

Appearance

To configure the look of the Gantt Chart bars (alternative CssClass properties are also available):


GanttChartView.StandardBarFill            = Color.LightGreen;
GanttChartView.StandardBarStroke          = Color.Green;
GanttChartView.StandardCompletedBarFill   = Color.DarkGreen;
GanttChartView.StandardCompletedBarStroke = Color.DarkGreen;
GanttChartView.SummaryBarFill             = Color.DarkGreen;
GanttChartView.SummaryBarStroke           = Color.DarkGreen;
GanttChartView.MilestoneBarFill           = Color.DarkGreen;
GanttChartView.MilestoneBarStroke         = Color.DarkGreen;
GanttChartView.DependencyLineStroke       = Color.Green;

                                

You may also initialize individual item appearance settings:


item1.StandardBarFill = Color.LightGreen;
item2.StandardBarFill = Color.Brown;

                                

Alternatively or supplementary, you can configure the bar, dependency line, and tool tip templates using JavaScript® based client side statements:


GanttChartView.StandardTaskTemplateClientCode    = "…"; 
GanttChartView.SummaryTaskTemplateClientCode     = "…"; 
GanttChartView.MilestoneTaskTemplateClientCode   = "…"; 
GanttChartView.ExtraTaskTemplateClientCode       = "…"; 
GanttChartView.AssignmentsTemplateClientCode     = "…"; 
GanttChartView.DependencyLineTemplateClientCode  = "…"; 
GanttChartView.ItemTemplateClientCode            = "…"; // Task bar tool tip
GanttChartView.PredecessorItemTemplateClientCode = "…"; // Dependency line tool tip

                                

More settings

To set up assignable resources and define their costs, and to set up resource schedules to use when they are assigned on task items without specific schedules (considering the first resource among the ones assigned with maximum allocation units):


GanttChartView.AssignableResources       = …; 
GanttChartView.ResourceQuantities        = …; 
GanttChartView.SpecificResourceHourCosts = …;
GanttChartView.ResourceSchedules         = …;

                                

To further configure the look and feel, behavior, and other aspects of the components use their other member properties:


GanttChartView.AreTaskDependencyConstraintsEnabled = true;
GanttChartView.IsMouseWheelZoomEnabled = false; 
GanttChartView.UpdateScaleInterval = TimeSpan.FromHours(1); 
GanttChartView.IsBaselineVisible = true;
GanttChartView.AlternativeRowBackColor = Color.Silver;
GanttChartView.Classic = true; // reverts multiple default settings to the pre-2023 version of the component

                                

Hierarchical operations

To get the root tasks from the managed collection:


foreach (var root in GanttChartView.GetRoots()) { … }; 

                                

To get the parent, or enumerate ascendants, children, or descendants of a specific task item:


var parent = GanttChartView.GetParent(item);
foreach (var ascendant in GanttChartView.GetAllParents(item))   { … };
foreach (var child in GanttChartView.GetChildren(item))         { … };
foreach (var descendant in GanttChartView.GetAllChildren(item)) { … };

                                

Project management

To reschedule tasks so that project work is fully optimized or assigned resources are not over-allocated:


GanttChartView.OptimizeWork();
GanttChartView.LevelResources();

                                

To enumerate critical tasks (those that by rescheduling might affect the finish date and time of the project):


foreach (var item in GanttChartView.GetCriticalItems()) { … };

                                

Importing, exporting, and printing

To import or export project data from or to Microsoft® Project® XML files (an alternative ProjectXmlSerializer class is also available if you need advanced control during serialization and deserialization):


GanttChartView.LoadProjectXml(inputStream);
GanttChartView.SaveProjectXml(outputStream);

                                

To send the Gantt Chart and associated data grid content of specified columns to the printer (allowing the end user to select the printing settings), optionally rotating the output to generate landscape output by default:


GanttChartView.Print("My document", columnIndexes: new int[] {(int)ColumnType.Content, (int)ColumnType.Finish}, rotate: true);

                                

Handling events

You may run custom code upon specific item changes, either on server side or on client side (using JavaScript® statements):


GanttChartView.ItemPropertyChanged += (sender, e) { … }; 
GanttChartView.SelectionChanged    += (sender, e) { … };
GanttChartView.ItemPropertyChangeHandlerClientCode  = "…"; 
GanttChartView.ItemSelectionChangeHandlerClientCode = "…";

                                

Other types of changes also provide client side notifications:


GanttChartView.HourWidthChangeHandlerClientCode     = "…"; // Zoom level changed
GanttChartView.DisplayedTimeChangeHandlerClientCode = "…"; // Chart date scroll changed

                                

More operations

To display the current items from a Gantt Chart control in different way using a Schedule Chart:


ScheduleChartView.Items = GanttChartView.GetScheduleChartItems();

                                

Other member methods and events are available to provide advanced operations with the components and the data items they manage:


GanttChartView.MoveItem(item, toIndex, includeChildren: false);
GanttChartView.MoveItemUp(item, includeChildren: true, withinParent: true);
GanttChartView.MoveItemDown(item, includeChildren: true, withinParent: true);
var projectCost = GanttChartView.GetProjectCost();
var finish      = GanttChartView.GetProjectFinish();