Background Image

ScheduleChartView

for ASP .NET 4+ WebForms / .NET Core 2.1+ MVC and HTML5
built with ScheduleChartView from Hyper Library • .NET Core/.NET 5+ & MVC support: with NuGet

Run demos Demo source code NuGet package Reference

ScheduleChartView component displays and manages resource assignments using a data grid and an attached interactive Gantt Chart displaying multiple task bars on the same resource line and accepting horizontal and vertical drag and drop operations for scheduling task bars and changing assignments. Supports custom appearance settings for tasks for the entire chart or for individual items, as needed, inheriting core features and behavior from GanttChartView component.

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

Screenshot
  • C#
    
    var items = new List<ScheduleChartItem>
    {
        new ScheduleChartItem 
        { 
            Content = "Resource 1", …,
            GanttChartItems = 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(…), … },
                …
            }
        },
        new ScheduleChartItem 
        { 
            Content = "Resource 2", …,
            GanttChartItems = new List<GanttChartItem> 
            {  
                new GanttChartItem { Content = "Task 3", Start = new DateTime(…), Finish = new DateTime(…), … },
                …
            }
        },
        …
    };
    ScheduleChartView.Items = items;
    …
    
                                            
    Demo
  • Visual Basic®
    
    Dim items = New List(Of ScheduleChartItem) From { _
        New ScheduleChartItem With { _
            .Content = "Resource 1", …, _
            .GanttChartItems = 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(…), … }, _
                … _
            } _
        }, _
        New ScheduleChartItem With { _
            .Content = "Resource 2", …, _
            .GanttChartItems = New List(Of GanttChartItem) From { _
                New GanttChartItem With { .Content = "Task 3", .Start = new Date(…), .Finish = new Date(…), … }, _
                … _
            } _
        }, _
        … _
    }
    ScheduleChartView.Items = items
    …
    
                                            
  • MVC / .NET Core
    
    @using DlhSoft.Web.Mvc;
    @(Html.ScheduleChartView(component => { … }))
    
                                            
    
    var items = new List<ScheduleChartItem>
    {
        new ScheduleChartItem 
        { 
            Content = "Resource 1", …,
            GanttChartItems = 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(…), … },
                …
            }
        },
        new ScheduleChartItem 
        { 
            Content = "Resource 2", …,
            GanttChartItems = new List<GanttChartItem> 
            {  
                new GanttChartItem { Content = "Task 3", Start = new DateTime(…), Finish = new DateTime(…), … },
                …
            }
        },
        …
    };
    return View(model: items);
    
                                            

Items collection

To load and present data with ScheduleChartView control, initialize the Items collection of the component, setting up ScheduleChartItem objects representing resource rows identified by these main properties: Content, and GanttChartItems. Gantt Chart items collection defines timeline assignments and are identified by these properties: Content, Start, Finish, CompletedFinish, IsMilestone, and AssignmentsContent.

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 allocation units in this format: 50%.

Note that you can also prepare items for ScheduleChartView component from a GanttChartView instance using GetScheduleChartItems method.


var items = new List<ScheduleChartItem>
{
    new ScheduleChartItem 
    { 
        Content = "Resource 1", 
        GanttChartItems = new List<GanttChartItem> 
        { 
            new GanttChartItem { Content = "Task A (Resource 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) } 
        } 
    },
    new ScheduleChartItem 
    { 
        Content = "Resource 2", 
        GanttChartItems = new List<GanttChartItem> 
        { 
            new GanttChartItem { Content = "Task A (Resource 2)", 
                                 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 = "50%" },
            new GanttChartItem { Content = "Task B (Resource 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) }, 
            new GanttChartItem { Content = "Task C (Resource 2)", 
                                 Start = new DateTime(year, month, 14, 8, 0, 0), Finish = new DateTime(year, month, 14, 16, 0, 0) }
        }
    },
    new ScheduleChartItem 
    { 
        Content = "Resource 3", 
        GanttChartItems = new List<GanttChartItem> 
        { 
            new GanttChartItem { Content = "Task D (Resource 3)", 
                                 Start = new DateTime(year, month, 12, 12, 0, 0), Finish = new DateTime(year, month, 14, 16, 0, 0) } 
        } 
    }
};
ScheduleChartView.Items = items;

                        

var items = GanttChartView.GetScheduleChartItems();
ScheduleChartView.Items = items;

                        

Drag and drop

End users may use horizontal drag and drop operations to reschedule bars, update start, finish and completion values independently. By hovering the bottom area of an assignment bar, end users may also use vertical drag and drop operations to modify resource assignments of tasks. By moving an assignment bar from one row to another, the task is assigned to a different resource item, maintaining the optionally specified allocation units of the slot.

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 task 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.

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, MilestoneBarCssClass, etc. (similar inline styling properties such as StandardBarFill, StandardBarStroke, MilestoneBarFill, 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, 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).