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 using clauses:


using DlhSoft.Web.Mvc;

                                

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 - MVC - and remove the others, or compilation error messages may appear.


Add appropriate DlhSoft.* script references to the head section(s) of HTML content in your ASP .NET MVC based application (e.g. in Views/Shared/_Layout.cshtml file):


<head>
  …
  <script src="/Scripts/DlhSoft.ProjectData.GanttChart.HTML.Controls.js" type="text/javascript"></script>
  <script src="/Scripts/DlhSoft.Data.HTML.Controls.js" type="text/javascript"></script>
  <script src="/Scripts/DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.js" type="text/javascript"></script>
</head>

                                

Note: For an ASP .NET Core app script source files are copied at build time to wwwroot/js folder (therefore, replace /Scripts with ~/js after pasting the snippet above.)


Use HTML extensions to generate client side components in code behind:


@(Html.GanttChartView(component =>
{
    // Settings.
    component.Columns[(int)ColumnType.Content].Header = "Activity";
    // CSS classes.
    component.StandardBarCssClass = "dsgc-standard-bar";
    // Item change action set up (post).
    component.ItemChangeAction = "UpdateGanttChartItem";
}))

                                

Data items

To load and present data items within GanttChartView or other Gantt Chart based component instances initialize and pass item collections as model objects. 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).

public ActionResult GanttChartView()
{
    var item1 = new GanttChartItem { Content = "Task 1" },
    var item2 = new GanttChartItem { Content = "Task 2", Start = DateTime.Today.AddDays(1), Finish = DateTime.Today.AddDays(5), 
                                     AssignmentsContent = "Resource 1, Resource 2 [50%]" }
    var model = new[] { item1, item2 };
    …
    return model;
}

                                

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:


item2.Predecessors.Add(new PredecessorItem { Item = item1 });

                                

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 upon HTML extension initialization action. 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:


component.Columns[(int)ColumnType.Content].Header = "Work items"; 
component.Columns[(int)ColumnType.Content].Width = 240; 
component.Columns[(int)ColumnType.Start].  Header = "Beginning"; 
component.Columns[(int)ColumnType.Finish]. Header = "End";
component.Columns.Add(new Column { Header = "Description", Width = 200, PropertyName = "Description" });
component.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:


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

                                

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


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

                                

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


component.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:


component.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 }
};
component.HeaderHeight = 21 * 3;

                                

Appearance

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


component.StandardBarFill            = Color.LightGreen;
component.StandardBarStroke          = Color.Green;
component.StandardCompletedBarFill   = Color.DarkGreen;
component.StandardCompletedBarStroke = Color.DarkGreen;
component.SummaryBarFill             = Color.DarkGreen;
component.SummaryBarStroke           = Color.DarkGreen;
component.MilestoneBarFill           = Color.DarkGreen;
component.MilestoneBarStroke         = Color.DarkGreen;
component.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:


component.StandardTaskTemplateClientCode    = "…"; 
component.SummaryTaskTemplateClientCode     = "…"; 
component.MilestoneTaskTemplateClientCode   = "…"; 
component.ExtraTaskTemplateClientCode       = "…"; 
component.AssignmentsTemplateClientCode     = "…"; 
component.DependencyLineTemplateClientCode  = "…"; 
component.ItemTemplateClientCode            = "…"; // Task bar tool tip
component.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):


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

                                

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


component.AreTaskDependencyConstraintsEnabled = true;
component.IsMouseWheelZoomEnabled = false; 
component.UpdateScaleInterval = TimeSpan.FromHours(1); 
component.IsBaselineVisible = true;
component.AlternativeRowBackColor = Color.Silver;

                                

Handling events

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


public ActionResult UpdateGanttChartItem(GanttChartItem item)
{
    // Placeholder for saving changes to database.
    Debug.WriteLine($"Item {item.Content} at index {item.ItemIndex} has been updated.");
    return new HttpStatusCodeResult(HttpStatusCode.OK); // or: return Ok();
}

                                

component.ItemPropertyChangeHandlerClientCode  = "…";

                                

Other types of changes also provide client side notifications:


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