Items collection

To load and present data with ScheduleChartView control, initialize the items collection of the component, setting up objects representing resource rows identified by these main fields: content, and ganttChartItems. Gantt Chart items collection defines timeline assignments and are identified by these fields: content, start, finish, completedFinish, isMilestone, and assignmentsContent.

Standard items are presented as rectangular bars, and milestones as special diamond shapes in the view. Date values of start and finish may be initialized using Date objects, but JSON-formatted string values are also supported. 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 = [{ content: "Resource 1", 
               ganttChartItems: [{ content: "Task A (Resource 1)", 
                                   start: new Date(year, month, 2, 8, 0, 0), finish: new Date(year, month, 8, 16, 0, 0), 
                                   completedFinish: new Date(year, month, 5, 16, 0, 0) }] },
             { content: "Resource 2", 
               ganttChartItems: [{ content: "Task A (Resource 2)", 
                                   start: new Date(year, month, 2, 8, 0, 0), finish: new Date(year, month, 8, 16, 0, 0), 
                                   completedFinish: new Date(year, month, 5, 16, 0, 0), assignmentsContent: "50%" },
                                 { content: "Task B (Resource 2)", 
                                   start: new Date(year, month, 11, 8, 0, 0), finish: new Date(year, month, 12, 16, 0, 0), 
                                   completedFinish: new Date(year, month, 12, 16, 0, 0) },
                                 { content: "Task C (Resource 2)", 
                                   start: new Date(year, month, 14, 8, 0, 0), finish: new Date(year, month, 14, 16, 0, 0) }] },
             { content: "Resource 3", 
               ganttChartItems: [{ content: "Task D (Resource 3)", 
                                   start: new Date(year, month, 12, 12, 0, 0), finish: new Date(year, month, 14, 16, 0, 0) }] }];
DlhSoft.Controls.ScheduleChartView.initialize(scheduleChartView, items, settings);

                        

var items = ganttChartView.getScheduleChartItems();
DlhSoft.Controls.ScheduleChartView.initialize(scheduleChartView, items, settings);

                        

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.

Performance

We have designed the component to achieve maximum runtime performance, loading and displaying thousands of items while remaining highly responsive. Item loading is always asynchronous as the control has the virtualization feature (isVirtualizing field) turned on by default.

settings.timelineStart = start; settings.timelineFinish = finish;
settings.visibleWeekStart = 1; settings.visibleWeekFinish = 5; // Mon-Fri
settings.workingWeekStart = 1; settings.workingWeekFinish = 4; // Mon-Thu
settings.workingDayStart = 10 * hourDuration; settings.workingDayFinish = 19 * hourDuration; // 10-19
settings.scales = [ { scaleType: "Months"; headerTextFormat: "Month", … } ];
settings.updateScale = 15 * minuteDuration;
settings.hourWidth = 5;
settings.specialNonworkingDays = [ new Date(…), … ];

                        

settings.schedule = { workingWeekStart: 1, workingWeekFinish: 5, … }; // Mon-Fri
ganttChartItem.schedule = { workingWeekStart: 2, workingWeekFinish: 6, … }; // Tue-Sat

                        

Grid columns, rows, and changes

You may customize the column collection of the grid by resetting it or by adding and removing built-in columns and optionally defining new ones using JavaScript® functions initialized as column.cellTemplate. You may also filter items out by setting item.isHidden values to true and refreshing the user interface. To be notified when items managed by the component change either by editing grid cells or within the chart area, simply provide a handler function for settings.itemPropertyChanged.

settings.isGridVisible = true;
settings.gridWidth = settings.chartWidth = "50%";
settings.columns = [
    { …, 
      cellTemplate: function (item) {
          document = control.ownerDocument;
          var element = document.createElement(…); 
          …
          return element; } }, 
    …];
settings.itemPropertyChangeHandler = 
    function (item, propertyName, isDirect, isFinal) { … };

                        

settings.extraTaskTemplate = function (item) {
    document = item.ganttChartView.ownerDocument;
    var element = document.createElementNS(…, "http://www.w3.org/2000/svg");
    …
    return element; };

                        

settings.standardBarStyle = "stroke: Green; fill: LightGreen";
settings.standardCompletedBarStyle = "stroke: DarkGreen; fill: DarkGreen";
settings.alternativeItemStyle = "background-color: #f9f9f9"; settings.alternativeChartItemStyle: "fill: #f9f9f9";
items[i].ganttChartItems[j].barStyle = "stroke: Red; fill: #ffd54e";

                        

scheduleChartView.print({ title: "Schedule Chart (printable)", 
                          isGridVisible: true, columnIndexes: [1], 
                          timelineStart: new Date(…), timelineFinish: new Date(…), 
                          preparingMessage: "…" });