Background Image


for ASP .NET 4+ Forms and HTML5 with optional SharePoint® Web part
built with GanttChartView from Hyper Library

Run demos Demo source code NuGet package Reference

GanttChartView component displays and manages tasks and dependencies using a hierarchical data grid and an attached interactive Gantt Chart accepting drag and drop operations for scheduling task bars and creating dependency lines. Supports custom appearance settings for standard, summary, and milestone tasks for the entire chart or for individual items, as needed.

It records changes performed by the end user on the client side and submits them to the server upon the following postback occurrence.

  • C#
    var items = new List<GanttChartItem>
        new GanttChartItem { Content = "Task 1", Start = new DateTime(…), Finish = new DateTime(…), … },
        new GanttChartItem { Content = "Task 2", Start = new DateTime(…), Finish = new DateTime(…), … },
    items[1].Predecessors.Add(new PredecessorItem { Item = items[0], … });
    GanttChartView.Items = items;
  • Visual Basic®
    Dim items = New List(Of GanttChartItem) From { _
        New GanttChartItem With { .Content = "Task 1", .Start = New Date(…), .Finish = New Date(…), … }, _
        New GanttChartItem With { .Content = "Task 2", .Start = New Date(…), .Finish = New Date(…), … }, _
        … _
    items(1).Predecessors.Add(New PredecessorItem With { .Item = items(0), … });
    GanttChartView.Items = items

Items collection

To load and present data with GanttChartView control, initialize the Items collection of the component, setting up GanttChartItem objects representing timeline tasks identified by these main properties: Indentation, Content, Start, Finish, CompletedFinish, IsMilestone, AssignmentsContent, and Predecessors.

Summary items are determined by checking indentation levels of subsequent items, and can be expanded or collapsed. Standard items are presented as rectangular bars, and milestones as special diamond shapes in the view. Completion rate of a standard item is determined by evaluating CompletedFinish value, representing the date and time up to which the effort is currently considered completed. By convention, AssignmentsContent value may be a string that specifies the resource assignments of the item with optional allocation units in classic format: Resource 1, Resource 2 [50%].

Predecessors collection defines item dependencies and are identified by these properties: Item, DependencyType, and Lag. DependencyType may be Finish-to-Start ("FS"), Start-to-Start ("SS"), Finish-to-Finish ("FF"), or Start-to-Finish ("SF"). An optional lag time span is also supported for item dependencies.

var items = new List<GanttChartItem>
    new GanttChartItem { Content = "Task 1", IsExpanded = false },
    new GanttChartItem { Content = "Task 1.1", Indentation = 1, 
                         Start = new DateTime(year, month, 2, 8, 0, 0), Finish = new DateTime(year, month, 4, 16, 0, 0) },
    new GanttChartItem { Content = "Task 1.2", Indentation = 1, 
                         Start = new DateTime(year, month, 3, 8, 0, 0), Finish = new DateTime(year, month, 5, 12, 0, 0) },
    new GanttChartItem { Content = "Task 2", IsExpanded = true },
    new GanttChartItem { Content = "Task 2.1", Indentation = 1, 
                         Start = new DateTime(year, month, 2, 8, 0, 0), Finish = new DateTime(year, month, 8, 16, 0, 0), 
                         CompletedFinish = new DateTime(year, month, 5, 16, 0, 0), AssignmentsContent = "Resource 1, Resource 2 [50%]" },
    new GanttChartItem { Content = "Task 2.2", Indentation = 1 },
    new GanttChartItem { Content = "Task 2.2.1", Indentation = 2, 
                         Start = new DateTime(year, month, 11, 8, 0, 0), Finish = new DateTime(year, month, 12, 16, 0, 0), 
                         CompletedFinish = new DateTime(year, month, 12, 16, 0, 0), AssignmentsContent = "Resource 2" },
    new GanttChartItem { Content = "Task 2.2.2", Indentation = 2, 
                         Start = new DateTime(year, month, 12, 12, 0, 0), Finish = new DateTime(year, month, 14, 16, 0, 0), 
                         AssignmentsContent = "Resource 2" },
    new GanttChartItem { Content = "Task 3", Indentation = 1, 
                         Start = new DateTime(year, month, 15, 16, 0, 0), IsMilestone = true }
items[3].Predecessors = new List<PredecessorItem> { new PredecessorItem { Item = items[0], DependencyType = DependencyType.StartStart } };
items[7].Predecessors = new List<PredecessorItem> { new PredecessorItem { Item = items[6], Lag = TimeSpan.FromHours(2) } };
items[8].Predecessors = new List<PredecessorItem> { new PredecessorItem { Item = items[4] }, 
                                                    new PredecessorItem { Item = items[5] } };
GanttChartView.Items = items;


Drag and drop

End users may use drag and drop operations to reschedule bars, update start, finish and completion values independently, and create all types of dependencies between items directly from the Gantt Chart area, besides editing values in the attached data grid.

Move operations

MoveItem, MoveItemUp, and MoveItemDown operations allow moving specific items in the hierarchy, with or without child items. You may even add a special icon column to allow visual drag and drop operations for moving items around.

Timeline and calendars

You may configure timeline duration, visible and working days and hours, scales, update interval (for drag and drop operations), and zoom level (width of an hour) in the view. The component can further be zoomed in and out by moving the mouse wheel. Special nonworking days may be defined as a simple collection of DateTime objects.

You can also configure working and nonworking time for individual items, when needed, using Schedule objects. Actually, a general calendar may also be provided this way, by setting the Schedule property of the component itself. An individual item may have more or less working time than configured at view level, and therefore they will behave differently when setting start and finish values, including when using drag and drop update operations.

Scale demo Schedules demo

Project management features and Microsoft® Project compatibility

Besides data visualization features, the component offers built-in computation functions such as GetDuration, GetEffort, GetCompletedEffort, GetCompletion, GetCost, etc., project management algorithms such as baseline initialization and visualization, auto scheduling, critical path enumeration, work optimization, and allocation and resource leveling, optionally based on pre-initialized generic or individual resource usage costs and material resource quantities. Circular dependencies are accepted by default, but are detected and removed automatically if you enable dependency constraints.

Gantt Chart component supports loading and saving data in Microsoft Project® XML format with LoadProjectXml and SaveProjectXml methods, allowing you to import and export Microsoft Project® files with ease.

Moreover, ProjectXmlSerializer class offers support for further customizing the way actual loading and saving operations occur, allowing you to inject custom code for XML parsing and generation with handler methods on specific events.


Grid columns, rows, and changes

You may customize the column collection of the grid by resetting it and adding or removing built-in columns and optionally defining new ones using JavaScript® statements initialized as column.CellTemplateClientCode. To specify custom values for items use item.CustomValues dictionary. You can then reference them using column.PropertyName definition or in client side code statements using item.custom{Key}Value accessors, where {Key} should be replaced by the property name from the server side defined dictionary. You may filter items out hierarchically by setting item.IsHidden values to true.

The component doesn't automatically post changes back to the server. Instead, to improve end user experience, they are cached on the client machine until an external post back operation occurs, such as clicking a Save button. To be notified on the server side when items managed by the component change between loading and the current post back operation, simply handle the ItemPropertyChanged event.

To be immediately notified on the client side when items managed by the component change, provide JavaScript® based handler statements as ItemPropertyChangeHandlerClientCode, using item, propertyName, isDirect, and isFinal values that are internally initialized by the component.


Appearance and bar templates

You may fully customize item appearance, either for the entire chart or for individual entries in the view, using CSS class mappings such as component.StandardBarCssClass, SummaryBarCssClass, etc. (similar inline styling properties such as StandardBarFill, StandardBarStroke, SummaryBarFill, etc. are also available, if needed). Moreover, you may easily set up an AlternativeRowBackColor property value for the grid and chart areas, and item.CssClass and item.BarCssClass properties also apply to the elements of any individual item that needs to be highlighted in the view.

When you need to develop advanced features in your timeline based application, chart bars may be fully redesigned using JavaScript® statements that generate SVG content set up as StandardTaskTemplateClientCode, SummaryTaskTemplateClientCode, and MilestoneTaskTemplateClientCode properties of the component. Or, if you only want to add content on top of the default display, define ExtraTaskTemplateClientCode statements instead.


Printing and exporting

The component offers a Print method that may be called to initiate a direct print operation for their content. Moreover, you can export HTML out of the component content by calling Export method on the fly. Both methods support custom arguments, such as indicating which grid columns, row range, and timeline period to be included as output. Also, setting up rotate argument value to true enables direct landscape printing.

You may also initiate printing and document exporting on the client side using the print and exportContent methods of the JavaScript® component object (that you can find from the document using the ClientID value).

Image generation

JavaScript® doesn't allow generating images on the fly directly from the client side component, but you can pass XML data from the ASP .NET component to a GanttChartExporter component available with DlhSoft Project Management Framework, allowing you to export Gantt Chart images, such as using PNG encoding, and redirect the client side to display or download the generated image bytes. The XML data to be passed to the exporter extension is obtained by calling GetProjectXml method of the Gantt Chart component.

Web Library licensees can order a free license for Project Management Framework.