Items collection

To load and present data with NetworkDiagramView control, initialize the items collection of the component, setting up objects representing tasks identified by these main fields: displayedText, content, earlyStart, lateStart, earlyFinish, lateFinish, effort, isMilestone, slack, and predecessors. Displayed text values should be short inline entity titles, while content values are displayed as chart shape tool tips. Predecessors collection represents task dependencies and are identified by this field: item.

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

 Copyvar items = [{ content: "Start milestone", displayedText: "Start", isMilestone: true, 
               earlyStart: new Date(year, month, 2, 8, 0, 0), earlyFinish: new Date(year, month, 2, 8, 0, 0), 
               lateStart: new Date(year, month, 2, 8, 0, 0), lateFinish: new Date(year, month, 2, 8, 0, 0) },
             { content: "First task", displayedText: "Task 1", effort: 8 * hourDuration, 
               earlyStart: new Date(year, month, 2, 8, 0, 0), earlyFinish: new Date(year, month, 2, 16, 0, 0), 
               lateStart: new Date(year, month, 2, 8, 0, 0), lateFinish: new Date(year, month, 2, 8, 0, 0), slack: 0 },
             { content: "Second task", displayedText: "Task 2", effort: 4 * hourDuration, 
               earlyStart: new Date(year, month, 2, 8, 0, 0), earlyFinish: new Date(year, month, 2, 12, 0, 0), 
               lateStart: new Date(year, month, 2, 12, 0, 0), lateFinish: new Date(year, month, 2, 8, 0, 0), slack: 4 * hourDuration },
             { content: "Third task", displayedText: "Task 3", effort: 16 * hourDuration, 
               earlyStart: new Date(year, month, 3, 8, 0, 0), earlyFinish: new Date(year, month, 4, 16, 0, 0), 
               lateStart: new Date(year, month, 3, 8, 0, 0), lateFinish: new Date(year, month, 4, 16, 0, 0), slack: 0 },
             { content: "Fourth task", displayedText: "Task 4", effort: 4 * hourDuration, 
               earlyStart: new Date(year, month, 3, 8, 0, 0), earlyFinish: new Date(year, month, 3, 12, 0, 0), 
               lateStart: new Date(year, month, 4, 12, 0, 0), lateFinish: new Date(year, month, 4, 16, 0, 0), slack: 12 * hourDuration },
             { content: "Fifth task (middle milestone)", displayedText: "Task 5", isMilestone: true, effort: 12 * hourDuration, 
               earlyStart: new Date(year, month, 5, 8, 0, 0), earlyFinish: new Date(year, month, 6, 12, 0, 0), 
               lateStart: new Date(year, month, 5, 8, 0, 0), lateFinish: new Date(year, month, 6, 12, 0, 0), slack: 0 },
             { content: "Sixth task", displayedText: "Task 6", effort: 48 * hourDuration, 
               earlyStart: new Date(year, month, 6, 12, 0, 0), earlyFinish: new Date(year, month, 12, 12, 0, 0), 
               lateStart: new Date(year, month, 6, 12, 0, 0), lateFinish: new Date(year, month, 12, 12, 0, 0), slack: 0 },
             { content: "Seventh task", displayedText: "Task 7", effort: 20 * hourDuration, 
               earlyStart: new Date(year, month, 6, 12, 0, 0), earlyFinish: new Date(year, month, 8, 16, 0, 0), 
               lateStart: new Date(year, month, 10, 8, 0, 0), lateFinish: new Date(year, month, 12, 12, 0, 0), slack: 28 * hourDuration },
             { content: "Finish milestone", displayedText: "Finish", isMilestone: true, 
               earlyStart: new Date(year, month, 12, 12, 0, 0), earlyFinish: new Date(year, month, 12, 12, 0, 0), 
               lateStart: new Date(year, month, 12, 12, 0, 0), lateFinish: new Date(year, month, 12, 12, 0, 0) }];
items[1].predecessors = [{ item: items[0]}];
items[2].predecessors = [{ item: items[0]}];
items[3].predecessors = [{ item: items[1] }, { item: items[2] }];
items[4].predecessors = [{ item: items[1]}];
items[5].predecessors = [{ item: items[3] }, { item: items[4] }];
items[6].predecessors = [{ item: items[5]}];
items[7].predecessors = [{ item: items[5]}];
items[8].predecessors = [{ item: items[6] }, { item: items[7] }];
DlhSoft.Controls.Pert.NetworkDiagramView.initialize(networkDiagramView, items, settings);
                        

 Copyvar items = ganttChartView.getNetworkDiagramItems();
DlhSoft.Controls.Pert.NetworkDiagramView.initialize(networkDiagramView, items, settings);
                        

Drag and drop

End users may use drag and drop operations to update shape positioning, if needed, in order to make the diagram fitting better to their own needs. You may also easily position items in code, setting their displayedRowIndex and displayedColumnIndex property values considering a virtual grid as the container of the elements and refreshing the user interface.

Changes

To be notified when items managed by the component change within the chart area, simply provide a handler function for settings.itemPropertyChanged.

 Copysettings.itemPropertyChangeHandler = 
    function (item, propertyName, isDirect, isFinal) { … };
                        

Project management features

The component offers built-in critical path enumeration algorithms for tasks and their dependencies using the classic PERT review technique.

 Copyvar criticalTasks = networkDiagramView.getCriticalItems();
var criticalTaskDependencies = networkDiagramView.getCriticalDependencies();
                        

Appearance

You may fully customize item appearance, either for the entire chart or for individual entries in the view, using CSS class mappings such as settings.shapeClass, settings.milestoneClass, etc. (similar inline style settings are also available, if needed). Shapes may also be redesigned using a function that generates SVG content set up as taskTemplate setting of the component.

 Copysettings.shapeStyle = "stroke: Red; fill: White";
items[i].shapeStyle = "stroke: Red; fill: #ffd54e";
                        

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 a component content by calling exportContent methods on the fly. Both methods support custom configurations. Setting up rotate field of the argument settings to true enables direct landscape printing.

 CopynetworkDiagramView.print({ title: "Network Diagram (printable)", 
                           preparingMessage: "…" });