Get started

Get and apply the software library to your project using one of the ways we have made available:

  • Using npm:
    
    npm install @dlhsoft/ganttcharthyperlibrary
    
                                            
  • Download (.zip)
  • or as a NuGet package (best for Visual Studio projects)

Prepare the script files in your project folder, and add the necessary DlhSoft.* script references to the head section(s) of HTML page(s) in your JavaScript® based application:


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

                                

Prepare control placeholder elements as child nodes of appropriate container elements and obtain their references in code behind:


<body>
  <div id="ganttChartView">…</div>
</body>

                                

var ganttChartView = document.querySelector('#ganttChartView');

                                

/// <reference path='./Scripts/DlhSoft.ProjectData.GanttChart.HTML.Controls.d.ts' />
/// <reference path='./Scripts/DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.d.ts' />
import GanttChartView = DlhSoft.Controls.GanttChartView;
import GanttChartItem = GanttChartView.Item;
import PredecessorItem = GanttChartView.PredecessorItem;
var ganttChartViewElement = <HTMLElement>document.querySelector('#ganttChartView');

                                

Data items

To load and present data items within GanttChartView or other Gantt Chart based component instances initialize their items collections. The item type to use depends on the actual component type. For Gantt Chart controls define objects providing these fields:

  • 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).

var item1 = { content: 'My summary task' };
var item2 = { content: 'My standard task', indentation: 1,
              start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 7, 16, 0, 0), completedFinish: new Date(2012, 8, 5, 16, 0, 0),
              assignmentsContent: 'My resource' };
var items = [ item1, item2 ];
var item3 = { content: 'My milestone', indentation: 1,
              start: new Date(2012, 8, 7, 16, 0, 0), isMilestone: true };
items.push(item3);

                                

var item1 = <GanttChartItem>{ content: 'My summary task' };
var item2 = <GanttChartItem>{ content: 'My standard task', indentation: 1,
                              start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 7, 16, 0, 0), 
                              completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: 'My resource' };
var items = <GanttChartItem[]>[ item1, item2 ];
var item3 = <GanttChartItem>{ content: 'My milestone', indentation: 1,
                              start: new Date(2012, 8, 7, 16, 0, 0), isMilestone: true };
items.push(item3);

                                

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. Dependency type values supports all common types of task links, including: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF):


item3.predecessors = [{ item: item2, dependencyType: 'FF' }];

                                

You may supplementary customize items using custom values, if needed:


item.description = 'My task’s description';

                                

Finally, prepare the component settings object and call initialize function to prepare the user interface of the component. To customize the displayed grid columns, use the columns field of the component’s settings object. By default, the first column displays content data hierarchically. You may also prepare new or updated column objects starting from the default columns collection, using JavaScript® statements referring item values as defined by cellTemplate field:


var settings = { currentTime: new Date(2012, 8, 2, 12, 0, 0) };
var columns = DlhSoft.Controls.GanttChartView.getDefaultColumns(items, settings);
columns[0].header = 'Work items';
columns[0].width  = 240;
columns[1].header = 'Beginning';
columns[2].header = 'Start';
columns.push({ header: 'Description', width: 200, cellTemplate: function (item) { 
    return item.ganttChartView.ownerDocument.createTextNode(item.description); } });
settings.columns = columns;
DlhSoft.Controls.GanttChartView.initialize(ganttChartView, items, settings);

                                

var settings = <GanttChartView.Settings>{ currentTime: new Date(2012, 8, 2, 12, 0, 0) };
var columns = DlhSoft.Controls.GanttChartView.getDefaultColumns(items, settings);
columns[0].header = 'Work items';
columns[0].width  = 240;
columns[1].header = 'Beginning';
columns[2].header = 'Start';
columns.push({ header: 'Description', width: 200, cellTemplate: (item) => { 
    return item.ganttChartView.ownerDocument.createTextNode(item.description); } });
settings.columns = columns;
var ganttChartView = DlhSoft.Controls.GanttChartView.initialize(ganttChartViewElement, items, settings);

                                

Timeline definition

To specify the scrollable timeline and the zoom level of the chart:


settings.timelineStart  = start; 
settings.timelineFinish = finish; 
settings.hourWidth = zoomLevel;

                                

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


settings.workingWeekStart  = 1; // Monday
settings.workingWeekFinish = 5; // Friday
settings.visibleWeekStart  = 0; // Sunday
settings.visibleWeekFinish = 6; // Saturday
settings.visibleDayStart   = 09 * 60 * 60 * 1000; // 9 AM
settings.visibleDayFinish  = 17 * 60 * 60 * 1000; // 5 PM

                                

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


settings.schedule = { workingWeekStart: 1, workingWeekFinish: 5, … }; 
item.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 Sunday; to display weeks starting on Monday instead, simply set weekStartDay field to 1. NonworkingTime and CurrentTime scales souldn’t have headers, and would actually highlight nonworking time and the display a vertical line for the current time, respectively. Finally, if you change the headered scale count, update the headerHeight value accordingly:


settings.weekStartDay = 1;
settings.scales = [{ scaleType: 'NonworkingTime', isHeaderVisible: false, isHighlightingVisible: true, 
                     highlightingStyle: 'stroke-width: 0; fill: #f8f8f8; fill-opacity: 0.65' },
                   { scaleType: 'Months', headerTextFormat: 'Month', 
                     headerStyle: 'padding: 2.25px; border-right: solid 1px White; border-bottom: solid 1px White', 
                     isSeparatorVisible: true, separatorStyle: 'stroke: #c8bfe7; stroke-width: 0.5px' },
                   { scaleType: 'Weeks', headerTextFormat: 'Date', 
                     headerStyle: 'padding: 2.25px; border-right: solid 1px White; border-bottom: solid 1px White', 
                     isSeparatorVisible: true, separatorStyle: 'stroke: #c8bfe7; stroke-width: 0.5px' },
                   { scaleType: 'Days', headerTextFormat: 'Day', 
                     headerStyle: 'padding: 2.25px; border-right: solid 1px White' },
                   { scaleType: 'CurrentTime', isHeaderVisible: false, isSeparatorVisible: true, 
                     separatorStyle: 'stroke: Red; stroke-width: 0.5px' }];
settings.headerHeight = 21 * 3;

                                

Appearance

To configure the look of the Gantt Chart bars (alternative class suffixed fields referring CSS classes are also available):


settings.standardBarStyle          = 'stroke: Green; fill: LightGreen'; 
settings.standardCompletedBarStyle = 'stroke: DarkGreen; fill: DarkGreen'; 
settings.summaryBarStyle           = 'stroke: DarkGreen; fill: DarkGreen'; 
settings.milestoneBarStyle         = 'stroke: DarkGreen; fill: DarkGreen'; 
settings.dependencyLineStyle       = 'stroke: Green; fill: none; marker-end: url(#ArrowMarker)';

                                

You may also initialize individual item appearance settings:


item1.standardBarStyle = 'stroke: Green; fill: LightGreen';
item2.standardBarStyle = 'stroke: Brown; fill: Brown';

                                

Alternatively or supplementary, you can configure the bar, dependency line, and tool tip templates using JavaScript® based statements:


settings.standardTaskTemplate    = function (item) {…}; 
settings.summaryTaskTemplate     = function (item) {…}; 
settings.milestoneTaskTemplate   = function (item) {…}; 
settings.extraTaskTemplate       = function (item) {…}; 
settings.assignmentsTemplate     = function (item) {…}; 
settings.dependencyLineTemplate  = function (item, predecessorItem) {…}; 
settings.itemTemplate            = function (item) {…};                                   // Task bar tool tip
settings.predecessorItemTemplate = function (item, predecessorItem, predecessorItem) {…}; // 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):


settings.assignableResources = …; 
settings.resourceQuantities = …; 
settings.specificResourceHourCosts = …;
settings.resourceSchedules = …;

                                

To further configure the look and feel, behavior, and other aspects of the components use the other member fields of the settings object:


settings.areTaskDependencyConstraintsEnabled = true;
settings.isMouseWheelZoomEnabled = false; 
settings.updateScale = 1 * 60 * 60 * 1000; // 1h 
settings.isBaselineVisible = true;
settings.alternativeItemStyle = 'background-color: Silver'; 
settings.alternativeChartItemStyle = 'fill: Silver';
settings.classic = true; // reverts multiple default settings to the pre-2023 version of the component

                                

Hierarchical operations

To get the root or leaf tasks from the managed collection:


var roots  = ganttChartView.getRootItems(); 
var leaves = ganttChartView.getLeafItems();

                                

To get the parent, or children of a specific task item:


var parent    = item.parent;
var children  = item.children;

                                

Project management

To reschedule tasks so that project work is fully optimized or assigned resources are not over-allocated:


ganttChartView.optimizeWork();
ganttChartView.levelResources();

                                

To get critical tasks (those that by rescheduling might affect the finish date and time of the project):


var criticalItems = ganttChartView.getCriticalItems(); // or, to use PERT method: getPertCriticalItems()

                                

Importing, exporting, and printing

To import or export project data from or to Microsoft® Project® XML format use the extra GanttChartView.ProjectSerializer component:


var projectSerializer = DlhSoft.Controls.GanttChartView.ProjectSerializer.initialize(ganttChartView);
projectSerializer.loadXml(inputString);
var outputString = projectSerializer.getXml();

                                

To send the Gantt Chart and associated data grid content of specified columns to the printer (allowing the end user to select the printing settings), optionally rotating the output to generate landscape output by default:


ganttChartView.print({ title: 'My document', columnIndexes: [0, 2], rotate: true });

                                

Handling events

You may run custom code upon specific item changes:


settings.itemPropertyChangeHandler  = function(item, propertyName, isFinal, isDirect) {…}; 
settings.itemSelectionChangeHandler = function(item, isSelected, isDirect) {…};

                                

Other types of changes also provide notifications:


settings.hourWidthChangeHandler        = function(hourWidth) {…};             // Zoom level changed
settings.displayedTimeChangeHandler    = function(displayedTime) {…};         // Chart date scroll changed
settings.splitterPositionChangeHandler = function(gridWidth, chartWidth) {…}; // Splitter moved
settings.columnWidthChangeHandler      = function(column, width) {…};         // Grid column resized

                                

And you can easily respond to common mouse events as well:


settings.chartClickHandler                = function(isOnItemsArea, item, dateTime) {…};
settings.itemDoubleClickHandler           = function(isOnChart, item) {…};
settings.chartItemDoubleClickHandler      = function(item, dateTime) {…};
settings.dependencyLineDoubleClickHandler = function(predecessorItem, targetItem) {…};

                                

More operations

To display the current items from a Gantt Chart control in different way using a Schedule Chart:


var scheduleChartItems = ganttChartView.getScheduleChartItems();
var scheduleChartView = document.querySelector('#scheduleChartView');
var scheduleChartSettings = { isReadOnly: true };
DlhSoft.Controls.ScheduleChartView.initialize(scheduleChartView, scheduleChartItems, scheduleChartSettings);

                                

Other member methods and events are available to provide advanced operations with the components and the data items they manage:


ganttChartView.moveItem(item, toIndex);
ganttChartView.moveItemHierarchyUp(item);
ganttChartView.moveItemHierarchyDown(item);
var projectCost = ganttChartView.getProjectCost();
var finish = ganttChartView.getProjectFinish();

                                

Get started

Get and apply the software library to your project using one of the ways we have made available:

  • NuGet package
  • Download (.zip)
  • Other package manager commands:
    
    npm install @dlhsoft/ganttcharthyperlibrary
    
                                            

To use the AngularJS extensions for DlhSoft Gantt Chart Hyper Library please follow these steps:

  • In your JavaScript®/TypeScript based application project, ensure that the correct version of AngularJS core script files (i.e. AngularJS.Core NuGet package) are loaded (version 1.3 or a future compatible version is required).
  • Include the core DlhSoft.*.HTML.Controls.js script files to be loaded with your application – these define the core HTML components.
  • Include DlhSoft.*.Angular.Directives.js script files to be loaded with your application – these provide the AngularJS extensions for the core HTML components.
  • Use AngularJS directives in your markup as needed to access the required HTML components from the core product.

<head>
  …
  <script src="angular.min.js" type="text/javascript"></script>
  <script src="DlhSoft.ProjectData.GanttChart.HTML.Controls.js" type="text/javascript"></script>  
  <script src="DlhSoft.Data.HTML.Controls.js" type="text/javascript"></script>
  <script src="DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.js" type="text/javascript"></script>
  <script src="DlhSoft.ProjectData.GanttChart.Angular.Directives.js" type="text/javascript"></script>
</head>
<body ng-app="GanttChartViewSample" ng-controller="MainController">
  <div ds:gantt-chart id="ganttChartView"
       items="items" settings="settings" auto-refresh="{{ true }}"
       style="min-height: 388px">
  </div>
</body>

                                

Data items

To load and present data items within ds:gantt-chart extension or other Gantt Chart based component instances initialize their items collections. The item type to use depends on the actual component type. For Gantt Chart controls define objects providing these fields:

  • 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).

var item1 = <GanttChartItem>{ content: 'My summary task' };
var item2 = <GanttChartItem>{ content: 'My standard task', indentation: 1,
                              start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 7, 16, 0, 0), 
                              completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: 'My resource' };
var items = <GanttChartItem[]>[ item1, item2 ];
var item3 = <GanttChartItem>{ content: 'My milestone', indentation: 1,
                              start: new Date(2012, 8, 7, 16, 0, 0), isMilestone: true };
items.push(item3);
$scope.items = items;

                                

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. Dependency type values supports all common types of task links, including: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF):


item3.predecessors = [{ item: item2, dependencyType: 'FF' }];

                                

You may supplementary customize items using custom values, if needed:


item['description'] = 'My task’s description';

                                

Finally, prepare the component settings object and call initialize function to prepare the user interface of the component. To customize the displayed grid columns, use the columns field of the component’s settings object. By default, the first column displays content data hierarchically. You may also prepare new or updated column objects starting from the default columns collection, using JavaScript® statements referring item values as defined by cellTemplate field:


var settings = <GanttChartView.Settings>{ currentTime: new Date(2012, 8, 2, 12, 0, 0) };
var columns = DlhSoft.Controls.GanttChartView.getDefaultColumns(items, settings);
columns[0].header = 'Work items';
columns[0].width  = 240;
columns[1].header = 'Beginning';
columns[2].header = 'Start';
columns.push({ header: 'Description', width: 200, cellTemplate: (item) => { 
    return item.ganttChartView.ownerDocument.createTextNode(item.description); } });
settings.columns = columns;
$scope.settings = settings;

                                

Get started

Note: This is a high level guide built on the assumption that you already have an Angular project and general knowledge about importing and using components from third party libraries. Another detailed tutorial is also available, if you need it.

Get and apply the software library to your project using one of the ways we have made available:

  • Download (.zip)
  • Other package manager commands:
    
    npm install @dlhsoft/ganttcharthyperlibrary
    
                                            

To use the Angular extensions for DlhSoft Gantt Chart Hyper Library please follow these steps:

  • Ensure you have an Angular based application project (version 8 or a future compatible version of the framework is required).
  • Include the core DlhSoft.*.HTML.Controls.js script files in angular.json (and place them somewhere in your project structure, e.g. under src/app/DlhSoft) to be loaded with your application – these define the core HTML components.
  • Include DlhSoft.*.Angular.Components.ts script files (and place them somewhere in your project structure, e.g. under src/app/DlhSoft) to be loaded with your application in app.module.ts – these provide the Angular 8 extensions for the core HTML components.
  • Use Angular components in your markup as needed to access the required HTML components from the core product.

{
    …,
    "projects": {
    "MyApp": {
      …,
      "architect": {
        "build": {
            …,
            "options": {
              …
              "scripts": ["src/app/DlhSoft/DlhSoft.ProjectData.GanttChart.HTML.Controls.js",
                          "src/app/DlhSoft/DlhSoft.ProjectData.PertChart.HTML.Controls.js", 
                          "src/app/DlhSoft/DlhSoft.Data.HTML.Controls.js"]
    …
}

                                

…
import { GanttChartView } from './DlhSoft/DlhSoft.ProjectData.GanttChart.Angular.Components';
import { ScheduleChartView } from './DlhSoft/DlhSoft.ProjectData.GanttChart.Angular.Components';
import { LoadChartView } from './DlhSoft/DlhSoft.ProjectData.GanttChart.Angular.Components';
import { PertChartView } from './DlhSoft/DlhSoft.ProjectData.PertChart.Angular.Components';
import { NetworkDiagramView } from './DlhSoft/DlhSoft.ProjectData.PertChart.Angular.Components';
@NgModule({
  declarations: [
    AppComponent,
    GanttChartView, ScheduleChartView, LoadChartView,
    PertChartView, NetworkDiagramView
  ],
  …
})
…

                                

<ganttchartview [items]="items" [settings]="settings"
                [change]="onItemChanged"
                style="min-height: 388px; width: 100%;">
    …
</ganttchartview>

                                

Data items

To load and present data items within ds:gantt-chart extension or other Gantt Chart based component instances initialize their items collections. The item type to use depends on the actual component type. For Gantt Chart controls define objects providing these fields:

  • 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).

var item1 = <GanttChartItem>{ content: 'My summary task' };
var item2 = <GanttChartItem>{ content: 'My standard task', indentation: 1,
                              start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 7, 16, 0, 0), 
                              completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: 'My resource' };
var items = <GanttChartItem[]>[ item1, item2 ];
var item3 = <GanttChartItem>{ content: 'My milestone', indentation: 1,
                              start: new Date(2012, 8, 7, 16, 0, 0), isMilestone: true };
items.push(item3);
this.items = items;

                                

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. Dependency type values supports all common types of task links, including: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF):


item3.predecessors = [{ item: item2, dependencyType: 'FF' }];

                                

You may supplementary customize items using custom values, if needed:


item['description'] = 'My task’s description';

                                

Finally, prepare the component settings object and call initialize function to prepare the user interface of the component. To customize the displayed grid columns, use the columns field of the component’s settings object. By default, the first column displays content data hierarchically. You may also prepare new or updated column objects starting from the default columns collection, using JavaScript® statements referring item values as defined by cellTemplate field:


var settings = <GanttChartView.Settings>{ currentTime: new Date(2012, 8, 2, 12, 0, 0) };
var columns = DlhSoft.Controls.GanttChartView.getDefaultColumns(items, settings);
columns[0].header = 'Work items';
columns[0].width  = 240;
columns[1].header = 'Beginning';
columns[2].header = 'Start';
columns.push({ header: 'Description', width: 200, cellTemplate: (item) => { 
    return item.ganttChartView.ownerDocument.createTextNode(item.description); } });
settings.columns = columns;
this.settings = settings;

                                

Get started

Note: This is a high level guide built on the assumption that you already have a React project and general knowledge about importing and using components from third party libraries. Another detailed tutorial is also available, if you need it.

Get and apply the software library to your project using one of the ways we have made available:

  • Download (.zip)
  • Other package manager commands:
    
    npm install @dlhsoft/ganttcharthyperlibrary
    
                                            

To use the React extensions for DlhSoft Gantt Chart Hyper Library please follow these steps:

  • Ensure you have a React based application project (version 16 or a future compatible version of the library is required).
  • Include the core DlhSoft.*.HTML.Controls.js script files (either as references in the HTML head and having the files deployed with your app, or within a script bundle) – these define the core HTML components.
  • Include DlhSoft.*.React.Components.jsx script files as well (either as text/babel references in the HTML head and having the files deployed with your app or within a script bundle) – these provide the React extensions for the core HTML components.
  • Use React components in your script as needed to access the required HTML components from the core product.

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

                                

…
return (
    <GanttChartView items={items} settings={settings}
                    change={onItemChanged} 
                    style={{minHeight: '388px'}}>
        …
    </GanttChartView>
);

                                

Data items

To load and present data items within ds:gantt-chart extension or other Gantt Chart based component instances initialize their items collections. The item type to use depends on the actual component type. For Gantt Chart controls define objects providing these fields:

  • 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).

var item1 = { content: 'My summary task' };
var item2 = { content: 'My standard task', indentation: 1,
              start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 7, 16, 0, 0), 
              completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: 'My resource' };
var items = [ item1, item2 ];
var item3 = { content: 'My milestone', indentation: 1,
              start: new Date(2012, 8, 7, 16, 0, 0), isMilestone: true };
items.push(item3);

                                

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. Dependency type values supports all common types of task links, including: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF):


item3.predecessors = [{ item: item2, dependencyType: 'FF' }];

                                

You may supplementary customize items using custom values, if needed:


item['description'] = 'My task’s description';

                                

Finally, prepare the component settings object and call initialize function to prepare the user interface of the component. To customize the displayed grid columns, use the columns field of the component’s settings object. By default, the first column displays content data hierarchically. You may also prepare new or updated column objects starting from the default columns collection, using JavaScript® statements referring item values as defined by cellTemplate field:


var settings = { currentTime: new Date(2012, 8, 2, 12, 0, 0) };
var columns = DlhSoft.Controls.GanttChartView.getDefaultColumns(items, settings);
columns[0].header = 'Work items';
columns[0].width  = 240;
columns[1].header = 'Beginning';
columns[2].header = 'Start';
columns.push({ header: 'Description', width: 200, cellTemplate: (item) => { 
    return item.ganttChartView.ownerDocument.createTextNode(item.description); } });
settings.columns = columns;

                                

Get started

Note: This is a high level guide built on the assumption that you already have a Vue project and general knowledge about importing and using components from third party libraries. Another detailed tutorial is also available, if you need it. Moreover, if you would like to create (or you already have) a TypeScript based project with class-style component syntax, this separate TypeScript tutorial should be used instead.

Get and apply the software library to your project using one of the ways we have made available:

  • Download (.zip)
  • Other package manager commands:
    
    npm install @dlhsoft/ganttcharthyperlibrary
    
                                            

To use the Vue extensions for DlhSoft Gantt Chart Hyper Library please follow these steps:

  • Ensure you have a Vue based application project (version 2.6 or a future compatible version of the library is required).
  • Include the core DlhSoft.*.HTML.Controls.js script files (either as references in the HTML head and having the files deployed with your app, or within a script bundle) – these define the core HTML components.
  • Include DlhSoft.*.Vue.Components.js script files as well (either as references in the HTML head and having the files deployed with your app or within a script bundle) – these provide the Vue extensions for the core HTML components.
  • Use Vue components in your markup as needed to access the required HTML components from the core product.

<head>
  …
  <script src="DlhSoft.ProjectData.GanttChart.HTML.Controls.js" type="text/javascript"></script>  
  <script src="DlhSoft.Data.HTML.Controls.js" type="text/javascript"></script>
  <script src="DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.js" type="text/javascript"></script>
  <script src="DlhSoft.ProjectData.GanttChart.React.Component.js" type="text/javascript"></script>
</head>
<body>
  <div id="app">
    <gantt-chart v-bind:items="items" v-bind:settings="settings"
                 style="min-height: 388px">
    </gantt-chart>
  </div>
</body>

                                

Data items

To load and present data items within ds:gantt-chart extension or other Gantt Chart based component instances initialize their items collections. The item type to use depends on the actual component type. For Gantt Chart controls define objects providing these fields:

  • 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).

var item1 = { content: 'My summary task' };
var item2 = { content: 'My standard task', indentation: 1,
              start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 7, 16, 0, 0), 
              completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: 'My resource' };
var items = [ item1, item2 ];
var item3 = { content: 'My milestone', indentation: 1,
              start: new Date(2012, 8, 7, 16, 0, 0), isMilestone: true };
items.push(item3);

                                

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. Dependency type values supports all common types of task links, including: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF):


item3.predecessors = [{ item: item2, dependencyType: 'FF' }];

                                

You may supplementary customize items using custom values, if needed:


item['description'] = 'My task’s description';

                                

Finally, prepare the component settings object and call initialize function to prepare the user interface of the component. To customize the displayed grid columns, use the columns field of the component’s settings object. By default, the first column displays content data hierarchically. You may also prepare new or updated column objects starting from the default columns collection, using JavaScript® statements referring item values as defined by cellTemplate field:


var settings = { currentTime: new Date(2012, 8, 2, 12, 0, 0) };
var columns = DlhSoft.Controls.GanttChartView.getDefaultColumns(items, settings);
columns[0].header = 'Work items';
columns[0].width  = 240;
columns[1].header = 'Beginning';
columns[2].header = 'Start';
columns.push({ header: 'Description', width: 200, cellTemplate: (item) => { 
    return item.ganttChartView.ownerDocument.createTextNode(item.description); } });
settings.columns = columns;

                                

And create the Vue app instance:


var app = new Vue({
    el: '#app',
    data: {
      items: items,
      settings: settings
    },
    …
});

                                

GanttChartView reference

The control container element can be retrieved using a querySelector method call:


<body>
  <div id="ganttChartView"></div>
</body>

                                

var ganttChartView = document.querySelector('#ganttChartView'); 

                                

var ganttChartViewElement = document.querySelector('#ganttChartView'); 

                                

Using AngularJS you can access GanttChartView component using ds:gantt-chart directive and preparing the appropriate $scope fields (items, settings) and functions (change):

Using Angular you can access GanttChartView component using ganttchartview element and preparing the appropriate properties (items, settings) and functions (change):

Using React you can access GanttChartView component using GanttChartView element and preparing the appropriate properties (items, settings) and functions (change):

Using Vue you can access GanttChartView component using gantt-chart element and preparing the appropriate properties (items, settings) and event handler methods (change):


<ds:gantt-chart id="ganttChartView"
                items="items" settings="settings"
                change="itemPropertyChangeHandler" auto-refresh="{{ true }}"
                style="min-height: 240px">
</ds:gantt-chart>

                            

<ganttchartview [items]="items" [settings]="settings"
                [change]="itemPropertyChangeHandler"
                style="min-height: 240px">
</ganttchartview>

                            

return (
    <GanttChartView items="{items}" settings="{settings}"
                    change="{itemPropertyChangeHandler}"
                    style={{min-height: 240px}}>
    </GanttchartView>
);

                            

<gantt-chart v-bind:items="items" v-bind:settings="settings"
             v-on:change="itemPropertyChangeHandler"
             style="min-height: 240px">
</gantt-chart>

                            

Data items

The task items that may be presented within GanttChartView control should provide these properties:

  • content: The object that is displayed to represent the task item in the grid and in task bar tool tips, usually the task name;
  • indentation: The hierarchy is based on the indentation level values of the tasks, so that a task with a lower index in the collection and having a specific indentation level will become the parent task for the tasks with a higher index in the collection and having an increased indentation level;
  • isExpanded: If a parent task is expanded its child tasks become visible. If a parent task is collapsed its child tasks become invisible;
  • start, finish, completedFinish: Date and time values may be initialized as string values using standard date and time formatting or integral numeric formatting indicating millliseconds passed since January 1, 1970; supplementary, completedFinish values may be initialized as completion float values (between 0 and 1) instead of date and time values;
  • isMilestone: A milestone task is displayed in the Gantt Chart view using a different task bar template;
  • schedule: Object that optionally defines specific working week and day intervals and special nonworking days to consider for scheduling purposes using these properties:
    • workingWeekStart, workingWeekFinish: The start and finish days of the working week interval, used when computing task effort values and when dragging and dropping task bars;
    • workingDayStart, workingDayFinish: The start and finish times of the working day interval, in milliseconds passed since midnight, used when computing task effort values and when dragging and dropping task bars;
    • specialNonworkingDays: Optional collection of special nonworking days, such as holidays; alternatively, a Boolean function that receives a date argument and indicates whether it represents a nonworking day or not;
  • baselineStart, baselineFinish: Indicate the baseline start and finish date and times to be presented as a second (estimation) task bar for the item in the chart area;
  • preferredStart: Indicates the date and time that the item would revert to at the earliest when the predecessors are moved towards the past (automatically reset when item's start is manually set);
  • minStart, maxStart, minFinish, maxFinish: Indicate the minimum and maximum start and finish date and times to be considered (whenever possible) for the item;
  • isRelativeToTimezone: Indicates whether start, finish, completedFinish, baseline{Start|Finsih}, and {min|max}{Start|Finish} values are configured as local timezone based values (true by default); it gets set to false upon component initialization as date and times are converted to UTC values internally; set it back to true if you reinitialize the properties and refresh the component; to read the timing values externally, you may use getOutputDate method of the component;
  • assignmentsContent: The assignments content to be displayed in the Gantt Chart view next to the associated task bar, but it is not used internally for computing/updating task finish date and time (generating duration) based on any updated assignments;
  • isReadOnly: Indicates whether the current item should be read only in the grid and chart areas;
  • isHidden: Indicates whether the current item should be hidden in the grid and chart areas, for filtering purposes;
  • isBarVisible: Indicates whether the task bar is displayed in the chart area for this item;
  • isBarReadOnly: Indicates whether the task bar of current item should be read only in the chart;
  • isSummaryEnabled, isParentSummarizationEnabled: Indicate whether the current summary item should aggregate child item values and be presented using a summary bar, or whether the current item values should be aggregated to the parent summary item;
  • displayRowIndex: Indicates the row index to display the task bar at within the chart; by default it is not defined, and the row index is computed at runtime based on its hierarchical position and expansion states of summary item in the collection;
  • parts: Optional array of task item parts to be represented for this group item in the chart area;
  • class, style: CSS class and/or inline style to apply to the task row container element in the grid;
  • barClass, standardBarClass, completedStandardBarClass, summaryBarClass, milestoneBarClass, baselineBarClass, barStyle, standardBarStyle, completedStandardBarStyle, summaryBarStyle, milestoneBarStyle, baselineBarStyle: CSS classes and/or inline styles to apply to the task bar or specific types of task bars when they are presented in the chart for this item;
  • label, labelColor, labelStyle, labelClass: Configure task bar labels for the chart area, when settings.are{Standard|Summary|Milestone}TaskLabelsVisible values are true;
  • taskTemplate: Optional function that returns the output (SVG node) for the task bar to be presented in the chart for this item, overriding the control settings;
  • template: Optional function that returns the output (SVG node) to presented in the chart for this item (usually a tool tip), overriding the control settings;
  • isSelected: Indicates whether the current item is currently selected in the view;
  • predecessors: The predecessors collection defines predecessor items (objects) referring the task items that the current item depends of, and having the relations displayed in the Gantt Chart view as dependency lines, but it is not used internally for computing/updating task start and finish date and times (generating work time intervals) based on its defined dependencies; the predecessor item properties are presented below:
    • item: Task item that precedes the owner of the predecessor item (the item that the current item depends of);
    • dependencyType: Indicates the type of the dependency; supported values are: FinishStart (default value), StartStart, FinishFinish, or StartFinish;
    • lag: Indicates an optional lag of the dependency (in milliseconds);
    • dependencyLineClass, dependencyLineStyle: CSS class and/or inline style to apply to the dependency line to be presented in the chart for this predecessor item;
    • template: Optional function that returns the output (SVG node) to presented in the chart for this predecessor item (usually a tool tip), overriding the control settings;
  • executionCost: The direct cost related to the task item execution;
  • hasFixedEffort: When set to true it would ensure that the original item's total effort is preserved when duration is updated by updating assignment allocation units, assuming that the item has resources assigned;
  • fixedEffortUpdatesFinish: Indicates whether the item's fixed effort, when hasFixedEffort is set to true, is preserved by updating item's Finish date and time rather than assignments' allocations;
  • areDependencyConstraintsEnabled: When set to false, turns off auto-scheduling for the individual item when component's areTaskDependencyConstraintsEnabled is set to true.

var items = [{ content: 'Task 1', isExpanded: false },
             { content: 'Task 1.1', indentation: 1, start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 4, 16, 0, 0) },
             { content: 'Task 1.2', indentation: 1, start: new Date(2012, 8, 3, 8, 0, 0), finish: new Date(2012, 8, 5, 12, 0, 0) },
             { content: 'Task 2', isExpanded: true },
             { content: 'Task 2.1', indentation: 1, start: new Date(2012, 8, 4, 8, 0, 0), finish: new Date(2012, 8, 8, 16, 0, 0),
               completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: 'Resource 1, Resource 2 [50%]' },
             { content: 'Task 2.2', indentation: 1 },
             { content: 'Task 2.2.1', indentation: 2, start: new Date(2012, 8, 11, 8, 0, 0), finish: new Date(2012, 8, 12, 16, 0, 0),
               completedFinish: new Date(2012, 8, 12, 16, 0, 0), assignmentsContent: 'Resource 2' },
             { content: 'Task 2.2.2', indentation: 2, start: new Date(2012, 8, 12, 12, 0, 0), finish: new Date(2012, 8, 14, 16, 0, 0) },
             { content: 'Task 3', indentation: 1, start: new Date(2012, 8, 15, 16, 0, 0), isMilestone: true}];
 items[3].predecessors = [{ item: items[0], dependencyType: 'SS'}];
 items[7].predecessors = [{ item: items[6]}];
 items[8].predecessors = [{ item: items[4] }, { item: items[5]}];
 for (var i = 4; i <= 32; i++)
     items.push({ content: 'Task ' + i, start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 4, 16, 0, 0) });

                            

Settings

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • target: Name of the target to generically apply to the control; Standard, and Phone targets are supported; by default it is Standard:
    
    settings.target = 'Phone';
    
                                        
  • interaction: Name of the interaction mode to generically apply to the control; Standard, and TouchEnabled interaction modes are supported; by default it is Standard:
    
    settings.interaction = 'TouchEnabled';
    
                                        
  • theme: Name of the internal theme to generically apply to the control; Modern, ModernBordered, and Aero themes are supported; by default it is Modern:
    
    settings.theme = 'Aero';
    
                                        
  • classic: When set to true, reverts default settings to the original version of the component (before 2023):
    
    settings.classic = true;
    
                                        
  • border: Color for the border to be presented around the main content container within the control; the border type is set to solid and its width is set to 1px by design (they are fixed values); by default it is gray:
    
    settings.border = 'Blue';
    
                                        
  • containerClass, containerStyle: CSS class and/or inline style to apply to the main content container within the control;
  • isGridVisible: Determines whether the grid is visible in the view; true by default:
    
    settings.isGridVisible = false;
    
                                        
  • gridWidth, chartWidth: Widths of the grid and chart areas within the control; by default they are set to 35% and 65% when isGridVisible is true:
    
    settings.gridWidth  = '30%';
    settings.chartWidth = '70%';
    
                                        
  • isSplitterEnabled: Determines whether a splitter is displayed between the grid and chart when the grid is visible and the end user hovers the left most area of the chart, allowing resizing the internal panels; true by default:
    
    settings.isSplitterEnabled = false;
    
                                        
  • splitterWidth: The width of the splitter within the control:
    
    settings.splitterWidth = 8;
    
                                        
  • splitterBackground: The background used to fill the splitter within the control (when hovering the area between the grid and chart); by default it is a shade of light gray:
    
    settings.splitterBackground = 'Blue';
    
                                        
  • minGridWidth, minChartWidth: The minimum widths of the grid and chart to be used as left and right splitting limits within the control (values should not be below 32 and 32 + splitterWidth, respectively):
    
    settings.minGridWidth  = 100;
    settings.minChartWidth = 100 + 4;
    
                                        
  • allowUserToResizeColumns: Indicates whether the columns may be resized or not by the end user with gripper drag and drop operations; by default it is set to true; when set to true, individual column.allowUserToResize values may be defined as local overrides;
  • minColumnWidth, maxColumnWidth: Numeric values indicating the default limits of width of the columns (in pixels) when updated by the end user with gripper drag and drop operations;
  • isReadOnly, isGridReadOnly, isChartReadOnly, isContentReadOnly, isAssignmentsContentReadOnly, isTaskStartReadOnly, isTaskEffortReadOnly, isTaskCompletionReadOnly, areTaskPredecessorsReadOnly: Indicate whether the entire control or specific control features are read only:
    
    settings.isGridReadOnly = true;
    
                                        
  • isTaskEffortPreservedWhenStartChangesInGrid: Indicates whether effort is preserved for tasks when end users change their start value from the default Start column in the grid; by default it is set to false;
  • headerBackground: Background color (and optionally other standard background atributes) used to fill the header areas within the control (grid and chart headers); by default it is a shade of light gray;
  • headerHeight: Height of the header areas within the control (grid and chart headers); by default it is set to 42 (i.e. 21 for each of the 2 default headered scale items):
    
    settings.headerHeight = 21 * 3; // Prepare space for 3 scales
    
                                        
  • itemHeight: Height value shared by all item rows within the control (grid rows and chart item areas); by default it is set to 21;
  • columns: Collection of objects indicating the columns to be presented in the grid; each column object supports these properties:
    • isTreeView: When set to true, indicates which column to be presented as a tree view (indented hierarchy) within the grid;
    • header: Text to be displayed as the grid column header;
    • width: Numeric value indicating the width of the column (in pixels);
    • allowUserToResize: Indicates whether the column may be resized or not by the end user with gripper drag and drop operations;
    • minWidth, maxWidth: Numeric values indicating the limits of width of the column (in pixels) when updated by the end user with gripper drag and drop operations;
    • isReadOnly: Indicates whether the column cells should be read only;
    • isSelection: Indicates whether the column cells include user interface for item selection;
    • headerClass, headerStyle: CSS class and/or inline style to apply to the grid header container element of the column;
    • cellClass, cellStyle: CSS class and/or inline style to apply to the grid cell container elements for the column;
    • cellTemplate, exportCellTemplate: Functions that return the output (document nodes) to be presented within the grid cell of this column in the standard view, and optionally different at export time, for a specific item received as parameter;
    
    items[7].description = 'Custom description';
    var columns = DlhSoft.Controls.GanttChartView.getDefaultColumns(items, settings);
    columns.push({ header: 'Description', width: 200, cellTemplate: function (item) { 
        return item.ganttChartView.ownerDocument.createTextNode(item.description); } });
    settings.columns = columns;
    
                                        
  • itemClass, itemStyle: CSS class and/or inline style to apply to task row elements in the grid;
  • standardItemClass, summaryItemClass, milestoneItemClass, standardItemStyle, summaryItemStyle, milestoneItemStyle: CSS classes and/or inline styles to apply to task row elements for the standard, summary, and milestone items in the grid; by default summary items are set to be displayed using bold as font weight;
  • alternativeItemClass, alternativeChartItemClass, alternativeItemStyle, alternativeChartItemStyle: CSS classes and/or inline styles to apply to alternative row elements in the grid and chart area;
  • gridLines, horizontalGridLines, verticalGridLines, horizontalChartLines: Colors for lines to be presented between rows and columns of the grid and/or chart areas of the control; by default they are not set;
  • verticalGridHeaderLines: Boolean value indicating whether to always show vertical grid header lines (when not hovering column grip elements);
  • selectedItemClass, selectedItemStyle: CSS class and/or inline style to apply to selected task row elements in the grid;
  • selectionMode: Indicates the selection behavior; support values are None (not allowed), Focus (single item selected triggered by focus), Single (single item selection using check box), Extended (multiple item selection using check boxes), and ExtendedFocus (multiple item selection using check boxes or triggered by focus); by default it is set to Focus;
  • indentationLevelWidth: Indicates the width (in pixels) of the indentation padding for a single level in the tree view column of the grid:
    
    settings.indentationLevelWidth = 20;
    
                                        
  • cellClass, cellStyle: CSS class and/or inline style to apply by default to cell container elements in the grid;
  • toggleButtonClass, toggleButtonHoveringClass, toggleButtonStyle, toggleButtonHoveringStyle: CSS classes and/or inline styles to apply to the expander buttons in their standard and hovering states within the tree view of the hierarchical grid of the control; by default they are set to fill content using gray and black solid colors:
    
    settings.toggleButtonStyle         = 'fill: Blue';
    settings.toggleButtonHoveringStyle = 'fill: Red';
    
                                        
  • collapsedToggleButtonTemplate, expandedToggleButtonTemplate: Functions that return the outputs (SVG nodes) to be presented as expander buttons in collapsed and expanded states within the tree view of the hierarchical grid of the control; by default they return appropriate SVG triangle (polygon) elements:
    
    settings.collapsedToggleButtonTemplate = function () { 
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
        svg.setAttribute('style', 'width: 12px; height: 12px'); 
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
        rect.setAttribute('id', 'PART_Button'); 
        rect.setAttribute('x', '2'); 
        rect.setAttribute('y', '2'); 
        rect.setAttribute('width', '8'); 
        rect.setAttribute('height', '8'); 
        svg.appendChild(rect); 
        return svg; 
    }; 
    settings.expandedToggleButtonTemplate = function () { 
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
        svg.setAttribute('style', 'width: 12px; height: 12px'); 
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
        rect.setAttribute('id', 'PART_Button'); 
        rect.setAttribute('x', '3'); 
        rect.setAttribute('y', '3'); 
        rect.setAttribute('width', '6'); 
        rect.setAttribute('height', '6'); 
        svg.appendChild(rect); 
        return svg; 
    };
    
                                        
  • displayedTime, currentTime: Date and time to scroll to and highlight (using a vertical bar) within the chart view; by defaut they are obtained from the local computer:
    
    settings.displayedTime = new Date(2012, 8, 1);
    settings.currentTime   = new Date(2012, 8, 2, 12, 0, 0);
    
                                        
  • timelineStart, timelineFinish: Start and finish date and times of the scrollable chart area; by default they are set to include the current time near the start position:
    
    settings.timelineStart  = new Date(2012, 7, 1);
    settings.timelineFinish = new Date(2014, 7, 1);
    
                                        
  • isRelativeToTimezone: Indicates whether displayedTime, currentTime, timelineStart, and timelineFinish values are configured as local timezone based values (true by default); it gets set to false upon component initialization as date and times are converted to UTC values internally; set it back to true if you reinitialize the properties and refresh the component; to read the timing values externally, you may use getOutputDate method of the component;
  • scales: Collection of objects indicating the scales to be presented in the chart; each scale object supports these properties:
    • scaleType: Type of the scale; supported values are: Years, Months, Weeks, Days, Hours, NonworkingTime (highlighting weekends), CurrentTime (current time vertical bar), FutureTime (current time vertical bar with future highlighting support), and Custom (the developer needs to also set the intervals collection in this case, using time interval objects defined by start and finish properties);
    • isHeaderVisible: Whether to display a chart header for the scale or not; by default it is false for NonworkingTime and CurrentTime scale types;
    • headerHeight: Height of the scale header in the chart;
    • headerTextFormat: Format to use for scale header texts; supported values are: DateTime, Date, Hour, DayOfWeek, DayOfWeekAbbreviation, Day, Month, MonthAbbreviation, Year, MonthYear, Localized, and Custom (the developer needs to also set the headerText property of each interval object within the intervals collection of the scale object in this case), or a function that converts a Date parameter to a presentation string;
    • headerClass, headerStyle: CSS class and/or inline style to apply to the scale header container elements;
    • isHighlightingVisible: Whether to display vertical rectangles in the main chart area for the generated scale intervals;
    • highlightingClass, highlightingStyle: CSS class and/or inline style to apply to the scale highlighter rectangle elements in the main chart area;
    • isSeparatorVisible: Whether to display vertical separator lines in the main chart area between the generated scale intervals;
    • separatorClass, separatorStyle: CSS class and/or inline style to apply to the scale separator line elements in the main chart area;
    
    settings.scales = [
        { scaleType: 'NonworkingTime', isHeaderVisible: false,
          isHighlightingVisible: true, highlightingStyle: 'stroke-width: 0; fill: #f8f8f8' },
        { scaleType: 'Months', headerTextFormat: 'Month',
          headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7; border-bottom: solid 1px #c8bfe7',
          isSeparatorVisible: true, separatorStyle: 'stroke: #c8bfe7' },
        { scaleType: 'Weeks', headerTextFormat: 'Date',
          headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7; border-bottom: solid 1px #c8bfe7' },
        { scaleType: 'Days', headerTextFormat: 'Day', headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7' },
        { scaleType: 'CurrentTime', isHeaderVisible: false, isSeparatorVisible: true, separatorStyle: 'stroke: #8bbf8a; stroke-width: 0.5px'}];
    
                                        
  • isIndividualItemNonworkingTimeHighlighted, areTaskInterruptionsHighlighted: Indicates whether to highlight specific nonworking time and/or task bar interruptions in the chart area for items that have specific schedule values defined;
  • updateScale: Time interval length (in milliseconds) to be used to dynamically round date and time during drag and drop update operations; by default it is set to quarter-hour (15 minutes):
    
    settings.updateScale = 60 * 60 * 1000; // 1 hour
    
                                        
  • hourWidth: Indicates the zoom level to be used for the chart area, and represents the actual number of pixels each hour in the timeline gets available; to zoom in, increase this value; to zoom out, decrease it; by default it is set to 2.5:
    
    settings.hourWidth *= 2; // 200%
    
                                        
  • visibleWeekStart, visibleWeekFinish: The start and finish days of the visible week interval; by default they are set to Sunday (0) and Saturday (6):
    
    settings.visibleWeekStart  = 1; // Monday
    settings.visibleWeekFinish = 5; // Friday
    
                                        
  • workingWeekStart, workingWeekFinish: The start and finish days of the working week interval, used when computing task effort values and when dragging and dropping task bars; by default they are set to Monday (1) and Friday (5); remaining days of the week are considered nonworking time and by default they are highlighted in the chart area:
    
    settings.workingWeekStart  = 1; // Monday
    settings.workingWeekFinish = 4; // Thursday
    
                                        
  • visibleDayStart, visibleDayFinish: The start and finish times of the visible day interval, in milliseconds passed since midnight; by default they are set to 8 AM and 4 PM; the working time interval of the day is also defined using the same values:
    
    settings.visibleDayStart  = 10 * 60 * 60 * 1000; // 10 AM
    settings.visibleDayFinish = 20 * 60 * 60 * 1000; // 8 PM
    
                                        
  • specialNonworkingDays: Optional collection of special nonworking days, such as holidays; alternatively, a Boolean function that receives a date argument and indicates whether it represents a nonworking day or not:
    
    settings.specialNonworkingDays = [new Date(2012, 8, 24), new Date(2012, 8, 25)];
    
                                        
    
    settings.specialNonworkingDays = function(date) { return date.getDate() == 24 || date.getDate() == 25; } // days 24 and 25 of all months
    
                                        
  • schedule: Allows initializing working week and day intervals and special nonworking days to consider for scheduling purposes using an alternative definition object:
    
    settings.schedule = { 
        workingWeekStart: 0, workingWeekFinish: 3, // Sunday - Wednesday 
        workingDayStart: 9 * 60 * 60 * 1000, workingDayFinish: 19 * 60 * 60 * 1000, // 9 AM - 7 PM, exceeding visible 4 PM 
        specialNonworkingDays: [new Date(2012, 8, 18), new Date(2012, 8, 21), new Date(2012, 8, 22)] // Partial replacement for excluded dates 
    };
    
                                        
  • barMargin: The top and bottom margins around the task bars in the chart:
    
    settings.barMargin = 3;
    
                                        
  • barHeight: The actual height to apply to the task bars in the chart; by default it is set to the remaining space from itemHeight when subtracting top and bottom barMargin values:
    
    settings.barHeight = 16;
    
                                        
  • barCornerRadius: The corner radius to use to round corners of the task bars in the chart:
    
    settings.barCornerRadius = 4;
    
                                        
  • completedBarMargin: The top and bottom margins around completion bars of the task bars in the chart;
  • completedBarHeight: The actual height to apply to completion bars of the task bars in the chart; by default it is set to the remaining space from barHeight when subtracting top and bottom completedBarMargin values;
  • completedBarCornerRadius: The corner radius to use to round corners of completion bars of the task bars in the chart; by default it is set to zero (0);
  • styleDefinitionTemplate: Function that returns SVG definitions (node) to be used in standard, summary, and milestone style and template definitions (see below); by default, they include these items: BlueGradient, BlackGradient, ArrowMarker:
    
    settings.styleDefinitionTemplate = function (ganttChartView) {
        var document = ganttChartView.ownerDocument;
        var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        var arrowMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
        arrowMarker.setAttribute('id', 'ArrowMarker');
        arrowMarker.setAttribute('viewBox', '0 0 10 10');
        arrowMarker.setAttribute('refX', '0');
        arrowMarker.setAttribute('refY', '5');
        arrowMarker.setAttribute('markerUnits', 'strokeWidth');
        arrowMarker.setAttribute('markerWidth', '5');
        arrowMarker.setAttribute('markerHeight', '4');
        arrowMarker.setAttribute('orient', 'auto');
        var arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        arrowPath.setAttribute('fill', 'LightGreen');
        arrowPath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
        arrowMarker.appendChild(arrowPath);
        defs.appendChild(arrowMarker);
        return defs;
    }
    
                                        
  • standardBarClass, summaryBarClass, milestoneBarClass, standardBarStyle, summaryBarStyle, milestoneBarStyle: CSS classes and/or inline styles to apply to the standard, summary, and milestone task bars in the chart:
    
    settings.standardBarStyle  = 'stroke: Green; fill: LightGreen';
    settings.summaryBarStyle   = 'stroke: LightGreen; fill: White';
    settings.milestoneBarStyle = 'stroke: DarkRed; fill: Red';
    
                                        
  • standardCompletedBarClass, standardCompletedBarStyle: CSS class and/or inline style to apply to completion bars of the task bars in the chart:
    
    settings.standardCompletedBarStyle = 'stroke: DarkGreen; fill: Green';
    
                                        
  • collapsedSummaryLineClass, collapsedSummaryLineStyle: CSS class and/or inline style to apply to the line displayed at the bottom of summary task bars in the chart when they get collapsed:
    
    settings.collapsedSummaryLineStyle = 'stroke: LightGreen; stroke-dasharray: 2 2';
    
                                        
  • completedBarThumbClass, completedBarThumbStyle: CSS class and/or inline style to apply to the triangle displayed at the finish end of task completion bars in the chart when they are hovered using the mouse cursor, providing access to updating completion:
    
    settings.completedBarThumbStyle = 'stroke: Green; fill: Yellow';
    
                                        
  • dependencyPointerClass, dependencyPointerStyle: CSS class and/or inline style to apply to the circle displayed at the finish end of task bars in the chart when they are hovered using the mouse cursor, providing access to creating task dependencies (predecessor items):
    
    settings.dependencyPointerStyle = 'stroke: DarkGreen; fill: LightGreen';
    
                                        
  • dependencyLineClass, dependencyLineStyle: CSS class and/or inline style to apply to polylines displayed between dependent task bars in the chart:
    
    settings.dependencyLineStyle = 'stroke: LightGreen; fill: none; marker-end: url(#ArrowMarker)';
    
                                        
  • temporaryDependencyLineClass, temporaryDependencyLineStyle: CSS class and/or inline style to apply to the temporary line displayed between task bars in the chart during drag operations occuring while preparing for creating task dependencies (predecessor items):
    
    settings.temporaryDependencyLineStyle = 'stroke: LightGreen; stroke-dasharray: 2 2; fill: none; marker-end: url(#ArrowMarker)';
    
                                        
  • assignmentsClass, assignmentsStyle: CSS class and/or inline style to apply to the assignments presenter element in the chart:
    
    settings.assignmentsStyle = 'fill: Green';
    
                                        
  • standardTaskTemplate, summaryTaskTemplate, milestoneTaskTemplate: Functions that return the outputs (SVG nodes) for standard, summary, and milestone task bars to be presented in the chart for a specific item received as parameter:
    
    settings.standardTaskTemplate = function (item) {
        var ganttChartView = item.ganttChartView;
        var document = ganttChartView.ownerDocument;
        var svgns = 'http://www.w3.org/2000/svg';
        var containerGroup = document.createElementNS(svgns, 'g'); 
        var rect = document.createElementNS(svgns, 'rect');
        var itemLeft = ganttChartView.getChartPosition(item.start, settings);
        var itemRight = ganttChartView.getChartPosition(item.finish, settings);
        rect.setAttribute('x', itemLeft - 1);
        rect.setAttribute('y', settings.barMargin - 1);
        rect.setAttribute('width', itemRight - itemLeft + 1);
        rect.setAttribute('height', settings.barHeight + 2);
        rect.setAttribute('rx', 4);
        rect.setAttribute('style', 'stroke: DarkGreen; fill: Green');
        containerGroup.appendChild(rect);
        var thumb = document.createElementNS(svgns, 'rect');
        thumb.setAttribute('x', itemLeft); thumb.setAttribute('width', Math.max(0, itemRight - itemLeft - 1));
        thumb.setAttribute('y', ganttChartView.settings.barMargin); thumb.setAttribute('height', ganttChartView.settings.barHeight);
        thumb.setAttribute('style', 'fill: Transparent; cursor: move');
        DlhSoft.Controls.GanttChartView.initializeTaskDraggingThumbs(thumb, null, null, null, item, itemLeft, itemRight, null);
        containerGroup.appendChild(thumb);
        return containerGroup;
    };
    
                                            
    
    var originalStandardTaskTemplate = DlhSoft.Controls.GanttChartView.getDefaultStandardTaskTemplate(items, ganttChartView, settings);
    settings.standardTaskTemplate = function (item) {
        var ganttChartView = item.ganttChartView;
        var document = ganttChartView.ownerDocument;
        var svgGroup = originalStandardTaskTemplate(item);
        if (item.content.indexOf('Task 2.') == 0) {
            var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            var itemLeft = ganttChartView.getChartPosition(item.start, settings);
            var itemRight = ganttChartView.getChartPosition(item.finish, settings);
            rect.setAttribute('x', itemLeft - 1);
            rect.setAttribute('y', settings.barMargin - 1);
            rect.setAttribute('width', Math.max(0, itemRight - itemLeft + 1));
            rect.setAttribute('height', settings.barHeight + 2);
            rect.setAttribute('style', 'stroke: Red; fill: Transparent');
            svgGroup.insertBefore(rect, svgGroup.childNodes[0]);
        }
        return svgGroup;
    };
    
                                            
  • extraTaskTemplate: Optional function that returns supplemental output (SVG node) to display on top of task bars to be presented in the chart for a specific item received as parameter:
    
    settings.extraTaskTemplate = function (item) {
        var ganttChartView = item.ganttChartView;
        var document = ganttChartView.ownerDocument;
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        var itemLeft = ganttChartView.getChartPosition(item.start, settings);
        rect.setAttribute('x', itemLeft - 20 + (!item.hasChildren && !item.isMilestone ? 5 : 0));
        rect.setAttribute('y', settings.barMargin);
        rect.setAttribute('width', 12);
        rect.setAttribute('height', settings.barHeight);
        if (!item.hasChildren && !item.isMilestone)
            rect.setAttribute('style', 'stroke: Blue; fill: LightBlue');
        else
            rect.setAttribute('style', 'stroke: none; fill: none');
        return rect;
    };
    
                                        
  • isTaskToolTipVisible: Determines whether task bar tool tips are presented;
  • itemTemplate: Function that returns the output (SVG node) to presented in the chart for a specific item received as parameter (usually a tool tip):
    
    settings.itemTemplate = function (item) {
        var document = item.ganttChartView.ownerDocument;
        var toolTip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        var toolTipContent = item.content + ' • ' + 'Start: ' + item.start.toLocaleString();
        if (!item.isMilestone)
            toolTipContent += ' • ' + 'Finish: ' + item.finish.toLocaleString();
        toolTip.appendChild(document.createTextNode(toolTipContent));
        return toolTip;
    };
    
                                        
  • areTaskAssignmentsVisible: Determines whether task assignments are presented in the chart;
  • assignmentsTemplate: Function that returns the output (SVG node) for assignments content to be presented in the chart for a specific item received as parameter;
  • isTaskCompletedEffortVisible: Determines whether task completion bars are presented in the chart;
  • areTaskDependenciesVisible: Determines whether dependency lines are presented in the chart;
  • allowCreatingStartDependencies, allowCreatingToFinishDependencies: Determine whether to allow creating start- and -to-finish dependencies between tasks using drag and drop operations;
  • dependencyLineTemplate: Function that returns the output (SVG node) for dependency polyline representing predecessor information in the chart for an item and a specific predecessor item received as parameters;
  • isDependencyToolTipVisible: Determines whether dependency line tool tips are presented;
  • predecessorItemTemplate: Function that returns the output (SVG node) to presented in the chart for an item and a specific predecessor item received as parameters (usually a tool tip):
    
    settings.predecessorItemTemplate = function (item, predecessorItem) {
        var document = item.ganttChartView.ownerDocument;
        var toolTip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        var toolTipContent = predecessorItem.item.content + ' → ' + item.content;
        toolTip.appendChild(document.createTextNode(toolTipContent));
        return toolTip;
    };
    
                                        
  • isDraggingTaskStartEndsEnabled: Indicates ehwehter left ends of task bars may be dragged to update task start date and times preserving finish values;
  • isGridRowClickTimeScrollingEnabled: Indicates whehter clicking a grid row should automatically scroll the chart area horizontally to display the associated task item start date and time;
  • isMouseWheelZoomEnabled: Indicates whehter to zoom in and out the timeline automatically when the end user rolls the mouse wheel hovering the chart area;
  • isMouseWheelZoomEnabledMinHourWidth, isMouseWheelZoomEnabledMaxHourWidth: Indicates the limits of the hourWidth value to be considered when mouse wheel zooming is enabled;
  • visibilityFilter: Optional function that determines whether an item from the managed collection should be presented in the view:
    
    settings.visibilityFilter = function (item) { return item.content.indexOf('Task 2') >= 0; };
    
                                        
  • areTaskDependencyConstraintsEnabled: Determines whether dependency constraints are enabled in the chart, providing auto-scheduling features for dependent tasks; by default is it set to false for optimization purposes;
  • areTaskDependencyConstraintsEnabledWhileDragging: Determines whether dependency constraints are automatically ensured even while dragging task bars in the control (or only when the operation completes), when areTaskDependencyConstraintsEnabled property is set to true; by default it is set to false;
  • areTaskDependencyConstraintsDisabledWhenDropping: Determines whether dependency constraints are disabled when the predecessor item is created using drag and drop operations in the chart, when areTaskDependencyConstraintsEnabled is set to false; by default it is set to false;
  • areDependencyConstraintsAppliedOnStartedTasks, areDependencyConstraintsAppliedOnMilestones: When set to false, limit dependency constraints as specified (scheduled times of started tasks and/or of milestones are preserved);
  • isBaselineVisible: Determines whether baseline task bars are presented in the chart;
  • assignableResources: Determines the resources that may be assigned to task items using the resource selector control, when available and accepted by having useResourceSelector set to true, from within the assignments content cells of the grid:
    
    settings.assignableResources = ['Resource 1', 'Resource 2', 'Resource 3', 'Material 1', 'Material 2'];
    
                                        
  • autoAppendAssignableResources: Determines whether the new resource names typed directly within the input element of the resource selector control, when available, are appended to the assignableResources collection automatically;
  • resourceQuantities: Dictionary that determines the quantity values to consider when leveling resources, indicating maximum amounts of materials available for use at the same time:
    
    settings.resourceQuantities = [{ key: 'Material 1', value: 4 }, { key: 'Material 2', value: Infinity }];
    
                                        
  • maxLoadChartDisplayedResourceQuantity: Indicates the maximum quantity displayed as 100% height in the Load Chart when using getLoadChartItems method;
  • resourceSchedules: Dictionary that determines the schedules to use for tasks based on assigned resources; such a task will use the schedule of the first resource assigned to that task having the maximum allocation units value among all assignments of that task:
    
    settings.resourceSchedules = [{ key: 'Resource 1', value: { workingWeekStart: 2, workingWeekFinish: 6 }, { key: 'Resource 2', value: { workingWeekStart: 0, workingWeekFinish: 4 } }];
    
                                        
  • taskInitiationCost, defaultResourceUsageCost, specificResourceUsageCosts, defaultResourceHourCost, specificResourceHourCosts: Numbers and dictionaries that determine costs of managed tasks and assigned resources:
    
    settings.taskInitiationCost         = 5;
    settings.defaultResourceUsageCost   = 1;
    settings.specificResourceUsageCosts = [{ key: 'Resource 1', value: 2 }, { key: 'Material 1', value: 7}];
    settings.defaultResourceHourCost    = 10;
    settings.specificResourceHourCosts  = [{ key: 'Resource 1', value: 20 }, { key: 'Material 2', value: 0.5}];            
    
                                        
  • areResourceImagesVisibleAsAssignments, resourceImageUrls: Allow displaying resource images as assignments in the chart area (to the right side of task bars) instead of item.assignmentsContent string values themselves; the latter sets a dictionary of key and values that defines the media URLs to use for each resource name, respectively:
    
    settings.areResourceImagesVisibleAsAssignments = true;
    settings.resourceImageUrls = [{ key: 'Resource 1', value: 'Images/Res1.png' }, { key: 'Resource 2', value: 'Images/Res2.png' }];
    
                                        
  • areStandardTaskLabelsVisible, areSummaryTaskLabelsVisible, areMilestoneTaskLabelsVisible, standardLabelColor, standardLabelStyle, standardLabelClass, summaryLabelColor, summaryLabelStyle, summaryLabelClass, milestoneLabelColor, milestoneLabelStyle, milestoneLabelClass: Configure visibility and appearance of bar labels for different task types in the chart area, applicable when item.label values are set;
  • isVirtualizing: Indicates whether the control will create task bars only when they need to be presented (such as only when scrolling the view to their positions); by default it is set to true for optimization purposes:
    
    settings.isVirtualizing = false;
    
                                        
  • validateStartFinish: Boolean value indicating whether to verify Start and Finish values upon editing them from grid cells; if set to true, will not allow setting Start after Finish or Finish before Start, in order to prevent zero-effort tasks; false by default;
  • percentBasedCompletionBar: Boolean value indicating whether to display percent-based completion bar (rather than completed finish date and time based bar), i.e. disregarding the nonworking time of the task; false by default;
  • integralCompletionPercents: Boolean value indicating whether completion percent values of tasks should be displayed as integral values, i.e. no decimals are shown for the numbers; false by default;
  • dateTimePickerType: The input type to use for the default start and finish cell value editors; "text" by default:
    
    settings.dateTimePickerType = 'dateTime';
    
                                        
  • useDatePicker, useTimePicker, useResourceSelector: Indicate whether or not to use DatePicker (or DateTimePicker) and MultiSelectorComboBox controls for start and finish (when dateTimePickerType is set to "text"), and assignments content cell editors, respectively, in the grid, assuming that DlhSoft.Data.HTML.Controls library that provides the required components is loaded; by default they are set to true;
  • calendarSelectorLevels: Indicates the number of calendar selector levels that may be displayed on date picker controls; supported values: 1: months, 2: + years, 3: + decades;
  • useInlineToolTips: Indicates whether to use tool tip controls generated inside the SVG content rather than title elements; true by default;
  • useUpdatingToolTips: Indicates whether or not to use ToolTip controls for updating task start, finish, completion, and dependencies in the chart using drag and drop operation, assuming that DlhSoft.Data.HTML.Controls library that provides the required components is loaded; by default it is set to true;
  • months, daysOfWeek: Names of the months and of the days of the week to use at presentation time:
    
    settings.months     = [ 'M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12' ];
    settings.daysOfWeek = [ 'D0', 'D1', 'D2', 'D3', 'D4', 'D5', 'D6' ];
    
                                        
  • weekStartDay: Day of the week to consider as week start; by default it is set to Sunday (0); to set it to Monday use one (1):
    
    settings.weekStartDay = 1; // Monday
    
                                        
  • dateFormatter(date): text, dateTimeFormatter(dateTime): text, dateTimeParser(text): dateTime: Functions that accept date or text parameters and return text or date values, used to convert date or date and time values to text values, and to parse text values as date and time values whenever needed within the control; the functions may be provided by the developer for further customization and/or localization purposes; by default they are initialized to a set of internally defined functions that consider a culture invariant date and time formatting: MM/dd/yyyy HH:mm:
    
    settings.dateFormatter     = function (date)     { return date.toDateString(); };
    settings.dateTimeFormatter = function (dateTime) { return dateTime.toString(); };
    settings.dateTimeParser    = function (text)     { return new Date(text); };
    
                                        
  • displayedTimeChangeHandler(displayedTime), hourWidthChangeHandler(hourWidth): Functions called whenever the end user scrolls the chart area horizontally or performs mouse wheel zooming on the chart area, changing the left most displayed time (settings.displayedTime) or the zoom level (settings.hourWidth);
  • splitterPositionChangeHandler(gridWidth, chartWidth): Function called whenever the end user resizes the grid and chart areas horizontally, changing the splitter position (settings.gridWidth and settings.chartWidth);
  • columnWidthChangeHandler(column, width): Function called whenever the end user resizes a grid column, changing its width (column.width);
  • itemPropertyChangeHandler(item, propertyName, isDirect, isFinal): Function called whenever item properties change within the control, providing the changed item, relevant property name, and Boolean values indicating whether this change was directly triggered by the user, and whether this is the final change in a periodic operation such as a drag and drop action, specified as parameters; a custom function may be provided by the developer in order to receive notifications whenever data changes occur within the control, when using the default grid columns and task template functions:
    
    settings.itemPropertyChangeHandler = function (item, propertyName, isDirect, isFinal) {
        if (isDirect && isFinal)
            alert(item.content + '.' + propertyName + ' changed.');
    }
    
                                        
  • itemExpansionChangeHandler(item, isExpanded): Function called whenever summary item expansion state changes within the control, providing the expanded or collapsed item, and a Boolean value indicating the updated expansion state, specified as parameters;
  • itemSelectionChangeHandler(item, isSelected, isDirect): Function called whenever item selection changes within the control, providing the selected or unselected item, a Boolean value indicating the updated selection state, and a Boolean value indicating whether this change was directly triggered by the user, specified as parameters;
  • itemMoveHandler(item, fromIndex, toIndex): Function called whenever an item is moved in the managed list of the control, providing the item, source and target positions of the item, specified as parameters;
  • mouseHandler(eventName, isOnItemsArea, isOnChart, row, column, button, clickCount, e), mouseMoveHandler(isOnItemsArea, isOnChart, row, column), mouseDownHandler(isOnItemsArea, isOnChart, row, column, button), clickHandler(isOnItemsArea, isOnChart, row, column), doubleClickHandler(isOnItemsArea, isOnChart, row, column), itemClickHandler(isOnChart, item, column), itemDoubleClickHandler(isOnChart, item, column), chartClickHandler(isOnItemsArea, row, dateTime), chartDoubleClickHandler(isOnItemsArea, row, dateTime), chartItemClickHandler(item, dateTime), chartItemDoubleClickHandler(item, dateTime): Event handlers for generic or granular mouse events, such as for grid and chart, header and items areas, or click and double click event types;
  • dependencyLineClickHandler(predecessorItem, targetItem, e), dependencyLineDoubleClickHandler(predecessorItem, targetItem, e): Event handlers for dependency line click and double click events;
  • itemContextMenuHandler(e, item), predecessorItemContextMenuHandler(e, predecessorItem, targetItem): Event handlers for chart item and predecessor item context menus;
  • invalidPredecessorDetectionHandler(predecessorItem, targetItem, sourceItem): Event handler for detection of invalid predecessors upon circular dependencies, before automatic removal (occurring when dependency constraints are enabled).

Operations

The following static APIs are available at settings initialization time, prefixed by DlhSoft.Controls.GanttChartView namespace:

  • getDefaultColumns(items, settings): Returns an array of default definitions that you can further customize and use as value for the columns property of the control settings used at initialization time;
  • getDefaultCollapsedToggleButtonTemplate(controlElement, settings), getDefaultExpandedToggleButtonTemplate(controlElement, settings): Return functions that provide the original templates for collapsed and expanded toggle buttons in the tree-grid; developers can access them to retreive SVG content to be further adorned in the collapsedToggleButtonTemplate, and expandedToggleButtonTemplate functions specified in the control settings used at initialization time;
  • getDefaultScales(settings): Returns an array of default definitions that you can further customize and use as value for the scales property of the control settings used at initialization time;
  • getDefaultStyleDefinitionTemplate(controlElement, settings): Returns a function that provides common SVG definitions that may be used in template methods for task and dependency line styles specified in the control settings used at initialization time;
  • getDefaultStandardTaskTemplate(items, controlElement, settings), getDefaultSummaryTaskTemplate(items, controlElement, settings), getDefaultMilestoneTaskTemplate(items, controlElement, settings): Return functions that provide the original templates for standard, summary, and milestone task bars in the chart area, based on the item received as parameter; developers can access them to retreive SVG content to be further adorned in the standardTaskTemplate, summaryTaskTemplate, and milestoneTaskTemplate functions specified in the control settings used at initialization time;
  • getDefaultItemTemplate(settings): Returns a function that provides the original template for task items, usually presented as tool tips when hovering task bars in the chart area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the itemTemplate function specified in the control settings used at initialization time;
  • getDefaultAssignmentsTemplate(settings): Returns a function that provides the original template for the assignments content positioned to the right of task bars in the chart area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the assignmentsTemplate function specified in the control settings used at initialization time;
  • getDefaultDependencyLineTemplate(items, settings): Returns a function that provides the original template for the dependency lines presented in the chart area, based on the item and predecessor item received as parameters; developers can access it to retreive SVG content to be further adorned in the dependencyLineTemplate function specified in the control settings used at initialization time;
  • getDefaultPredecessorItemTemplate(settings): Returns a function that provides the original template for predecessor items representing task dependencies, usually presented as tool tips when hovering dependency lines in the chart area, based on the item and predecessor item received as parameters; developers can access it to retreive SVG content to be further adorned in the predecessorItemTemplate function specified in the control settings used at initialization time;
  • initializeTaskDraggingThumbs(startThumb, startOnlyThumb, finishThumb, completedFinishThumb, item, itemLeft, itemRight, itemCompletedRight): Inside task template functions, sets up task drag and drop behavior for the non-null SVG elements specified to be designed as thumbs, considering the specified item and item positioning in the chart;
  • initializeDependencyDraggingThumbs(thumb, startThumb, containerGroup, item, itemTop, itemRight, itemLeft): Inside task template functions, sets up dependency creation drag and drop behavior for the non-null SVG elements specified to be designed as thumbs inside its specified container group that would be used to supplementary present temporary dependency lines during drag and drop operations, considering the specified item and item positioning in the chart;
  • getWorkingTime(dateTime, settings), getEffort(start, finish, settings), getFinish(start, effort, settings), getStart(effort, finish, settings), getCompletion(start, completedFinish, finish, settings), getCompletedFinish(start, completion, finish, settings): Functions that return the next working time based on a specified date and time value, the effort betweeen the specified start and finish values, the finish date and time considering the specified start and effort values, the start date and time considering the specified effort and start values, and the completion rate (between 0 and 1) or completed finish date and time considering the specified start, completed finish date and time or completion rate and finish values;
  • getWeekStart(dateTime, weekStartDay), getWeekFinish(dateTime, weekStartDay): Functions that return the start and finish of the week based on a specified date and time value and the day of the week to be considered as first, represented by a value ranging from Sunday (0) to Saturday (6);
  • defaultDateTimeFormatter(date): Default date time formatter implementation, returning a text representing the specified date and a time using month, day, year, and hour and minute time parts;
  • defaultDateFormatter(date): Default date formatter implementation, returning a text representing the specified date using month, day, and year time parts;
  • defaultDateTimeParser(value): Default date time parser implementation, returning a date value representing the specified date and a time text considering month, day, year, and optionally hour and minute time parts;
  • textColumnTemplateBase(document, valueGetter, isVisibleGetter), textInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter), optionSelectColumnTemplateBase(document, width, optionCollectionGetter, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter), numberInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter), percentInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter), timeSpanInputColumnTemplateBase(document, width, valueGetter, valueSetter, scale, isEnabledGetter, isVisibleGetter, isBoldGetter), dateTimeInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter), datePickerInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter, defaultTimeOfDay, calendarSelectorValues, months, daysOfWeek), dateTimePickerInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter, defaultTimeOfDay, calendarSelectorValues, months, daysOfWeek), multiSelectorComboBoxInputColumnTemplateBase(document, width, optionCollectionGetter, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter): Specific user interface generator functions useful when defining new grid columns or when customizing column cell templates; supported parameters are:
    • document: The document to generate the required elements within; usually the document of the current window;
    • valueGetter(): Function that gets the data value and prepares for the output element;
    • optionCollectionGetter(): Function that gets the options available for selection within the output element;
    • valueSetter(value): Function that provides the updated content value of the output element as parameter, required to prepare and set the associated data object value;
    • scale: Optional factor to consider for the value, such as 8 to display working day values instead of hours;
    • width: The width of the output element;
    • isEnabledGetter(): Optional function that returns a value that indicates whether the output element should be visible or not;
    • isVisibleGetter(): Optional function that returns a value that indicates whether the output element should be enabled or not;
    • isBoldGetter(): Optional function that returns a value that indicates whether the text in the output element should be bold or not;
    • defaultTimeOfDay: Optionally indicates the time of day (in milliseconds) to be set by DatePicker (or DateTimePicker) controls;
    • calendarSelectorLevels: Optionally indicates number of calendar selector levels to display by DatePicker (or DateTimePicker) controls;
    • months, daysOfWeek: Optionally indicates month and day of week names to be displayed by DatePicker (or DateTimePicker) controls.
  • getIconColumnTemplate(imageSource|-Getter, imageClass, imageStyle, isMovingEnabled|-Getter, isMovingToEnabledGetter, movingTargetHoveringClass, movingTargetHoveringStyle, disabledMovingTargetHoveringClass, disabledMovingTargetHoveringStyle), getIndexColumnTemplate(zeroBased), getWbsColumnTemplate(zeroBased), getEffortColumnTemplate(inputWidth, scale, isInputDisabled), getTotalEffortColumnTemplate(inputWidth, scale, isInputDisabled), getDurationColumnTemplate(inputWidth, scale, isInputDisabled), getCompletedEffortColumnTemplate(inputWidth, scale, isInputDisabled), getTotalCompletedEffortColumnTemplate(inputWidth, scale, isInputDisabled), getCompletionColumnTemplate(inputWidth, isInputDisabled), getPredecessorsColumnTemplate(inputWidth, isInputDisabled, zeroBased), getAssignmentSelectorColumnTemplate(selectWidth, assignableResourcesCollection|-Getter, isInputDisabled, useMultiSelectorComboBox), getCostColumnTemplate(inputWidth, isInputDisabled), getBaselineStartColumnTemplate(inputWidth, useDatePicker, useTimePicker, defaultTimeOfDay, calendarSelectorLevels, months, daysOfWeek, isInputDisabled), getBaselineFinishColumnTemplate(inputWidth, useDatePicker, useTimePicker, defaultTimeOfDay, calendarSelectorLevels, months, daysOfWeek, isInputDisabled), getMinStartColumnTemplate(inputWidth, useDatePicker, useTimePicker, defaultTimeOfDay, calendarSelectorLevels, months, daysOfWeek, isInputDisabled), getMaxStartColumnTemplate(inputWidth, useDatePicker, useTimePicker, defaultTimeOfDay, calendarSelectorLevels, months, daysOfWeek, isInputDisabled), getMinFinishColumnTemplate(inputWidth, useDatePicker, useTimePicker, defaultTimeOfDay, calendarSelectorLevels, months, daysOfWeek, isInputDisabled), getMaxFinishColumnTemplate(inputWidth, useDatePicker, useTimePicker, defaultTimeOfDay, calendarSelectorLevels, months, daysOfWeek, isInputDisabled): Return common grid column cell template functions providing specific user interface that would allow end users to view and update extra item properties; supported parameters are:
    • imageSource|-Getter(item): URL of function that returns an URL identifying the image resource to be used as the source of the output image element.
    • imageClass, imageStyle: CSS class and/or inline style to be applied to the image output element;
    • isMovingEnabled|-Getter(item): Boolean of function that returns a Boolean value indicating whether changing the item vertical order position in the managed hierarchy is enabled for end users by performing drag and drop operations initiated by the output image element;
    • isMovingToEnabledGetter(index, hoveringItem): Optional function that returns a Boolean value indicating whether moving the item to the row index used by the hovering item in the managed hierarchy received as parameters is enabled for end users when performing drag and drop operations initiated by the output image element;
    • movingTargetHoveringStyle, movingTargetHoveringClass, disabledMovingTargetHoveringStyle, disabledMovingTargetHoveringClass: Optional inline styles and/or CSS classes to apply temporarily to items being hovered during drag and drop moving operations, for enabled and disabled indexes, respectively;
    • zeroBased: Indicates whether displayed indexes are zero-based; by default they are one-based;
    • inputWidth, selectWidth: Indicate the width of the output element;
    • scale: Optional factor to consider for time values, such as 8 to display working day values instead of hours;
    • useDatePicker, useTimePicker, useMultiSelectorComboBox: Indicate whether or not to use DatePicker (or DateTimePicker) and MultiSelectorComboBox controls for start and finish (when dateTimePickerType is set to "text"), and assignments content cell editors, respectively, in the grid, assuming that DlhSoft.Data.HTML.Controls library that provides the required components is loaded; by default they are set to true;
    • defaultTimeOfDay: Optionally indicates the time of day (in milliseconds) to be set by DatePicker (or DateTimePicker) controls for start and finish content cell editors;
    • calendarSelectorLevels: Optionally indicates number of calendar selector levels to display by DatePicker (or DateTimePicker) controls for start and finish content cell editors;
    • months, daysOfWeek: Optionally indicates month and day of week names to be displayed by DatePicker (or DateTimePicker) controls for start and finish content cell editors;
    • assignableResourcesCollection|-Getter(item): Array of function that returns an array containing assignable resources available for selection within the assignment selector output element;
    • isInputDisabled: Indicate whether the output element should be disabled.
  • getInputDate(date), getOutputDate(date): Prepares the specified date values to be used for component method input or method result or field output, considering that after initialization the component uses UTC date and time values internally; these methods may also be called using a component instance object.

Component instance

The component may be initialized using an initialize method call:


DlhSoft.Controls.GanttChartView.initialize(ganttChartView, items, settings);

                            

var ganttChartView = DlhSoft.Controls.GanttChartView.initialize(ganttChartViewElement, items, settings);

                            

The initialized control element provides the following API:

  • items: Provides access to the Gantt Chart items displayed by the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(): Updates the user interface considering all external item and settings changes;
  • refreshGridItems(), refreshChartItems(), refreshItems(), refreshGridItem(item), refreshChartItem(item), refreshItem(item), refreshPredecessorItems(item), refreshItemGraph(item), refreshItemPath(item), refreshItemNeighbourhood(item): Update the item(s), predecessor items, dependency graph, hierarchy path, or hierarchical neighbourhood within the grid, chart or both areas, considering all external changes on the specified item and related predecessor and successor items:
    
    item.barStyle = 'stroke: Red; fill: Yellow';
    ganttChartView.refreshChartItem(item);
    
                                        
  • refreshCurrentTime(), setCurrentTime(dateTime), updateCurrentTime(): Update the user interface considering the specified current time chanage;
  • insertItem(index, item), addItem(item), insertItems(index, items), addItems(items): Insert item(s) to the managed item hierarchy at the specified index or at the bottom of the collection and refreshes the view:
    
    var item = { content: 'New task', start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 4, 16, 0, 0) };
    ganttChartView.insertItem(item);
    
                                        
  • removeItem(item), removeItems(items): Removes item(s) from the managed item hierarchy and refreshes the view;
  • moveRange(fromIndex, count, toIndex): Moves a range of items to a specified index in the managed item hierarchy and refreshes the view;
  • moveItem(item, toIndex), moveItemHierarchy(item, toIndex): Moves an item or an item and its children to a specified index in the managed item hierarchy and refreshes the view;
  • moveItemUp(item), moveItemDown(item), moveItemHierarchyUp(item), moveItemHierarchyDown(item): Moves an item or an item and its children up or down in the managed item hierarchy and refreshes the view;
  • increaseItemIndentation(item), decreaseItemIndentation(item): Increases or decreases item indentation in the managed item hierarchy and refreshes the view;
  • setItemContent(item, value): Set task content value;
  • setItemStart(item, value), setItemFinish(item, value): Set task start and finish date and time values;
  • setItemIsMilestone(item, value): Set the milestone indicator of the task;
  • getItemEffort(item), setItemEffort(item, value), getItemCompletedEffort(item), setItemCompletedEffort(item, value): Get and set task effort and completed effort (duration) values, aggregating sum values for summary items;
  • getItemTotalEffort(item), getItemTotalCompletedEffort(item): Get task total effort values, considering resource assignments, aggregating sum values for summary items;
  • getItemDuration(item), setItemDuration(item, value): Get and set task duration values as time differences between item start and finish date and times, including for summary items;
  • getItemCompletion(item), setItemCompletion(item, value): Get and set task completion values (as rates between 0 and 1) considering the completed effort and effort values of the item;
  • isItemCompleted(item): Determines whether the task work is fully completed;
  • setItemAsCompleted(item): Specifies that the task work is fully completed;
  • hasItemStarted(item): Determines whether the task work has already started;
  • setItemAsNotStarted(item): Specifies that the task work has not started yet;
  • isItemOnSchedule(item): Determines whether the task work is on schedule at the current date;
  • setItemAssignmentsContent(item, value): Set task assignments content value;
  • getItemIndexString(item, zeroBased): Gets the index string for the task, considering whether indexes are zero-based (by default they are one-based);
  • getItemPredecessorsString(item, zeroBased), setItemPredecessorsString(item, value, zeroBased): Get and set predecessors string values for the task, considering current item collection indexes, dependency types, and lag times, and whether indexes are zero-based (by default they are one-based);
  • getCurrentItem(): Returns the current item in the hierarchy;
  • getSelectedItem(), getSelectedItems(): Returns the selected item(s) in the hierarchy;
  • selectItem(item), unselectItem(item): Update the selection state of an item in the hierarchy:
    
    selectItem(item);
    
                                        
  • expandItem(item), collapseItem(item): Update the expansion state of a task item in the hierarchy:
    
    expandItem(item);
    
                                        
  • scrollToItem(item): Scrolls the grid and chart areas vertically to display the specified item in the viewports:
    
    item.content = 'Changed content';
    ganttChartView.refreshItem(item);
    ganttChartView.scrollToItem(item);
    
                                        
  • scrollToBottom(): Scrolls the grid and chart areas vertically to the bottom of the presentation content;
  • scrollToDateTime(dateTime): Scrolls the chart area horizontally to display the specified date and time value at the left most visible position in the viewport;
  • increaseTimelinePage(timeAmount), decreaseTimelinePage(timeAmount): Increases or decreases the displayed timeline in the viewport by a specified time interval (in milliseconds) and refreshes the view:
    
    ganttChartView.increaseTimelinePage(7 * 24 * 60 * 60 * 1000); // by 1 week
    
                                        
  • setHourWidth(hourWidth): Sets the hour width value used in the chart area to zoom the timeline in our out;
  • setSplitterPosition(gridWidth, chartWidth): Resizes the grid and chart areas horizontally as specified to update the splitter position in the viewport;
  • getChartPosition(dateTime): Returns the X coordinate of a specific date and time in the chart area;
  • getChartWidth(): Returns the actual width of the chart area;
  • getDateTime(chartPosition): Returns the date and time of a specific X coordinate in the chart area;
  • getWorkingTime(dateTime): Returns the next available working time in the schedule based on the specified date and time;
  • getStartWorkingTime(dateTime): Returns the next available working time that may be used as a start value in the schedule based on the specified date and time;
  • getFinishWorkingTime(dateTime): Returns the previous available working time that may be used as a finish value in the schedule based on the specified date and time;
  • getEffort(start, finish): Returns the actual working effort (in milliseconds) required to complete a task that starts and finishes on the specified date and times;
  • getFinish(start, effort): Returns the actual finish date and time of a task that starts on the specified date and time and completes after the specified working effort (in milliseconds);
  • getStart(effort, finish): Returns the actual start date and time of a task that has completed after the specified working effort (in milliseconds) and finishes on the specified date and time;
  • getCompletion(start, completedFinish, finish): Returns the completion rate (between 0 and 1) of a task that is scheduled between the specified start and finish date and times and has been completed up to the specified completed finish date and time;
  • getCompletedFinish(start, completion, finish): Returns the completed finish date and time of a task that is scheduled between the specified start and finish date and times and has the specified completion rate (between 0 and 1);
  • getItemsHeight(): Returns the actual height of the chart area;
  • getItemTop(item): Returns the top Y coordinate of a specific item in the chart area;
  • onItemPropertyChanged(item, propertyName, isDirect, isFinal): Calls itemPropertyChangeHandler function specified within the settings collection using the specified item, property name, and Boolean indicators for direct user actions and completed actions as arguments;
  • exportContent(exportSettings, output), print(exportSettings): Exports or prints the content to a specified output document, window, or target or using a temporary document and window; supported export setting properties are:
    • title: The title to use for the temporary client window generated to support the print operation;
    • preparingMessage: The temporary message to be displayed in the output window while the asynchronous export operation is in progress;
    • isGridVisible: Determines whether the grid is exported; by default the value from the component instance settings is used;
    • columnIndexes: Determines the columns to be exported, considering the specified array of column indexes in the columns collection; by default all displayed columns are exported or printed;
    • timelineStart, timelineFinish: Start and finish date and times of the exported chart area; by default the values from the component instance settings are used;
    • hourWidth: Indicates the zoom level to be used for the exported chart area, and represents the actual number of device units each hour in the timeline gets available; to zoom in when exporting or printing, increase this value; to zoom out, decrease it; by default the value from the component instance settings is used;
    • startRowIndex, endRowIndex: Determines the rows to be exported, considering the specified indexes in the item collection; by default all rows, including those that are not currently visible in the viewport, are exported or printed;
    • rotate: Determines whether to rotate the exported content in the output document to simulate landscape printing;
    • autoClose: Determines whether to automatically close the temporary export output window generated for printing when the operation is completed:
    
    ganttChartView.print({ 
        title: 'Gantt Chart', 
        isGridVisible: true, columnIndexes: [0], 
        timelineStart: new Date(2012, 8, 1), timelineFinish: new Date(2012, 8, 30) });
    
                                        
  • getRootItems(), getLeafItems(): Return the root and leaf items of the hierarchy;
  • getProjectStart(), getProjectFinish(), getProjectEffort(), getProjectCompletedEffort(), getProjectTotalEffort(), getProjectTotalCompletedEffort(), getProjectCompletion(): Return the minimum item start and maximum item finish date and times, duration and completed duration, total effort and completed effort considering the task assignments, and completion rate (value between 0 and 1) for the entire project loaded and displayed by the component;
  • isItemCritical(item), getCriticalItems(): Determine whether a specific item is critical, and the list of standard items that are part of the critical path;
  • getPertCriticalItems(maxIndentation): Determines the items that are on the PERT-based critical path in the project, optionally considering the maximum indentation specified as parameter;
  • ensureDependencyConstraints(): Ensures that dependency constrains between tasks are enforced;
  • setupBaseline(): Sets up baseline start and baseline finish properties of standard and milestone task items based on their actual start and finish values; used as preparation for rescheduling the remaining work effort of a task item;
  • rescheduleItemToStart(item, start), rescheduleItemToFinish(item, finish): Reschedules an item to start or finish on the specified date and time;
  • splitRemainingWork(item): Creates and inserts a partial copy of the specified task item considering its remaining work effort into the managed hierarchy, and updates the finish date and time of the original task item to its completion point;
  • optimizeWork(dependenciesOnly, includeStartedTasks, start, singlePassTaskLeveling): Optimizes schedule times of all managed items in order to optimize the project finish date without leveling resources (optionally using single pass task leveling), respecting dependency constraints;
  • levelAllocations([items]): Levels the assigned allocation units assuming that all or the specified tasks within the control are fixed duration and effort driven; requires that assignmentsContent property of the task items is of type string, formatted as a list of resource names separated by commas, optionally having associated allocation percents declared between square brackets (e.g.: "John, Mary [50%], Diane [12.5%]");
  • levelResources(includeStartedTasks, start): Levels the assigned resources from all standard tasks within the control in order to avoid over allocation, by updating task timing values accordingly; requires that assignmentsContent property of the task items is of type string, formatted as a list of resource names separated by commas, optionally having associated allocation percents declared between square brackets (e.g.: "John, Mary [50%], Diane [12.5%]"); includeStartedTasks parameter indicates whether or not to consider already started tasks (i.e. having completion > 0), and start parameter specifies the date and time to consider for resource leveling algorithm;
  • getItemSuccessors(item), getItemSuccessorPredecessorItems(item): Determine the list of the successors of a specific task item, as task items, or as predecessor items;
  • getItemAllocationUnits(item): Determines the total amount of allocation units for the assignments of a specific task item;
  • getItemAssignments(item), getItemAssignedResources(item): Determine the list of the assignments of a specific task item, as key-value pairs indicating the assigned resource names and allocation unit values, or as strings indicating the assigned resource names;
  • getResourceAssignments(resourceName), getResourceAssignedItems(resourceName): Determine the list of the assignments of a specific resource, as key-value pairs indicating the assigned task item and allocation unit values, or as objects indicating the assigned task items;
  • getAssignedResources(): Determines the list of all assigned resources within the current project, as strings indicating their names;
  • getItemAssignmentsCost(item), getItemExtraCost(item), getItemCost(item), getResourceCost(resourceName), getProjectCost(): Return the partial and summarized costs of task items, assigned resources, and of the entire project loaded and displayed by the component;
  • setItemCost(item, value): Sets the execution cost of a specified task item so that the summarized cost returned by getItemCost method would reach the specified value;
  • getScheduleChartItems(assignableResources): Returns a list of Schedule Chart items for the current project, optionally considering the minimum set of assignable resources specified as parameter or those specified as settings.assignableResources if the parameter is undefined; the Schedule Chart items may be displayed using a separate ScheduleChartView component instance;
  • getAllocations(resourceName): Determines the list of all allocations of the specified resourcewithin the current project, as dictionary of key and values indicating the time intervals defined by start and finish date and times and allocation unit values;
  • getLoadChartItems(resources): Returns a list of Load Chart items for the current project, optionally considering the set of resources specified as parameter; the Schedule Chart items may be displayed using a separate LoadChartView component instance;
  • getFilteredGanttChartItems(resources): Returns a list of filtered read only Gantt Chart items for the current project, considering the set of resources specified as parameter; the read only Gantt Chart items may be displayed using a separate GanttChartView component instance;
  • getPertChartItems(maxIndentation, startContent, finishContent, linkContent, completedContentSuffix, startingContentSuffix): Returns a list of PERT Chart items for the current project, optionally considering the maximum indentation, and start, finish, and link content and suffixes values specified as parameters; the PERT Chart items may be displayed using a separate PertChartView component instance;
  • getNetworkDiagramItems(maxIndentation, startContent, finishContent): Returns a list of Network Diagram items for the current project, optionally considering the maximum indentation, and start and finish content values specified as parameters; the Network Diagram items may be displayed using a separate NetworkDiagramView component instance;
  • isInitializing, isInitialized: Verify that the component instance is currently initializing asynchronously, or that it has been successfully initialized;
  • copyCommonSettings(targetSettings): Copies the common settings of the current component instance to the specified target settings collection; a secondary component instance may be initialized using the output collection;
  • itemDependsOf(item, otherItem): Determines whether an item depends of another item by checking the hierarchy and predecessor items.

The initialized task item objects provide the following API, as a supplement to the coerced and validated original properties:

  • index: The index of the item in the managed hierarchy;
  • parent: The summary item that includes this task considering indentation values, or null when there is no such parent summary item;
  • hasChildren: Indicates whether the task is a summary item:
    
    if (item.hasChildren)
        alert(item.content + ' is a summary item.');
    
                                        
  • children: When this task is a summary item (i.e. hasChildren is set to true), returns an array of its child items;
  • isVisible: Indicates whether the task is visible within the hierarchy, i.e. it is not a descendent of a collapsed summary item;
  • isVirtuallyVisible: Indicates whether the task is visible in the scrolling viewport of the control when virtualization is enabled:
    
    if (item.isVirtuallyVisible)
        alert(item.content + ' is or has been visible on screen.');
    
                                        

ProjectSerializer

GanttChartView.ProjectSerializer component (available with DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.js and .d.ts files, and requiring Gantt chart's DOM element reference) is used to import/export task items managed by GanttChartView control instances from/to XML format using Microsoft Project® XML schema.

The component supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • assignableResources: Optional array hosting the imported or exported resource names;
  • projectInfoLoadingHandler({ sourceElement }), ganttChartItemLoadingHandler({ sourceElement, ganttChartItem }), assignmentInfoLoadingHandler({ sourceElement, ganttChartItem, resource, allocationUnits }), predecessorItemLoadingHandler({ sourceElement, ganttChartItem, predecessorItem }), assignableResourceInfoLoadingHandler({ sourceElement, resource }): Optional functions that would be called during XML element loading, allowing code injection for customizing items initialized for the component; sourceElement property of the event arguments parameter represents the imported XML element that you can browse using standard DOM functions, and item suffix and other properties allow you to read and update imported data values on the fly;
  • projectInfoSavingHandler({ outputXml }), ganttChartItemSavingHandler({ outputXml, ganttChartItem }), predecessorItemSavingHandler({ outputXml, ganttChartItem, predecessorItem }), resourceInfoSavingHandler({ outputXml, resource }), assignmentInfoSavingHandler({ outputXml, resource, allocationUnits }): Optional functions that would be called during XML output, allowing code injection for customizing the output string generated based on the items managed by the component; outputXml property of the event arguments parameter represents the exported XML string that you may read and update on the fly, and item suffix and other properties allow you to read exported data values as needed;
  • compact: Indicates whether the exported XML content should use a single line; by default it is not set, indicating that multiple lines are allowed; however, setting it to true explicitly removes empty lines from the exported content;
  • spaceSeparated: Indicates whether the exported XML content should have space separators between elements, when compact is explicitly set to false; by default it is not set, indicating that space separators are not required.

The component may be initialized using an initialize method call:


var projectSerializer = DlhSoft.Controls.GanttChartView.ProjectSerializer.initialize(ganttChartView, settings);

                            

The initialized component instance provides the following API:

  • getXml(): Returns an XML string that includes information about the current project and task items displayed by the GanttChartView control using Microsoft Project® XML schema;
  • loadXml(xml): Loads the project and task items from an XML string using Microsoft Project® XML schema, to be displayed by the GanttChartView control;
  • exportXml(output): Exports a Project XML string retrieved internally using getXml method to the output window or document, if provided, or to a new window opened on the fly (returned as method result), otherwise; the XML string is exported as HTML text with line separator tags;
  • importXml(input): Imports a Project XML string loading it internally using loadXml method from the input window or document, or from the input string if provided directly; both XML document and HTML text with line separator tags are accepted as input.

The following static fields are also available for setting up component behavior, prefixed by DlhSoft.Controls.GanttChartView.ProjectXmlSerializer.Service namespace:

  • projectXmlTemplate, scheduleWeekDayXmlTemplate, scheduleDayWorkingTimesXmlTemplate, taskXmlTemplate, predecessorXmlTemplate, resourceXmlTemplate, assignmentXmlTemplate: Template strings used by getXml method to compose the resulting XML.

ScheduleChartView reference

The control container element can be retrieved using a querySelector method call:


<body>
  <div id="scheduleChartView"></div>
</body>

                                

var scheduleChartView = document.querySelector('#scheduleChartView'); 

                                

var scheduleChartViewElement = document.querySelector('#scheduleChartView'); 

                                

Using AngularJS you can access ScheduleChartView component using ds:schedule-chart directive and preparing the appropriate $scope fields (items, settings) and functions (change):

Using Angular you can access ScheduleChartView component using schedulechartview element and preparing the appropriate properties (items, settings) and functions (change):

Using React you can access ScheduleChartView component using ScheduleChartView element and preparing the appropriate properties (items, settings) and functions (change):

Using Vue you can access ScheduleChartView component using schedule-chart element and preparing the appropriate properties (items, settings) and event handler methods (change):


<ds:schedule-chart id="scheduleChartView"
                   items="items" settings="settings"
                   change="itemPropertyChangeHandler" auto-refresh="{{ true }}"
                   style="min-height: 240px">
</ds:schedule-chart>

                            

<schedulechartview [items]="items" [settings]="settings"
                   [change]="itemPropertyChangeHandler"
                   style="min-height: 240px">
</schedulechartview>

                            

return (
    <ScheduleChartView items="{items}" settings="{settings}"
                       change="{itemPropertyChangeHandler}"
                       style={{min-height: 240px}}>
    </ScheduleChartView>
);

                            

<schedule-chart v-bind:items="items" v-bind:settings="settings"
                v-on:change="itemPropertyChangeHandler"
                style="min-height: 240px">
</schedule-chart>

                            

Data items

The resource and assigned task items that may be presented within ScheduleChartView control should provide these properties:

  • content: The object that is displayed to represent the resource item in the grid, usually the resource name;
  • schedule: Object that optionally defines specific working week and day intervals and special nonworking days to consider for scheduling purposes (applying to all assigned tasks of the resource item that do not have specific schedules themselves) using these properties:
    • workingWeekStart, workingWeekFinish: The start and finish days of the working week interval, used when computing task effort values and when dragging and dropping task bars;
    • workingDayStart, workingDayFinish: The start and finish times of the working day interval, in milliseconds passed since midnight, used when computing task effort values and when dragging and dropping task bars;
    • specialNonworkingDays: Optional collection of special nonworking days, such as holidays; alternatively, a Boolean function that receives a date argument and indicates whether it represents a nonworking day or not;
  • isReadOnly: Indicates whether the current item should be read only in the grid;
  • isHidden: Indicates whether the current item should be hidden in the grid, for filtering purposes;
  • class, style: CSS class and/or inline style to apply to the resource row container element in the grid;
  • isSelected: Indicates whether the current item is currently selected in the view;
  • ganttChartItems: Collection of assigned task item objects that are displayed in the Schedule Chart view as task bars; the supported task item properties are presented below:
    • content: The object that is displayed to represent the task item in task bar tool tips, usually the task name, or the task name and the assignment owner resource name;
    • start, finish, completedFinish: Date and time values may be initialized as string values using standard date and time formatting or integral numeric formatting indicating millliseconds passed since January 1, 1970; supplementary, completedFinish values may be initialized as completion float values (between 0 and 1) instead of date and time values;
    • isMilestone: A milestone task is displayed in the Schedule Chart view using a different task bar template;
    • schedule: Object that optionally defines specific working week and day intervals and special nonworking days to consider for scheduling purposes using these properties:
      • workingWeekStart, workingWeekFinish: The start and finish days of the working week interval, used when computing task effort values and when dragging and dropping task bars;
      • workingDayStart, workingDayFinish: The start and finish times of the working day interval, in milliseconds passed since midnight, used when computing task effort values and when dragging and dropping task bars;
      • specialNonworkingDays: Optional collection of special nonworking days, such as holidays; alternatively, a Boolean function that receives a date argument and indicates whether it represents a nonworking day or not;
    • minStart, maxStart, minFinish, maxFinish: Indicate the minimum and maximum start and finish date and times to be considered (whenever possible) for the assigned item;
    • isRelativeToTimezone: Indicates whether start, finish, completedFinish, and {min|max}{Start|Finish} values are configured as local timezone based values (true by default); it gets set to false upon component initialization as date and times are converted to UTC values internally; set it back to true if you reinitialize the properties and refresh the component; to read the timing values externally, you may use getOutputDate method of the component;
    • assignmentsContent: The assignments content to be displayed in the Schedule Chart view next to the associated task bar, but it is not used internally for computing/updating task finish date and time (generating duration) based on any updated assignments;
    • isReadOnly: Indicates whether the current item should be read only in the grid and chart areas;
    • isHidden: Indicates whether the current item should be hidden in the grid and chart areas, for filtering purposes;
    • isBarVisible: Indicates whether the task bar is displayed in the chart area for this item;
    • isBarReadOnly: Indicates whether the task bar of current item should be read only in the chart;
    • displayRowIndex: Indicates the row index to display the task bar at within the chart; by default it is not defined, and the row index is computed at runtime based on its parent resource item in the items collection;
    • barClass, standardBarClass, completedStandardBarClass, milestoneBarClass, baselineBarClass, barStyle, standardBarStyle, completedStandardBarStyle, milestoneBarStyle, baselineBarStyle: CSS classes and/or inline styles to apply to the task bar or specific types of task bars when they are presented in the chart for this item;
    • label, labelColor, labelStyle, labelClass: Configure task bar labels for the chart area, when settings.are{Standard|Summary|Milestone}TaskLabelsVisible values are true;
    • taskTemplate: Optional function that returns the output (SVG node) for the task bar to be presented in the chart for this item, overriding the control settings;
    • template: Optional function that returns the output (SVG node) to presented in the chart for this item (usually a tool tip), overriding the control settings.

var scheduleChartItems = [{ content: 'Resource 1',
                            ganttChartItems: [{ content: 'Task A (Resource 1)',
                                                start: new Date(2012, 8, 4, 8, 0, 0), finish: new Date(2012, 8, 8, 16, 0, 0),
                                                completedFinish: new Date(2012, 8, 5, 16, 0, 0)}] },
                          { content: 'Resource 2',
                            ganttChartItems: [{ content: 'Task A (Resource 2)',
                                                start: new Date(2012, 8, 4, 8, 0, 0), finish: new Date(2012, 8, 8, 16, 0, 0),
                                                completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: '50%' },
                                              { content: 'Task B (Resource 2)',
                                                start: new Date(2012, 8, 11, 8, 0, 0), finish: new Date(2012, 8, 12, 16, 0, 0),
                                                completedFinish: new Date(2012, 8, 12, 16, 0, 0) },
                                              { content: 'Task C (Resource 2)',
                                                start: new Date(2012, 8, 14, 8, 0, 0), finish: new Date(2012, 8, 14, 16, 0, 0)}]
                          },
                          { content: 'Resource 3',
                            ganttChartItems: [{ content: 'Task D (Resource 3)',
                                                start: new Date(2012, 8, 12, 12, 0, 0), finish: new Date(2012, 8, 14, 16, 0, 0)}]}];
for (var i = 4; i <= 32; i++) {
    scheduleChartItems.push({ content: 'Resource ' + i,
                              ganttChartItems: [{ content: 'Task X (Resource ' + i + ')',
                                                  start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 5, 16, 0, 0) },
                                                { content: 'Task Y (Resource ' + i + ')',
                                                  start: new Date(2012, 8, 7, 8, 0, 0), finish: new Date(2012, 8, 8, 16, 0, 0)}]});
}

                            

Alternatively you may obtain Schedule Chart items directly from GanttChartView component instances:


var scheduleChartItems = ganttChartView.getScheduleChartItems();

                            

Settings

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • target: Name of the target to generically apply to the control; Standard, and Phone targets are supported; by default it is Standard:
    
    settings.target = 'Phone';
    
                                        
  • interaction: Name of the interaction mode to generically apply to the control; Standard, and TouchEnabled interaction modes are supported; by default it is Standard:
    
    settings.interaction = 'TouchEnabled';
    
                                        
  • theme: Name of the internal theme to generically apply to the control; Modern, ModernBordered, and Aero themes are supported; by default it is Modern:
    
    settings.theme = 'Aero';
    
                                        
  • classic: When set to true, reverts default settings to the original version of the component (before 2023):
    
    settings.classic = true;
    
                                        
  • border: Color for the border to be presented around the main content container within the control; the border type is set to solid and its width is set to 1px by design (they are fixed values); by default it is gray:
    
    settings.border = 'Blue';
    
                                        
  • containerClass, containerStyle: CSS class and/or inline style to apply to the main content container within the control;
  • isGridVisible: Determines whether the grid is visible in the view; true by default:
    
    settings.isGridVisible = false;
    
                                        
  • gridWidth, chartWidth: Widths of the grid and chart areas within the control; by default they are set to 15% and 85% when isGridVisible is true:
    
    settings.gridWidth  = '30%';
    settings.chartWidth = '70%';
    
                                        
  • isSplitterEnabled: Determines whether a splitter is displayed between the grid and chart when the grid is visible and the end user hovers the left most area of the chart, allowing resizing the internal panels; true by default:
    
    settings.isSplitterEnabled = false;
    
                                        
  • splitterWidth: The width of the splitter within the control:
    
    settings.splitterWidth = 8;
    
                                        
  • splitterBackground: The background used to fill the splitter within the control (when hovering the area between the grid and chart); by default it is a shade of light gray:
    
    settings.splitterBackground = 'Blue';
    
                                        
  • minGridWidth, minChartWidth: The minimum widths of the grid and chart to be used as left and right splitting limits within the control (values should not be below 32 and 32 + splitterWidth, respectively):
    
    settings.minGridWidth  = 100;
    settings.minChartWidth = 100 + 4;
    
                                        
  • allowUserToResizeColumns: Indicates whether the columns may be resized or not by the end user with gripper drag and drop operations; by default it is set to true; when set to true, individual column.allowUserToResize values may be defined as local overrides;
  • minColumnWidth, maxColumnWidth: Numeric values indicating the default limits of width of the columns (in pixels) when updated by the end user with gripper drag and drop operations;
  • isReadOnly, isGridReadOnly, isChartReadOnly, isContentReadOnly, isTaskStartReadOnly, isTaskEffortReadOnly, isTaskCompletionReadOnly, areTaskPredecessorsReadOnly: Indicate whether the entire control or specific control features are read only:
    
    settings.isGridReadOnly = true;
    
                                        
  • areAssignmentsReadOnly: Indicates whether assignments are read only and tasks cannot be dragged among resource rows to change their assignments in the chart;
  • headerBackground: Background color (and optionally other standard background atributes) used to fill the header areas within the control (grid and chart headers); by default it is a shade of light gray;
  • headerHeight: Height of the header areas within the control (grid and chart headers); by default it is set to 42 (i.e. 21 for each of the 2 default headered scale items):
    
    settings.headerHeight = 21 * 3; // Prepare space for 3 scales
    
                                        
  • itemHeight: Height value shared by all item rows within the control (grid rows and chart item areas); by default it is set to 21;
  • columns: Collection of objects indicating the columns to be presented in the grid; each column object supports these properties:
    • header: Text to be displayed as the grid column header;
    • width: Numeric value indicating the width of the column (in pixels);
    • allowUserToResize: Indicates whether the column may be resized or not by the end user with gripper drag and drop operations;
    • minWidth, maxWidth: Numeric values indicating the limits of width of the column (in pixels) when updated by the end user using gripper drag and drop operations;
    • isReadOnly: Indicates whether the column cells should be read only;
    • isSelection: Indicates whether the column cells include user interface for item selection;
    • headerClass, headerStyle: CSS class and/or inline style to apply to the grid header container element of the column;
    • cellClass, cellStyle: CSS class and/or inline style to apply to the grid cell container elements for the column;
    • cellTemplate, exportCellTemplate: Functions that return the output (document nodes) to be presented within the grid cell of this column in the standard view, and optionally different at export time, for a specific item received as parameter;
    
    scheduleChartItems[1].description = 'Custom description';
    var columns = DlhSoft.Controls.ScheduleChartView.getDefaultColumns(scheduleChartItems, settings);
    columns.push({ header: 'Description', width: 200, cellTemplate: function (item) { 
        return item.scheduleChartView.ownerDocument.createTextNode(item.description); } });
    settings.columns = columns;
    
                                        
  • itemClass, itemStyle: CSS class and/or inline style to apply to resource row elements in the grid;
  • alternativeItemClass, alternativeChartItemClass, alternativeItemStyle, alternativeChartItemStyle: CSS classes and/or inline styles to apply to alternative row elements in the grid and chart area;
  • gridLines, horizontalGridLines, verticalGridLines: Colors for lines to be presented between rows and columns of the grid area of the control; by default they are not set;
  • verticalGridHeaderLines: Boolean value indicating whether to always show vertical grid header lines (when not hovering column grip elements);
  • selectedItemClass, selectedItemStyle: CSS class and/or inline style to apply to selected resource row elements in the grid;
  • selectionMode: Indicates the selection behavior; support values are None (not allowed), Focus (single item selected triggered by focus), Single (single item selection using check box), Extended (multiple item selection using check boxes), and ExtendedFocus (multiple item selection using check boxes or triggered by focus); by default it is set to Focus;
  • cellClass, cellStyle: CSS class and/or inline style to apply by default to cell container elements in the grid;
  • displayedTime, currentTime: Date and time to scroll to and highlight (using a vertical bar) within the chart view; by defaut they are obtained from the local computer:
    
    settings.displayedTime = new Date(2012, 8, 1);
    settings.currentTime   = new Date(2012, 8, 2, 12, 0, 0);
    
                                        
  • timelineStart, timelineFinish: Start and finish date and times of the scrollable chart area; by default they are set to include the current time near the start position:
    
    settings.timelineStart = new Date(2012, 7, 1);
    settings.timelineFinish = new Date(2014, 7, 1);
    
                                        
  • isRelativeToTimezone: Indicates whether displayedTime, currentTime, timelineStart, and timelineFinish values are configured as local timezone based values (true by default); it gets set to false upon component initialization as date and times are converted to UTC values internally; set it back to true if you reinitialize the properties and refresh the component; to read the timing values externally, you may use getOutputDate method of the component;
  • scales: Collection of objects indicating the scales to be presented in the chart; each scale object supports these properties:
    • scaleType: Type of the scale; supported values are: Years, Months, Weeks, Days, Hours, NonworkingTime (highlighting weekends), CurrentTime (current time vertical bar), FutureTime (current time vertical bar with future highlighting support), and Custom (the developer needs to also set the intervals collection in this case, using time interval objects defined by start and finish properties);
    • isHeaderVisible: Whether to display a chart header for the scale or not; by default it is false for NonworkingTime and CurrentTime scale types;
    • headerHeight: Height of the scale header in the chart;
    • headerTextFormat: Format to use for scale header texts; supported values are: DateTime, Date, Hour, DayOfWeek, DayOfWeekAbbreviation, Day, Month, MonthAbbreviation, Year, MonthYear, Localized, and Custom (the developer needs to also set the headerText property of each interval object within the intervals collection of the scale object in this case), or a function that converts a Date parameter to a presentation string;
    • headerClass, headerStyle: CSS class and/or inline style to apply to the scale header container elements;
    • isHighlightingVisible: Whether to display vertical rectangles in the main chart area for the generated scale intervals;
    • highlightingClass, highlightingStyle: CSS class and/or inline style to apply to the scale highlighter rectangle elements in the main chart area;
    • isSeparatorVisible: Whether to display vertical separator lines in the main chart area between the generated scale intervals;
    • separatorClass, separatorStyle: CSS class and/or inline style to apply to the scale separator line elements in the main chart area;
    
    settings.scales = [
        { scaleType: 'NonworkingTime', isHeaderVisible: false,
          isHighlightingVisible: true, highlightingStyle: 'stroke-width: 0; fill: #f8f8f8' },
        { scaleType: 'Months', headerTextFormat: 'Month',
          headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7; border-bottom: solid 1px #c8bfe7',
          isSeparatorVisible: true, separatorStyle: 'stroke: #c8bfe7' },
        { scaleType: 'Weeks', headerTextFormat: 'Date',
          headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7; border-bottom: solid 1px #c8bfe7' },
        { scaleType: 'Days', headerTextFormat: 'Day', headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7' },
        { scaleType: 'CurrentTime', isHeaderVisible: false, isSeparatorVisible: true, separatorStyle: 'stroke: #8bbf8a; stroke-width: 0.5px'}];
    
                                        
  • updateScale: Time interval length (in milliseconds) to be used to dynamically round date and time during drag and drop update operations; by default it is set to quarter-hour (15 minutes):
    
    settings.updateScale = 60 * 60 * 1000; // 1 hour
    
                                        
  • hourWidth: Indicates the zoom level to be used for the chart area, and represents the actual number of pixels each hour in the timeline gets available; to zoom in, increase this value; to zoom out, decrease it; by default it is set to 2.5:
    
    settings.hourWidth *= 2; // 200%
    
                                        
  • visibleWeekStart, visibleWeekFinish: The start and finish days of the visible week interval; by default they are set to Sunday (0) and Saturday (6):
    
    settings.visibleWeekStart  = 1; // Monday
    settings.visibleWeekFinish = 5; // Friday
    
                                        
  • workingWeekStart, workingWeekFinish: The start and finish days of the working week interval, used when computing task effort values and when dragging and dropping task bars; by default they are set to Monday (1) and Friday (5); remaining days of the week are considered nonworking time and by default they are highlighted in the chart area:
    
    settings.workingWeekStart  = 1; // Monday
    settings.workingWeekFinish = 4; // Thursday
    
                                        
  • visibleDayStart, visibleDayFinish: The start and finish times of the visible day interval, in milliseconds passed since midnight; by default they are set to 8 AM and 4 PM; the working time interval of the day is also defined using the same values:
    
    settings.visibleDayStart  = 10 * 60 * 60 * 1000; // 10 AM
    settings.visibleDayFinish = 20 * 60 * 60 * 1000; // 8 PM
    
                                        
  • specialNonworkingDays: Optional collection of special nonworking days, such as holidays; alternatively, a Boolean function that receives a date argument and indicates whether it represents a nonworking day or not:
    
    settings.specialNonworkingDays = [new Date(2012, 8, 24), new Date(2012, 8, 25)];
    
                                        
    
    settings.specialNonworkingDays = function(date) { return date.getDate() == 24 || date.getDate() == 25; } // days 24 and 25 of all months
    
                                        
  • schedule: Allows initializing working week and day intervals and special nonworking days to consider for scheduling purposes using an alternative definition object:
    
    settings.schedule = {
        workingWeekStart: 0, workingWeekFinish: 3, // Sunday - Wednesday
        workingDayStart: 9 * 60 * 60 * 1000, workingDayFinish: 19 * 60 * 60 * 1000, // 9 AM - 7 PM, exceeding visible 4 PM
        specialNonworkingDays: [new Date(2012, 8, 18), new Date(2012, 8, 21), new Date(2012, 8, 22)] // Partial replacement for excluded dates
    };
    
                                        
  • barMargin: The top and bottom margins around the task bars in the chart:
    
    settings.barMargin = 3;
    
                                        
  • barHeight: The actual height to apply to the task bars in the chart; by default it is set to the remaining space from itemHeight when subtracting top and bottom barMargin values:
    
    settings.barHeight = 16;
    
                                        
  • barCornerRadius: The corner radius to use to round corners of the task bars in the chart:
    
    settings.barCornerRadius = 4;
    
                                        
  • completedBarMargin: The top and bottom margins around completion bars of the task bars in the chart;
  • completedBarHeight: The actual height to apply to completion bars of the task bars in the chart; by default it is set to the remaining space from barHeight when subtracting top and bottom completedBarMargin values;
  • completedBarCornerRadius: The corner radius to use to round corners of completion bars of the task bars in the chart; by default it is set to zero (0);
  • styleDefinitionTemplate: Function that returns SVG definitions (node) to be used in standard, and milestone style and template definitions (see below); by default, they include these items: BlueGradient, BlackGradient:
    
    settings.styleDefinitionTemplate = function (scheduleChartView) {
        var document = scheduleChartView.ownerDocument;
        var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        return defs;
    }
    
                                        
  • standardBarClass, milestoneBarClass, standardBarStyle, milestoneBarStyle: CSS classes and/or inline styles to apply to the standard, and milestone task bars in the chart:
    
    settings.standardBarStyle = 'stroke: Green; fill: LightGreen';
    settings.milestoneBarStyle = 'stroke: DarkRed; fill: Red';
    
                                        
  • standardCompletedBarClass, standardCompletedBarStyle: CSS class and/or inline style to apply to completion bars of the task bars in the chart:
    
    settings.standardCompletedBarStyle = 'stroke: DarkGreen; fill: Green';
    
                                        
  • assignmentsClass, assignmentsStyle: CSS class and/or inline style to apply to the assignments presenter element in the chart:
    
    settings.assignmentsStyle = 'fill: Green';
    
                                        
  • assignmentThumbClass, assignmentThumbStyle: CSS class and/or inline style to apply to assignment thumbs of the task bars in the chart; by default assignment thumb is presented as a dotted line at the bottom of a task bar when it is hovered using the mouse:
    
    settings.assignmentThumbStyle = 'fill: none; stroke: Green; stroke-dasharray: 2 2';
    
                                        
  • temporaryAssignmentThumbClass, temporaryAssignmentThumbStyle: CSS class and/or inline style to apply to the temporary thumb displayed at the position of the mouse cursor in the chart during drag operations occuring while preparing for moving task assignments to different resource rows:
    
    settings.temporaryAssignmentThumbStyle = 'fill: none; stroke: Green; stroke-dasharray: 2 2';
    
                                        
  • standardTaskTemplate, milestoneTaskTemplate: Functions that return the outputs (SVG nodes) for standard, and milestone task bars to be presented in the chart for a specific item received as parameter:
    
    settings.standardTaskTemplate = function (item) {
        var ganttChartView = item.ganttChartView;
        var document = ganttChartView.ownerDocument;
        var svgns = 'http://www.w3.org/2000/svg';
        var containerGroup = document.createElementNS(svgns, 'g'); 
        var rect = document.createElementNS(svgns, 'rect');
        var itemLeft = ganttChartView.getChartPosition(item.start, settings);
        var itemRight = ganttChartView.getChartPosition(item.finish, settings);
        rect.setAttribute('x', itemLeft - 1);
        rect.setAttribute('y', settings.barMargin - 1);
        rect.setAttribute('width', itemRight - itemLeft + 1);
        rect.setAttribute('height', settings.barHeight + 2);
        rect.setAttribute('rx', 4);
        rect.setAttribute('style', 'stroke: DarkGreen; fill: Green');
        containerGroup.appendChild(rect);
        var thumb = document.createElementNS(svgns, 'rect');
        thumb.setAttribute('x', itemLeft); thumb.setAttribute('width', Math.max(0, itemRight - itemLeft - 1));
        thumb.setAttribute('y', ganttChartView.settings.barMargin); thumb.setAttribute('height', ganttChartView.settings.barHeight);
        thumb.setAttribute('style', 'fill: Transparent; cursor: move');
        DlhSoft.Controls.GanttChartView.initializeTaskDraggingThumbs(thumb, null, null, null, item, itemLeft, itemRight, null);
        containerGroup.appendChild(thumb);
        return containerGroup;
    };
    
                                            
    
    var originalStandardTaskTemplate = DlhSoft.Controls.ScheduleChartView.getDefaultStandardTaskTemplate(scheduleChartItems, scheduleChartView, settings);
    settings.standardTaskTemplate = function (item) {
        var scheduleChartView = item.scheduleChartView;
        var document = scheduleChartView.ownerDocument;
        var svgGroup = originalStandardTaskTemplate(item);
        if (item.content.indexOf('Task A ') == 0) {
            var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            var itemLeft = scheduleChartView.getChartPosition(item.start, settings);
            var itemRight = scheduleChartView.getChartPosition(item.finish, settings);
            rect.setAttribute('x', itemLeft - 1);
            rect.setAttribute('y', settings.barMargin - 1);
            rect.setAttribute('width', Math.max(0, itemRight - itemLeft + 1));
            rect.setAttribute('height', settings.barHeight + 2);
            rect.setAttribute('style', 'stroke: Red; fill: Transparent');
            svgGroup.insertBefore(rect, svgGroup.childNodes[0]);
        }
        return svgGroup;
    };
    
                                            
  • extraTaskTemplate: Optional function that returns supplemental output (SVG node) to display on top of task bars to be presented in the chart for a specific item received as parameter:
    
    settings.extraTaskTemplate = function (item) {
        var scheduleChartView = item.scheduleChartView;
        var document = scheduleChartView.ownerDocument;
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        var itemLeft = scheduleChartView.getChartPosition(item.start, settings);
        rect.setAttribute('x', itemLeft - 20 + (!item.isMilestone ? 5 : 0));
        rect.setAttribute('y', settings.barMargin);
        rect.setAttribute('width', 12);
        rect.setAttribute('height', settings.barHeight);
        if (!item.hasChildren && !item.isMilestone)
            rect.setAttribute('style', 'stroke: Blue; fill: LightBlue');
        else
            rect.setAttribute('style', 'stroke: none; fill: none');
        return rect;
    };
    
                                        
  • temporaryAssignmentThumbTemplate: Optional function that returns the output (SVG node) to display as temporary assignment shape in order to indicate an in progress assignment drag operation (vertical) in the chart, receiving document, x, y, width, and height values received as parameters;
  • isTaskToolTipVisible: Determines whether task bar tool tips are presented;
  • itemTemplate: Function that returns the output (SVG node) to presented in the chart for a specific item received as parameter (usually a tool tip):
    
    settings.itemTemplate = function (item) {
        var document = item.scheduleChartView.ownerDocument;
        var toolTip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        var toolTipContent = item.content + ' • ' + 'Start: ' + item.start.toLocaleString();
        if (!item.isMilestone)
            toolTipContent += ' • ' + 'Finish: ' + item.finish.toLocaleString();
        toolTip.appendChild(document.createTextNode(toolTipContent));
        return toolTip;
    };
    
                                        
  • areTaskAssignmentsVisible: Determines whether task assignments are presented in the chart;
  • assignmentsTemplate: Function that returns the output (SVG node) for assignments content to be presented in the chart for a specific item received as parameter;
  • assignmentThumbTemplate: Function that returns specific output (SVG node) to be presented for the end user to be able to drag task bars among resource rows to change assignments in the chart for a specific item received as parameter;
  • isTaskCompletedEffortVisible: Determines whether task completion bars are presented in the chart;
  • areTaskDependenciesVisible: Determines whether dependency lines are presented in the chart;
  • allowCreatingStartDependencies, allowCreatingToFinishDependencies: Determine whether to allow creating start- and -to-finish dependencies between tasks using drag and drop operations;
  • isDraggingTaskStartEndsEnabled: Indicates whehter left ends of task bars may be dragged to update task start date and times preserving finish values;
  • isGridRowClickTimeScrollingEnabled: Indicates whehter clicking a grid row should automatically scroll the chart area horizontally to display the associated task item start date and time;
  • isMouseWheelZoomEnabled: Indicates whehter to zoom in and out the timeline automatically when the end user rolls the mouse wheel hovering the chart area;
  • isMouseWheelZoomEnabledMinHourWidth, isMouseWheelZoomEnabledMaxHourWidth: Indicates the limits of the hourWidth value to be considered when mouse wheel zooming is enabled;
  • areTaskDependencyConstraintsEnabled: Determines whether dependency constraints are enabled in the chart, providing auto-scheduling features for dependent tasks; by default is it set to false for optimization purposes;
  • areTaskDependencyConstraintsEnabledWhileDragging: Determines whether dependency constraints are automatically ensured even while dragging task bars in the control (or only when the operation completes), when areTaskDependencyConstraintsEnabled property is set to true; by default it is set to false;
  • areTaskDependencyConstraintsDisabledWhenDropping: Determines whether dependency constraints are disabled when the predecessor item is created using drag and drop operations in the chart, when areTaskDependencyConstraintsEnabled is set to false; by default it is set to false;
  • areDependencyConstraintsAppliedOnStartedTasks, areDependencyConstraintsAppliedOnMilestones: When set to false, limit dependency constraints as specified (scheduled times of started tasks and/or of milestones are preserved);
  • areStandardTaskLabelsVisible, areMilestoneTaskLabelsVisible, standardLabelColor, standardLabelStyle, standardLabelClass, milestoneLabelColor, milestoneLabelStyle, milestoneLabelClass: Configure visibility and appearance of bar labels for different task types in the chart area, applicable when item.label values are set;
  • isVirtualizing: Indicates whether the control will create task bars only when they need to be presented (such as only when scrolling the view to their positions); by default it is set to true for optimization purposes:
    
    settings.isVirtualizing = false;
    
                                        
  • useInlineToolTips: Indicates whether to use tool tip controls generated inside the SVG content rather than title elements; true by default;
  • useUpdatingToolTips: Indicates whether or not to use ToolTip controls for updating task start, finish, completion, and assignments in the chart using drag and drop operation, assuming that DlhSoft.Data.HTML.Controls library that provides the required components is loaded; by default it is set to true;
  • months, daysOfWeek: Names of the months and of the days of the week to use at presentation time:
    
    settings.months     = [ 'M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12' ];
    settings.daysOfWeek = [ 'D0', 'D1', 'D2', 'D3', 'D4', 'D5', 'D6' ];
    
                                        
  • weekStartDay: Day of the week to consider as week start; by default it is set to Sunday (0); to set it to Monday use one (1):
    
    settings.weekStartDay = 1; // Monday
    
                                        
  • dateFormatter(date): text, dateTimeFormatter(dateTime): text: Functions that accept date parameters and return text values, used to convert date or date and time values to text values whenever needed within the control; the functions may be provided by the developer for further customization and/or localization purposes; by default they are initialized to a set of internally defined functions that consider a culture invariant date and time formatting: MM/dd/yyyy HH:mm:
    
    settings.dateFormatter     = function (date)     { return date.toDateString(); };
    settings.dateTimeFormatter = function (dateTime) { return dateTime.toString(); };
    
                                        
  • displayedTimeChangeHandler(displayedTime), hourWidthChangeHandler(hourWidth): Functions called whenever the end user scrolls the chart area horizontally or performs mouse wheel zooming on the chart area, changing the left most displayed time (settings.displayedTime) or the zoom level (settings.hourWidth);
  • splitterPositionChangeHandler(gridWidth, chartWidth): Function called whenever the end user resizes the grid and chart areas horizontally, changing the splitter position (settings.gridWidth and settings.chartWidth);
  • columnWidthChangeHandler(column, width): Function called whenever the end user resizes a grid column, changing its width (column.width);
  • itemPropertyChangeHandler(item, propertyName, isDirect, isFinal): Function called whenever item properties change within the control, providing the changed item, relevant property name, and Boolean values indicating whether this change was directly triggered by the user, and whether this is the final change in a periodic operation such as a drag and drop action, specified as parameters; a custom function may be provided by the developer in order to receive notifications whenever data changes occur within the control, when using the default grid columns and task template functions:
    
    settings.itemPropertyChangeHandler = function (item, propertyName, isDirect, isFinal) {
        if (isDirect && isFinal)
            alert(item.content + '.' + propertyName + ' changed.');
    }
    
                                        
  • itemSelectionChangeHandler(item, isSelected, isDirect): Function called whenever item selection changes within the control, providing the selected or unselected item, a Boolean value indicating the updated selection state, and a Boolean value indicating whether this change was directly triggered by the user, specified as parameters;
  • itemMoveHandler(item, fromIndex, toIndex): Function called whenever an item is moved in the managed list of the control, providing the item, source and target positions of the item, specified as parameters;
  • mouseHandler(eventName, isOnItemsArea, isOnChart, row, column, button, clickCount, e), mouseMoveHandler(isOnItemsArea, isOnChart, row, column), mouseDownHandler(isOnItemsArea, isOnChart, row, column, button), clickHandler(isOnItemsArea, isOnChart, row, column), doubleClickHandler(isOnItemsArea, isOnChart, row, column), itemClickHandler(isOnChart, item, column), itemDoubleClickHandler(isOnChart, item, column), chartClickHandler(isOnItemsArea, row, dateTime), chartDoubleClickHandler(isOnItemsArea, row, dateTime), chartItemClickHandler(item, dateTime), chartItemDoubleClickHandler(item, dateTime): Event handlers for generic or granular mouse events, such as for grid and chart, header and items areas, or click and double click event types;
  • itemContextMenuHandler(e, item): Event handler for chart item context menu.

Operations

The following static APIs are available at settings initialization time, prefixed by DlhSoft.Controls.ScheduleChartView namespace:

  • getDefaultColumns(items, settings): Returns an array of default definitions that you can further customize and use as value for the columns property of the control settings used at initialization time;
  • getDefaultScales(settings): Returns an array of default definitions that you can further customize and use as value for the scales property of the control settings used at initialization time;
  • getDefaultStyleDefinitionTemplate(controlElement, settings): Returns a function that provides common SVG definitions that may be used in template methods for task and dependency line styles specified in the control settings used at initialization time;
  • getDefaultStandardTaskTemplate(items, controlElement, settings), getDefaultMilestoneTaskTemplate(items, controlElement, settings): Return functions that provide the original templates for standard, and milestone task bars in the chart area, based on the item received as parameter; developers can access them to retreive SVG content to be further adorned in the standardTaskTemplate, summaryTaskTemplate, and milestoneTaskTemplate functions specified in the control settings used at initialization time;
  • getDefaultItemTemplate(settings): Returns a function that provides the original template for task items, usually presented as tool tips when hovering task bars in the chart area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the itemTemplate function specified in the control settings used at initialization time;
  • getDefaultAssignmentsTemplate(settings): Returns a function that provides the original template for the assignments content positioned to the right of task bars in the chart area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the assignmentsTemplate function specified in the control settings used at initialization time;
  • initializeTaskDraggingThumbs(startThumb, startOnlyThumb, finishThumb, completedFinishThumb, item, itemLeft, itemRight, itemCompletedRight): Inside task template functions, sets up task drag and drop behavior for the non-null SVG elements specified to be designed as thumbs, considering the specified item and item positioning in the chart;
  • initializeAssignmentDraggingThumb(thumb, containerGroup, item, itemLeft, itemRight): Inside task template functions, sets up assignment update drag and drop behavior for the non-null SVG element specified to be designed as a thumb inside its specified container group that would be used to supplementary present temporary assignment target rectangles during drag and drop operations, considering the specified item and item positioning in the chart;
  • getWorkingTime(dateTime, settings), getEffort(start, finish, settings), getFinish(start, effort, settings), getStart(effort, finish, settings), getCompletion(start, completedFinish, finish, settings), getCompletedFinish(start, completion, finish, settings): Functions that return the next working time based on a specified date and time value, the effort betweeen the specified start and finish values, the finish date and time considering the specified start and effort values, the start date and time considering the specified effort and start values, and the completion rate (between 0 and 1) or completed finish date and time considering the specified start, completed finish date and time or completion rate and finish values;
  • textColumnTemplateBase(document, valueGetter, isVisibleGetter), textInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter): Specific user interface generator functions useful when defining new grid columns or when customizing column cell templates; supported parameters are:
    • document: The document to generate the required elements within; usually the document of the current window;
    • valueGetter(): Function that gets the data value and prepares for the output element;
    • valueSetter(value): Function that provides the updated content value of the output element as parameter, required to prepare and set the associated data object value;
    • width: The width of the output element;
    • isEnabledGetter(): Optional function that returns a value that indicates whether the output element should be visible or not;
    • isVisibleGetter(): Optional function that returns a value that indicates whether the output element should be enabled or not;
    • isBoldGetter(): Optional function that returns a value that indicates whether the text in the output element should be bold or not.
  • getInputDate(date), getOutputDate(date): Prepares the specified date values to be used for component method input or method result or field output, considering that after initialization the component uses UTC date and time values internally; these methods may also be called using a component instance object.

Component instance

The component may be initialized using an initialize method call:


DlhSoft.Controls.ScheduleChartView.initialize(scheduleChartView, items, settings);

                            

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

                            

The initialized control element provides the following API:

  • items, scheduleChartItems: Provides access to the Gantt Chart items and Schedule Chart items displayed by the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(): Updates the user interface considering all external item and settings changes;
  • refreshGridItems(), refreshChartItems(), refreshItems(), refreshGridItem(item), refreshChartItem(item), refreshItem(item), refreshScheduleChartItem(item): Update the Gantt Chart or Schedule Chart item(s) within the grid, chart or both areas, considering all external changes on the specified item:
    
    item.barStyle = 'stroke: Red; fill: Yellow';
    scheduleChartView.refreshChartItem(item);
    
                                        
  • refreshCurrentTime(), setCurrentTime(dateTime), updateCurrentTime(): Update the user interface considering the specified current time chanage;
  • insertScheduleChartItem(index, item), addScheduleChartItem(item), insertScheduleChartItems(index, items), addScheduleChartItems(items): Insert Schedule Chart item(s) to the managed item list at the specified index or at the bottom of the collection and refreshes the view:
    
    var item = { content: 'New resource', ganttChartItems: [] };
    scheduleChartView.insertScheduleChartItem(item);
    
                                        
  • removeScheduleChartItem(item), removeScheduleChartItems(items): Removes Schedule Chart item(s) from the managed item list and refreshes the view;
  • moveScheduleChartRange(fromIndex, count, toIndex): Moves a range of items to a specified index in the managed item list and refreshes the view;
  • moveScheduleChartItem(item, toIndex): Moves a Schedule Chart item to a specified index in the managed item list and refreshes the view;
  • moveScheduleChartItemUp(item), moveScheduleChartItemDown(item): Moves an item up or down in the managed item list and refreshes the view;
  • setItemContent(item, value): Set resource content value;
  • getCurrentItem(): Returns the current item in the collection;
  • getSelectedItem(), getSelectedItems(): Returns the selected item(s) in the collection;
  • selectItem(item), unselectItem(item): Update the selection state of an item in the collection:
    
    selectItem(item);
    
                                        
  • scrollToItem(item): Scrolls the grid and chart areas vertically to display the specified item in the viewports:
    
    item.content = 'Changed content';
    scheduleChartView.refreshGridItem(item);
    scheduleChartView.scrollToItem(item);
    
                                        
  • scrollToBottom(): Scrolls the grid and chart areas vertically to the bottom of the presentation content;
  • scrollToDateTime(dateTime): Scrolls the chart area horizontally to display the specified date and time value at the left most visible position in the viewport;
  • increaseTimelinePage(timeAmount), decreaseTimelinePage(timeAmount): Increases or decreases the displayed timeline in the viewport by a specified time interval (in milliseconds) and refreshes the view:
    
    scheduleChartView.increaseTimelinePage(7 * 24 * 60 * 60 * 1000); // by 1 week
    
                                        
  • setHourWidth(hourWidth): Sets the hour width value used in the chart area to zoom the timeline in our out;
  • setSplitterPosition(gridWidth, chartWidth): Resizes the grid and chart areas horizontally as specified to update the splitter position in the viewport;
  • getChartPosition(dateTime): Returns the X coordinate of a specific date and time in the chart area;
  • getChartWidth(): Returns the actual width of the chart area;
  • getDateTime(chartPosition): Returns the date and time of a specific X coordinate in the chart area;
  • getWorkingTime(dateTime): Returns the next available working time in the schedule based on the specified date and time;
  • getStartWorkingTime(dateTime): Returns the next available working time that may be used as a start value in the schedule based on the specified date and time;
  • getFinishWorkingTime(dateTime): Returns the previous available working time that may be used as a finish value in the schedule based on the specified date and time;
  • getEffort(start, finish): Returns the actual working effort (in milliseconds) required to complete a task that starts and finishes on the specified date and times;
  • getFinish(start, effort): Returns the actual finish date and time of a task that starts on the specified date and time and completes after the specified working effort (in milliseconds);
  • getStart(effort, finish): Returns the actual start date and time of a task that has completed after the specified working effort (in milliseconds) and finishes on the specified date and time;
  • getCompletion(start, completedFinish, finish): Returns the completion rate (between 0 and 1) of a task that is scheduled between the specified start and finish date and times and has been completed up to the specified completed finish date and time;
  • getCompletedFinish(start, completion, finish): Returns the completed finish date and time of a task that is scheduled between the specified start and finish date and times and has the specified completion rate (between 0 and 1);
  • getItemsHeight(): Returns the actual height of the chart area;
  • getItemTop(item): Returns the top Y coordinate of a specific item in the chart area;
  • onItemPropertyChanged(item, propertyName, isDirect, isFinal): Calls itemPropertyChangeHandler function specified within the settings collection using the specified item, property name, and Boolean indicators for direct user actions and completed actions as arguments;
  • exportContent(exportSettings, output), print(exportSettings): Exports or prints the content to a specified output document, window or target or using a temporary document and window; supported export setting properties are:
    • title: The title of the output or temporary window to set up;
    • preparingMessage: The temporary message to be displayed in the output window while the asynchronous export operation is in progress;
    • isGridVisible: Determines whether the grid is exported; by default the value from the component instance settings is used;
    • columnIndexes: Determines the columns to be exported, considering the specified array of column indexes in the columns collection; by default all displayed columns are exported or printed;
    • timelineStart, timelineFinish: Start and finish date and times of the exported chart area; by default the values from the component instance settings are used;
    • hourWidth: Indicates the zoom level to be used for the exported chart area, and represents the actual number of device units each hour in the timeline gets available; to zoom in when exporting or printing, increase this value; to zoom out, decrease it; by default the value from the component instance settings is used;
    • startRowIndex, endRowIndex: Determines the rows to be exported, considering the specified indexes in the item collection; by default all displayed rows, including those that are not currently visible in the viewport, are exported or printed;
    • rotate: Determines whether to rotate the exported content in the output document to simulate landscape printing;
    • autoClose: Determines whether to automatically close the temporary export output window generated for printing when the operation is completed:
    
    scheduleChartView.print({ 
        title: 'Schedule Chart', 
        isGridVisible: true, columnIndexes: [0], 
        timelineStart: new Date(2012, 8, 1), timelineFinish: new Date(2012, 8, 30) });
    
                                        
  • getProjectStart(), getProjectFinish(): Return the minimum item start and maximum item finish date and times for the entire project loaded and displayed by the component;
  • isScheduleChartInitializing, isScheduleChartInitialized: Verify that the component instance is currently initializing asynchronously, or that it has been successfully initialized;
  • copyCommonSettings(targetSettings): Copies the common settings of the current component instance to the specified target settings collection; a secondary component instance may be initialized using the output collection.

The initialized item objects provide the following API, as a supplement to the coerced and validated original properties:

  • index: The index of the item in the internal item collection;
  • scheduleChartIndex: The index of a resource item in the Schedule Chart item collection;
  • isVirtuallyVisible: Indicates whether the resource or task is visible in the scrolling viewport of the control when virtualization is enabled:
    
    if (item.isVirtuallyVisible)
        alert(item.content + ' is or has been visible on screen.');
    
                                        

LoadChartView reference

The control container element can be retrieved using a querySelector method call:


<body>
  <div id="loadChartView"></div>
</body>

                                

var loadChartView = document.querySelector('#loadChartView'); 

                                

var loadChartViewElement = document.querySelector('#loadChartView'); 

                                

Using AngularJS you can access LoadChartView component using ds:load-chart directive and preparing the appropriate $scope fields (items, settings) and functions (change):

Using Angular you can access LoadChartView component using loadchartview element and preparing the appropriate properties (items, settings) and functions (change):

Using React you can access LoadChartView component using LoadChartView element and preparing the appropriate properties (items, settings) and functions (change):

Using Vue you can access LoadChartView component using load-chart element and preparing the appropriate properties (items, settings) and event handler methods (change):


<ds:load-chart id="loadChartView"
               items="items" settings="settings"
               change="itemPropertyChangeHandler" auto-refresh="{{ true }}"
               style="min-height: 240px">
</ds:load-chart>

                            

<loadchartview [items]="items" [settings]="settings"
               [change]="itemPropertyChangeHandler"
               style="min-height: 240px">
</loadchartview>

                            

return (
    <LoadChartView items="{items}" settings="{settings}"
                   change="{itemPropertyChangeHandler}"
                   style={{min-height: 240px}}>
    </LoadChartView>
);

                            

<load-chart v-bind:items="items" v-bind:settings="settings"
            v-on:change="itemPropertyChangeHandler"
            style="min-height: 240px">
</load-chart>

                            

Data items

The resource and allocation items that may be presented within LoadChartView control should provide these properties:

  • content: The object that is displayed to represent the resource item in the grid, usually the resource name;
  • isReadOnly: Indicates whether the current item should be read only in the grid area;
  • class, style: CSS class and/or inline style to apply to the resource row container element in the grid;
  • isSelected: Indicates whether the current item is currently selected in the view;
  • ganttChartItems: Collection of allocation item objects that are displayed in the Load Chart view as allocation bars; the supported allocation item properties are presented below:
    • content: The object that is displayed to represent the allocation item in allocation bar tool tips, usually the allocation units and/or the assignment owner resource name;
    • start, finish;
    • isRelativeToTimezone: Indicates whether start, and finish values are configured as local timezone based values (true by default); it gets set to false upon component initialization as date and times are converted to UTC values internally; set it back to true if you reinitialize the properties and refresh the component; to read the timing values externally, you may use getOutputDate method of the component;
    • units: Indicates the capacity used from the assigned resource item during the time interval represented by the current allocation item;
    • isBarVisible: Indicates whether the allocation bar is displayed in the chart area for this item;
    • displayRowIndex: Indicates the row index to display the allocation bar at within the chart; by default it is not defined, and the row index is computed at runtime based on its parent resource item in the items collection;
    • barClass, barStyle: CSS classes and/or inline styles to apply to the allocation bar when it is presented in the chart for this item;
    • taskTemplate: Optional function that returns the output (SVG node) for the allocation bar to be presented in the chart for this item, overriding the control settings;
    • template: Optional function that returns the output (SVG node) to presented in the chart for this item (usually a tool tip), overriding the control settings.

Usually you will obtain assigned resources and allocation items directly from GanttChartView component instances:


var loadChartItems = ganttChartView.getLoadChartItems();

                            

Settings

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • target: Name of the target to generically apply to the control; Standard, and Phone targets are supported; by default it is Standard:
    
    settings.target = 'Phone';
    
                                        
  • theme: Name of the internal theme to generically apply to the control; Modern, ModernBordered, and Aero themes are supported; by default it is Modern:
    
    settings.theme = 'Aero';
    
                                        
  • classic: When set to true, reverts default settings to the original version of the component (before 2023):
    
    settings.classic = true;
    
                                        
  • border: Color for the border to be presented around the main content container within the control; the border type is set to solid and its width is set to 1px by design (they are fixed values); by default it is gray:
    
    settings.border = 'Blue';
    
                                        
  • containerClass, containerStyle: CSS class and/or inline style to apply to the main content container within the control;
  • isGridVisible: Determines whether the grid is visible in the view; true by default:
    
    settings.isGridVisible = false;
    
                                        
  • gridWidth, chartWidth: Widths of the grid and chart areas within the control; by default they are set to 15% and 85% when isGridVisible is true:
    
    settings.gridWidth  = '30%';
    settings.chartWidth = '70%';
    
                                        
  • isSplitterEnabled: Determines whether a splitter is displayed between the grid and chart when the grid is visible and the end user hovers the left most area of the chart, allowing resizing the internal panels; true by default:
    
    settings.isSplitterEnabled = false;
    
                                        
  • splitterWidth: The width of the splitter within the control:
    
    settings.splitterWidth = 8;
    
                                        
  • splitterBackground: The background used to fill the splitter within the control (when hovering the area between the grid and chart); by default it is a shade of light gray:
    
    settings.splitterBackground = 'Blue';
    
                                        
  • minGridWidth, minChartWidth: The minimum widths of the grid and chart to be used as left and right splitting limits within the control (values should not be below 32 and 32 + splitterWidth, respectively):
    
    settings.minGridWidth  = 100;
    settings.minChartWidth = 100 + 4;
    
                                        
  • allowUserToResizeColumns: Indicates whether the columns may be resized or not by the end user with gripper drag and drop operations; by default it is set to true; when set to true, individual column.allowUserToResize values may be defined as local overrides;
  • minColumnWidth, maxColumnWidth: Numeric values indicating the default limits of width of the columns (in pixels) when updated by the end user with gripper drag and drop operations;
  • isReadOnly: Indicates whether the control is read only or not (by default it is read only):
    
    settings.isReadOnly = false;
    
                                        
  • headerBackground: Background color (and optionally other standard background atributes) used to fill the header areas within the control (grid and chart headers); by default it is a shade of light gray;
  • headerHeight: Height of the header areas within the control (grid and chart headers); by default it is set to 42 (i.e. 21 for each of the 2 default headered scale items):
    
    settings.headerHeight = 21 * 3; // Prepare space for 3 scales
    
                                        
  • itemHeight: Height value shared by all item rows within the control (grid rows and chart item areas); by default it is set to 21;
  • columns: Collection of objects indicating the columns to be presented in the grid; each column object supports these properties:
    • header: Text to be displayed as the grid column header;
    • width: Numeric value indicating the width of the column (in pixels);
    • allowUserToResize: Indicates whether the column may be resized or not by the end user with gripper drag and drop operations;
    • minWidth, maxWidth: Numeric values indicating the limits of width of the column (in pixels) when updated by the end user using gripper drag and drop operations;
    • isReadOnly: Indicates whether the column cells should be read only;
    • isSelection: Indicates whether the column cells include user interface for item selection;
    • headerClass, headerStyle: CSS class and/or inline style to apply to the grid header container element of the column;
    • cellClass, cellStyle: CSS class and/or inline style to apply to the grid cell container elements for the column;
    • cellTemplate, exportCellTemplate: Functions that return the output (document nodes) to be presented within the grid cell of this column in the standard view, and optionally different at export time, for a specific item received as parameter;
    
    loadChartItems[1].description = 'Custom description';
    var columns = DlhSoft.Controls.LoadChartView.getDefaultColumns(loadChartItems, settings);
    columns.push({ header: 'Description', width: 200, cellTemplate: function (item) { 
        return item.loadChartView.ownerDocument.createTextNode(item.description); } });
    settings.columns = columns;
    
                                        
  • itemClass, itemStyle: CSS class and/or inline style to apply to resource row elements in the grid;
  • alternativeItemClass, alternativeChartItemClass, alternativeItemStyle, alternativeChartItemStyle: CSS classes and/or inline styles to apply to alternative row elements in the grid and chart area;
  • gridLines, horizontalGridLines, verticalGridLines: Colors for lines to be presented between rows and columns of the grid area of the control; by default they are not set;
  • verticalGridHeaderLines: Boolean value indicating whether to always show vertical grid header lines (when not hovering column grip elements);
  • selectedItemClass, selectedItemStyle: CSS class and/or inline style to apply to selected resource row elements in the grid;
  • selectionMode: Indicates the selection behavior; support values are None (not allowed), Focus (single item selected triggered by focus), Single (single item selection using check box), Extended (multiple item selection using check boxes), and ExtendedFocus (multiple item selection using check boxes or triggered by focus); by default it is set to Focus;
  • cellClass, cellStyle: CSS class and/or inline style to apply by default to cell container elements in the grid;
  • displayedTime, currentTime: Date and time to scroll to and highlight (using a vertical bar) within the chart view; by defaut they are obtained from the local computer:
    
    settings.displayedTime = new Date(2012, 8, 1);
    settings.currentTime   = new Date(2012, 8, 2, 12, 0, 0);
    
                                        
  • timelineStart, timelineFinish: Start and finish date and times of the scrollable chart area; by default they are set to include the current time near the start position:
    
    settings.timelineStart  = new Date(2012, 7, 1);
    settings.timelineFinish = new Date(2014, 7, 1);
    
                                        
  • isRelativeToTimezone: Indicates whether displayedTime, currentTime, timelineStart, and timelineFinish values are configured as local timezone based values (true by default); it gets set to false upon component initialization as date and times are converted to UTC values internally; set it back to true if you reinitialize the properties and refresh the component; to read the timing values externally, you may use getOutputDate method of the component;
  • scales: Collection of objects indicating the scales to be presented in the chart; each scale object supports these properties:
    • scaleType: Type of the scale; supported values are: Years, Months, Weeks, Days, Hours, NonworkingTime (highlighting weekends), CurrentTime (current time vertical bar), FutureTime (current time vertical bar with future highlighting support), and Custom (the developer needs to also set the intervals collection in this case, using time interval objects defined by start and finish properties);
    • isHeaderVisible: Whether to display a chart header for the scale or not; by default it is false for NonworkingTime and CurrentTime scale types;
    • headerHeight: Height of the scale header in the chart;
    • headerTextFormat: Format to use for scale header texts; supported values are: DateTime, Date, Hour, DayOfWeek, DayOfWeekAbbreviation, Day, Month, MonthAbbreviation, Year, MonthYear, Localized, and Custom (the developer needs to also set the headerText property of each interval object within the intervals collection of the scale object in this case), or a function that converts a Date parameter to a presentation string;
    • headerClass, headerStyle: CSS class and/or inline style to apply to the scale header container elements;
    • isHighlightingVisible: Whether to display vertical rectangles in the main chart area for the generated scale intervals;
    • highlightingClass, highlightingStyle: CSS class and/or inline style to apply to the scale highlighter rectangle elements in the main chart area;
    • isSeparatorVisible: Whether to display vertical separator lines in the main chart area between the generated scale intervals;
    • separatorClass, separatorStyle: CSS class and/or inline style to apply to the scale separator line elements in the main chart area;
    
    settings.scales = [
        { scaleType: 'NonworkingTime', isHeaderVisible: false,
          isHighlightingVisible: true, highlightingStyle: 'stroke-width: 0; fill: #f8f8f8' },
        { scaleType: 'Months', headerTextFormat: 'Month',
          headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7; border-bottom: solid 1px #c8bfe7',
          isSeparatorVisible: true, separatorStyle: 'stroke: #c8bfe7' },
        { scaleType: 'Weeks', headerTextFormat: 'Date',
          headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7; border-bottom: solid 1px #c8bfe7' },
        { scaleType: 'Days', headerTextFormat: 'Day', headerStyle: 'padding: 2.25px; border-right: solid 1px #c8bfe7' },
        { scaleType: 'CurrentTime', isHeaderVisible: false, isSeparatorVisible: true, separatorStyle: 'stroke: #8bbf8a; stroke-width: 0.5px'}];
    
                                        
  • hourWidth: Indicates the zoom level to be used for the chart area, and represents the actual number of pixels each hour in the timeline gets available; to zoom in, increase this value; to zoom out, decrease it; by default it is set to 2.5:
    
    settings.hourWidth *= 2; // 200%
    
                                        
  • visibleWeekStart, visibleWeekFinish: The start and finish days of the visible week interval; by default they are set to Sunday (0) and Saturday (6):
    
    settings.visibleWeekStart  = 1; // Monday
    settings.visibleWeekFinish = 5; // Friday
    
                                        
  • workingWeekStart, workingWeekFinish: The start and finish days of the working week interval; by default they are set to Monday (1) and Friday (5); remaining days of the week are considered nonworking time and by default they are highlighted in the chart area:
    
    settings.workingWeekStart  = 1; // Monday
    settings.workingWeekFinish = 4; // Thursday
    
                                        
  • visibleDayStart, visibleDayFinish: The start and finish times of the visible day interval, in milliseconds passed since midnight; by default they are set to 8 AM and 4 PM; the working time interval of the day is also defined using the same values:
    
    settings.visibleDayStart  = 10 * 60 * 60 * 1000; // 10 AM
    settings.visibleDayFinish = 20 * 60 * 60 * 1000; // 8 PM
    
                                        
  • specialNonworkingDays: Optional collection of special nonworking days, such as holidays; alternatively, a Boolean function that receives a date argument and indicates whether it represents a nonworking day or not:
    
    settings.specialNonworkingDays = [new Date(2012, 8, 24), new Date(2012, 8, 25)];
    
                                        
    
    settings.specialNonworkingDays = function(date) { return date.getDate() == 24 || date.getDate() == 25; } // days 24 and 25 of all months
    
                                        
  • schedule: Allows initializing working week and day intervals and special nonworking days to consider for scheduling purposes using an alternative definition object:
    
    settings.schedule = {
        workingWeekStart: 0, workingWeekFinish: 3, // Sunday - Wednesday
        workingDayStart: 9 * 60 * 60 * 1000, workingDayFinish: 19 * 60 * 60 * 1000, // 9 AM - 7 PM, exceeding visible 4 PM
        specialNonworkingDays: [new Date(2012, 8, 18), new Date(2012, 8, 21), new Date(2012, 8, 22)] // Partial replacement for excluded dates
    };
    
                                        
  • barMargin: The top and bottom margins around the allocation bars in the chart:
    
    settings.barMargin = 3;
    
                                        
  • barHeight: The actual height to apply to the allocation bars in the chart; by default it is set to the remaining space from itemHeight when subtracting top and bottom barMargin values:
    
    settings.barHeight = 16;
    
                                        
  • maxDisplayedUnits: The maximum allocation units that are to be displayed as a full height bar in in the chart:
    
    settings.maxDisplayedUnits = 2; //200%
    
                                        
  • styleDefinitionTemplate: Function that returns SVG definitions (node) to be used in allocation style and template definitions (see below):
    
    settings.styleDefinitionTemplate = function (loadChartView) {
        var document = loadChartView.ownerDocument;
        var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        return defs;
    }
    
                                        
  • normalAllocationBarClass, underAllocationBarClass, overAllocationBarClass, normalAllocationBarStyle, underAllocationBarStyle, overAllocationBarStyle: CSS classes and/or inline styles to apply to the normal, under, and over allocation bars in the chart:
    
    settings.normalAllocationBarStyle = 'stroke: Green; fill: Green';
    settings.underAllocationBarStyle  = 'stroke: Yellow; fill: Yellow';
    
                                        
  • allocationTemplate: Function that returns the output (SVG node) for allocation bars to be presented in the chart for a specific item received as parameter:
    
    var originalAllocationTemplate = DlhSoft.Controls.LoadChartView.getDefaultAllocationTemplate(loadChartItems, loadChartView, settings);
    settings.allocationTemplate = function (item) {
        var loadChartView = item.loadChartView;
        var document = loadChartView.ownerDocument;
        var svgGroup = originalAllocationTemplate(item);
        if (item.content.indexOf('Task 1 ') == 0) {
            var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            var itemLeft = loadChartView.getChartPosition(item.start, settings);
            var itemRight = loadChartView.getChartPosition(item.finish, settings);
            rect.setAttribute('x', itemLeft - 1);
            rect.setAttribute('y', settings.barMargin - 1);
            rect.setAttribute('width', Math.max(0, itemRight - itemLeft + 1));
            rect.setAttribute('height', settings.barHeight + 2);
            rect.setAttribute('style', 'stroke: Red; fill: Transparent');
            svgGroup.insertBefore(rect, svgGroup.childNodes[0]);
        }
        return svgGroup;
    };
    
                                        
  • extraTaskTemplate: Optional function that returns supplemental output (SVG node) to display on top of allocation bars to be presented in the chart for a specific item received as parameter:
    
    settings.extraTaskTemplate = function (item) {
        var loadChartView = item.loadChartView;
        var document = loadChartView.ownerDocument;
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        var itemLeft = loadChartView.getChartPosition(item.start, settings);
        rect.setAttribute('x', itemLeft - 15);
        rect.setAttribute('y', settings.barMargin);
        rect.setAttribute('width', 12);
        rect.setAttribute('height', settings.barHeight);
        rect.setAttribute('style', 'stroke: Blue; fill: LightBlue');
        return rect;
    };
    
                                        
  • isTaskToolTipVisible: Determines whether allocation bar tool tips are presented;
  • itemTemplate: Function that returns the output (SVG node) to presented in the chart for a specific item received as parameter (usually a tool tip):
    
    settings.itemTemplate = function (item) {
        var document = item.loadChartView.ownerDocument;
        var toolTip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        var toolTipContent = item.content + ' • ' + item.start.toLocaleString() + '-' + item.finish.toLocaleString();
        toolTip.appendChild(document.createTextNode(toolTipContent));
        return toolTip;
    };
    
                                        
  • isGridRowClickTimeScrollingEnabled: Indicates whehter clicking a grid row should automatically scroll the chart area horizontally to display the associated task item start date and time;
  • isMouseWheelZoomEnabled: Indicates whehter to zoom in and out the timeline automatically when the end user rolls the mouse wheel hovering the chart area;
  • isMouseWheelZoomEnabledMinHourWidth, isMouseWheelZoomEnabledMaxHourWidth: Indicates the limits of the hourWidth value to be considered when mouse wheel zooming is enabled;
  • isVirtualizing: Indicates whether the control will create allocation bars only when they need to be presented (such as only when scrolling the view to their positions); by default it is set to true for optimization purposes:
    
    settings.isVirtualizing = false;
    
                                        
  • months, daysOfWeek: Names of the months and of the days of the week to use at presentation time:
    
    settings.months     = [ 'M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12' ];
    settings.daysOfWeek = [ 'D0', 'D1', 'D2', 'D3', 'D4', 'D5', 'D6' ];
    
                                        
  • weekStartDay: Day of the week to consider as week start; by default it is set to Sunday (0); to set it to Monday use one (1):
    
    settings.weekStartDay = 1; // Monday
    
                                        
  • dateFormatter(date): text, dateTimeFormatter(dateTime): text: Functions that accept date parameters and return text values, used to convert date or date and time values to text values whenever needed within the control; the functions may be provided by the developer for further customization and/or localization purposes; by default they are initialized to a set of internally defined functions that consider a culture invariant date and time formatting: MM/dd/yyyy HH:mm:
    
    settings.dateFormatter     = function (date)     { return date.toDateString(); };
    settings.dateTimeFormatter = function (dateTime) { return dateTime.toString(); };
    
                                        
  • displayedTimeChangeHandler(displayedTime), hourWidthChangeHandler(hourWidth): Functions called whenever the end user scrolls the chart area horizontally or performs mouse wheel zooming on the chart area, changing the left most displayed time (settings.displayedTime) or the zoom level (settings.hourWidth);
  • splitterPositionChangeHandler(gridWidth, chartWidth): Function called whenever the end user resizes the grid and chart areas horizontally, changing the splitter position (settings.gridWidth and settings.chartWidth);
  • columnWidthChangeHandler(column, width): Function called whenever the end user resizes a grid column, changing its width (column.width);
  • itemPropertyChangeHandler(item, propertyName, isDirect, isFinal): Function called whenever item properties change within the control, providing the changed item, relevant property name, and Boolean values indicating whether this change was directly triggered by the user, and whether this is the final change in a periodic operation such as a drag and drop action, specified as parameters; a custom function may be provided by the developer in order to receive notifications whenever data changes occur within the control, when using the default grid column template functions:
    
    settings.itemPropertyChangeHandler = function (item, propertyName, isDirect, isFinal) {
        if (isDirect && isFinal)
            alert(item.content + '.' + propertyName + ' changed.');
    }
    
                                        
  • itemSelectionChangeHandler(item, isSelected, isDirect): Function called whenever item selection changes within the control, providing the selected or unselected item, a Boolean value indicating the updated selection state, and a Boolean value indicating whether this change was directly triggered by the user, specified as parameters;
  • itemMoveHandler(item, fromIndex, toIndex): Function called whenever an item is moved in the managed list of the control, providing the item, source and target positions of the item, specified as parameters;
  • mouseHandler(eventName, isOnItemsArea, isOnChart, row, column, button, clickCount, e), mouseMoveHandler(isOnItemsArea, isOnChart, row, column), mouseDownHandler(isOnItemsArea, isOnChart, row, column, button), clickHandler(isOnItemsArea, isOnChart, row, column), doubleClickHandler(isOnItemsArea, isOnChart, row, column), itemClickHandler(isOnChart, item, column), itemDoubleClickHandler(isOnChart, item, column), chartClickHandler(isOnItemsArea, row, dateTime), chartDoubleClickHandler(isOnItemsArea, row, dateTime), chartItemClickHandler(item, dateTime), chartItemDoubleClickHandler(item, dateTime): Event handlers for generic or granular mouse events, such as for grid and chart, header and items areas, or click and double click event types;
  • itemContextMenuHandler(e, item): Event handler for chart item context menu.

Operations

The following static APIs are available at settings initialization time, prefixed by DlhSoft.Controls.LoadChartView namespace:

  • getDefaultColumns(items, settings): Returns an array of default definitions that you can further customize and use as value for the columns property of the control settings used at initialization time;
  • getDefaultScales(settings): Returns an array of default definitions that you can further customize and use as value for the scales property of the control settings used at initialization time;
  • getDefaultAllocationTemplate(items, controlElement, settings): Returns a function that provides the original template for allocation bars in the chart area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the allocationTemplate function specified in the control settings used at initialization time;
  • getDefaultItemTemplate(settings): Returns a function that provides the original template for allocation items, usually presented as tool tips when hovering allocation bars in the chart area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the itemTemplate function specified in the control settings used at initialization time;
  • getWorkingTime(dateTime, settings): Function that returns the next working time based on a specified date and time value;
  • textColumnTemplateBase(document, valueGetter, isVisibleGetter), textInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter): Specific user interface generator functions useful when defining new grid columns or when customizing column cell templates; supported parameters are:
    • document: The document to generate the required elements within; usually the document of the current window;
    • valueGetter(): Function that gets the data value and prepares for the output element;
    • valueSetter(value): Function that provides the updated content value of the output element as parameter, required to prepare and set the associated data object value;
    • width: The width of the output element;
    • isEnabledGetter(): Optional function that returns a value that indicates whether the output element should be visible or not;
    • isVisibleGetter(): Optional function that returns a value that indicates whether the output element should be enabled or not;
    • isBoldGetter(): Optional function that returns a value that indicates whether the text in the output element should be bold or not.
  • getInputDate(date), getOutputDate(date): Prepares the specified date values to be used for component method input or method result or field output, considering that after initialization the component uses UTC date and time values internally; these methods may also be called using a component instance object.

Component instance

The component may be initialized using an initialize method call:


DlhSoft.Controls.LoadChartView.initialize(loadChartView, items, settings);

                            

var loadChartView = DlhSoft.Controls.LoadChartView.initialize(loadChartViewElement, items, settings);

                            

The initialized control element provides the following API:

  • items, loadChartItems: Provides access to the Gantt Chart items and Load Chart items displayed by the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(): Updates the user interface considering all external item and settings changes;
  • refreshGridItems(), refreshChartItems(), refreshItems(), refreshGridItem(item), refreshChartItem(item), refreshItem(item), refreshLoadChartItem(item): Update the Gantt Chart or Load Chart item(s) within the grid, chart or both areas, considering all external changes on the specified item:
    
    item.barStyle = 'stroke: Red; fill: Red';
    loadChartView.refreshChartItem(item);
    
                                        
  • refreshCurrentTime(), setCurrentTime(dateTime), updateCurrentTime(): Update the user interface considering the specified current time chanage;
  • insertLoadChartItem(index, item), addLoadChartItem(item), insertLoadChartItems(index, items), addLoadChartItems(items): Insert Load Chart item(s) to the managed item list at the specified index or at the bottom of the collection and refreshes the view:
    
    var item = { content: 'New resource', ganttChartItems: [] };
    loadChartView.insertLoadChartItem(item);
    
                                        
  • removeLoadChartItem(item), removeLoadChartItems(items): Removes Load Chart item(s) from the managed item list and refreshes the view;
  • moveLoadChartRange(fromIndex, count, toIndex): Moves a range of items to a specified index in the managed item list and refreshes the view;
  • moveLoadChartItem(item, toIndex): Moves a Load Chart item to a specified index in the managed item list and refreshes the view;
  • moveLoadChartItemUp(item), moveLoadChartItemDown(item): Moves an item up or down in the managed item list and refreshes the view;
  • setItemContent(item, value): Set resource content value;
  • getCurrentItem(): Returns the current item in the collection;
  • getSelectedItem(), getSelectedItems(): Returns the selected item(s) in the collection;
  • selectItem(item), unselectItem(item): Update the selection state of an item in the collection:
    
    selectItem(item);
    
                                        
  • scrollToItem(item): Scrolls the grid and chart areas vertically to display the specified item in the viewports:
    
    item.content = 'Changed content';
    loadChartView.refreshGridItem(item);
    loadChartView.scrollToItem(item);
    
                                        
  • scrollToBottom(): Scrolls the grid and chart areas vertically to the bottom of the presentation content;
  • scrollToDateTime(dateTime): Scrolls the chart area horizontally to display the specified date and time value at the left most visible position in the viewport;
  • increaseTimelinePage(timeAmount), decreaseTimelinePage(timeAmount): Increases or decreases the displayed timeline in the viewport by a specified time interval (in milliseconds) and refreshes the view:
    
    loadChartView.increaseTimelinePage(7 * 24 * 60 * 60 * 1000); // by 1 week
    
                                        
  • setHourWidth(hourWidth): Sets the hour width value used in the chart area to zoom the timeline in our out;
  • setSplitterPosition(gridWidth, chartWidth): Resizes the grid and chart areas horizontally as specified to update the splitter position in the viewport;
  • getChartPosition(dateTime): Returns the X coordinate of a specific date and time in the chart area;
  • getChartWidth(): Returns the actual width of the chart area;
  • getDateTime(chartPosition): Returns the date and time of a specific X coordinate in the chart area;
  • getWorkingTime(dateTime): Returns the next available working time in the schedule based on the specified date and time;
  • getItemsHeight(): Returns the actual height of the chart area;
  • getItemTop(item): Returns the top Y coordinate of a specific item in the chart area;
  • onItemPropertyChanged(item, propertyName, isDirect, isFinal): Calls itemPropertyChangeHandler function specified within the settings collection using the specified item, property name, and Boolean indicators for direct user actions and completed actions as arguments;
  • exportContent(exportSettings, output), print(exportSettings): Exports or prints the content to a specified output document, window or target or using a temporary document and window; supported export setting properties are:
    • title: The title of the output or temporary window to set up;
    • preparingMessage: The temporary message to be displayed in the output window while the asynchronous export operation is in progress;
    • isGridVisible: Determines whether the grid is exported; by default the value from the component instance settings is used;
    • columnIndexes: Determines the columns to be exported, considering the specified array of column indexes in the columns collection; by default all displayed columns are exported or printed;
    • timelineStart, timelineFinish: Start and finish date and times of the exported chart area; by default the values from the component instance settings are used;
    • hourWidth: Indicates the zoom level to be used for the exported chart area, and represents the actual number of device units each hour in the timeline gets available; to zoom in when exporting or printing, increase this value; to zoom out, decrease it; by default the value from the component instance settings is used;
    • startRowIndex, endRowIndex: Determines the rows to be exported, considering the specified indexes in the item collection; by default all displayed rows, including those that are not currently visible in the viewport, are exported or printed;
    • rotate: Determines whether to rotate the exported content in the output document to simulate landscape printing;
    • autoClose: Determines whether to automatically close the temporary export output window generated for printing when the operation is completed:
    
    loadChartView.print({ 
        title: 'Load Chart', 
        isGridVisible: true, columnIndexes: [0], 
        timelineStart: new Date(2012, 8, 1), timelineFinish: new Date(2012, 8, 30) });
    
                                        
  • getProjectStart(), getProjectFinish(): Return the minimum item start and maximum item finish date and times for the entire project loaded and displayed by the component;
  • isLoadChartInitializing, isLoadChartInitialized: Verify that the component instance is currently initializing asynchronously, or that it has been successfully initialized;
  • copyCommonSettings(targetSettings): Copies the common settings of the current component instance to the specified target settings collection; a secondary component instance may be initialized using the output collection.

The initialized item objects provide the following API, as a supplement to the coerced and validated original properties:

  • index: The index of the item in the internal item collection;
  • loadChartIndex: The index of a resource item in the Load Chart item collection;
  • isVirtuallyVisible: Indicates whether the resource or allocation is visible in the scrolling viewport of the control when virtualization is enabled:
    
    if (item.isVirtuallyVisible)
        alert(item.content + ' is or has been visible on screen.');
    
                                        

PertChartView reference

The control container element can be retrieved using a querySelector method call:


<body>
  <div id="pertChartView"></div>
</body>

                                

var pertChartView = document.querySelector('#pertChartView'); 

                                

var pertChartViewElement = document.querySelector('#pertChartView'); 

                                

Using AngularJS you can access PertChartView component using ds:pert-chart directive and preparing the appropriate $scope fields (items, settings) and functions (change):

Using Angular you can access PertChartView component using pertchartview element and preparing the appropriate properties (items, settings) and functions (change):

Using React you can access PertChartView component using PertChartView element and preparing the appropriate properties (items, settings) and functions (change):

Using Vue you can access PertChartView component using pert-chart element and preparing the appropriate properties (items, settings) and event handler methods (change):


<ds:pert-chart id="pertChartView"
               items="items" settings="settings"
               change="itemPropertyChangeHandler" auto-refresh="{{ true }}"
               style="min-height: 240px">
</ds:pert-chart>

                            

<pertchartview [items]="items" [settings]="settings"
               [change]="itemPropertyChangeHandler"
               style="min-height: 240px">
</pertchartview>

                            

return (
    <PertChartView items="{items}" settings="{settings}"
                   change="{itemPropertyChangeHandler}"
                   style={{min-height: 240px}}>
    </PertChartView>
);

                            

<pert-chart v-bind:items="items" v-bind:settings="settings"
            v-on:change="itemPropertyChangeHandler"
            style="min-height: 240px">
</pert-chart>

                            

Data items

The task event items that may be presented within PertChartView control should provide these properties:

  • content: The object that is displayed to represent the task event item in task event shape tool tips, usually the task event name;
  • displayedText: The object that is displayed to represent the task event item in the task event shape, usually a short task event name or identifier;
  • isShapeVisible: Indicates whether the task event shape is displayed in the chart area for this item;
  • displayRowIndex, displayColumnIndex: Indicates the row and column indexex to display the task event that at within the chart; by default they are not defined, and the row and column indexes are computed at runtime based on its collection position and dependencies;
  • shapeClass, shapeStyle: CSS classes and/or inline styles to apply to the task event shapes when they are presented in the chart for this item;
  • taskEventTemplate: Optional function that returns the output (SVG node) for the task event shape to be presented in the chart for this item, overriding the control settings;
  • template: Optional function that returns the output (SVG node) to presented in the chart for this item (usually a tool tip), overriding the control settings;
  • predecessors: The predecessors collection defines predecessor items (objects) referring the task event items that the current item depends of, and having the relations displayed in the PERT Chart view as dependency lines; the predecessor item properties are presented below:
    • item: Task event item that precedes the owner of the predecessor item (the item that the current item depends of);
    • content: The object that is displayed to represent the task item in the dependency line tool tips, usually the task name;
    • displayedText: The object that is displayed to represent the task item on the dependency line, usually a short task name or identifier;
    • dependencyLineClass, dependencyTextClass, dependencyLineStyle, dependencyTextStyle: CSS class and/or inline style to apply to the dependency line and text to be presented in the chart for this predecessor item;
    • template: Optional function that returns the output (SVG node) to presented in the chart for this predecessor item (usually a tool tip), overriding the control settings.

You may obtain PERT task event items directly from GanttChartView component instances:


var pertChartItems = ganttChartView.getPertChartItems();

                            

Settings

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • target: Name of the target to generically apply to the control; Standard, and Phone targets are supported; by default it is Standard:
    
    settings.target = 'Phone';
    
                                        
  • theme: Name of the internal theme to generically apply to the control; Modern, ModernBordered, and Aero themes are supported; by default it is Modern:
    
    settings.theme = 'Aero';
    
                                        
  • classic: When set to true, reverts default settings to the original version of the component (before 2023):
    
    settings.classic = true;
    
                                        
  • border: Color for the border to be presented around the main content container within the control; the border type is set to solid and its width is set to 1px by design (they are fixed values); by default it is gray:
    
    settings.border = 'Blue';
    
                                        
  • containerClass, containerStyle: CSS class and/or inline style to apply to the main content container within the control;
  • canUserRearrangeItems: Indicates whether the user can change the canvas positions of task event items in the control by drag and drop operations (by default it is set to true):
    
    settings.canUserRearrangeItems = false;
    
                                        
  • snapRearrangedItemsToGuidelines: Indicates whether the task event item shapes are snapping to row and column based guidelines in the control during drag and drop based rearrange operations (by default it is set to true):
    
    settings.snapRearrangedItemsToGuidelines = false;
    
                                        
  • itemWidth, itemHeight: Width and height values shared by all item columns and rows within the control (chart item areas); by default they are set to 40;
  • aspectRatio: The aspect ratio of the chart, indicating the rate between horizontal and vertical item layout positioning;
  • shapeWidth, shapeHeight: column width and row height of any shape presented in the chart; by default they are set to 32;
  • dependencyTextBlockWidth: The width of the text blocks displayed for dependency lines in the chart at initialization time; by default it is set to 120;
  • chartMargin: The margin to preserve around the chart; by default it is set to 16:
    
    settings.chartMargin = 4;
    
                                        
  • styleDefinitionTemplate: Function that returns SVG definitions (node) to be used in standard style and template definitions (see below); by default, they include these items: BlueGradient, BlackGradient, ArrowMarker:
    
    settings.styleDefinitionTemplate = function (pertChartView) {
        var document = pertChartView.ownerDocument;
        var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        var arrowMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
        arrowMarker.setAttribute('id', 'ArrowMarker');
        arrowMarker.setAttribute('viewBox', '0 0 10 10');
        arrowMarker.setAttribute('refX', '0');
        arrowMarker.setAttribute('refY', '5');
        arrowMarker.setAttribute('markerUnits', 'strokeWidth');
        arrowMarker.setAttribute('markerWidth', '5');
        arrowMarker.setAttribute('markerHeight', '4');
        arrowMarker.setAttribute('orient', 'auto');
        var arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        arrowPath.setAttribute('fill', 'LightGreen');
        arrowPath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
        arrowMarker.appendChild(arrowPath);
        defs.appendChild(arrowMarker);
        return defs;
    }
    
                                        
  • shapeClass, shapeStyle: CSS classes and/or inline styles to apply to the shapes in the chart:
    
    settings.shapeStyle = 'stroke: Green; fill: LightYellow';
    
                                        
  • temporaryThumbClass, temporaryThumbStyle: CSS classes and/or inline styles to apply to the temporary shapes displayed during drag and drop operations performed within the chart;
  • dependencyLineClass, dependencyLineStyle: CSS class and/or inline style to apply to polylines displayed between dependent task event shapes in the chart:
    
    settings.dependencyLineStyle = 'stroke: LightGreen; fill: none; marker-end: url(#ArrowMarker)';
    
                                        
  • taskEventTemplate: Function that returns the output (SVG node) for task event shapes to be presented in the chart for a specific item received as parameter:
    
    var originalTaskEventTemplate = DlhSoft.Controls.PertChartView.getDefaultTaskEventTemplate(items, pertChartView, settings);
    settings.taskEventTemplate = function (item) {
        var document = item.pertChartView.ownerDocument;
        var svgGroup = originalTaskEventTemplate(item);
        if (item.content.indexOf('Task event 2.') == 0) {
            var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rect.setAttribute('x', 0);
            rect.setAttribute('y', 0);
            rect.setAttribute('width', settings.shapeWidth);
            rect.setAttribute('height', settings.shapeHeight);
            rect.setAttribute('style', 'stroke: Red; fill: Transparent');
            svgGroup.insertBefore(rect, svgGroup.childNodes[0]);
        }
        return svgGroup;
    };
    
                                        
  • extraTaskEventTemplate: Optional function that returns supplemental output (SVG node) to display on top of task event shapes to be presented in the chart for a specific item received as parameter:
    
    settings.extraTaskEventTemplate = function (item) {
        var document = item.pertChartView.ownerDocument;
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute('x', 0);
        rect.setAttribute('y', 0);
        rect.setAttribute('width', 12);
        rect.setAttribute('height', 12);
        rect.setAttribute('style', 'stroke: Blue; fill: LightBlue');
        return rect;
    };
    
                                        
  • isTaskEventToolTipVisible: Determines whether task event shape tool tips are presented;
  • itemTemplate: Function that returns the output (SVG node) to presented in the chart for a specific item received as parameter (usually a tool tip):
    
    settings.itemTemplate = function (item) {
        var document = item.pertChartView.ownerDocument;
        var toolTip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        var toolTipContent = 'Event: ' + item.content;
    };
    
                                        
  • dependencyLineTemplate: Function that returns the output (SVG node) for dependency polyline representing predecessor information in the chart for an item and a specific predecessor item received as parameters;
  • isDependencyToolTipVisible: Determines whether dependency line tool tips are presented;
  • predecessorItemTemplate: Function that returns the output (SVG node) to presented in the chart for an item and a specific predecessor item received as parameters (usually a tool tip):
    
    settings.predecessorItemTemplate = function (item, predecessorItem) {
        var document = item.pertChartView.ownerDocument;
        var toolTip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        var toolTipContent = predecessorItem.item.displayedText + ' → ' + item.displayedText;
        toolTip.appendChild(document.createTextNode(toolTipContent));
        return toolTip;
    };
    
                                        
  • useInlineToolTips: Indicates whether to use tool tip controls generated inside the SVG content rather than title elements; true by default;
  • timeSpanFormatter(timeSpan): text: Function that accepts time span parameters and returns text values, used to convert time span values (received in milliseconds) to text values whenever needed within the control; the functions may be provided by the developer for further customization and/or localization purposes; by default they are initialized to a set of internally defined functions that consider culture invariant time span formatting: {Number}h (the value is shown in hours);
  • itemPropertyChangeHandler(item, propertyName, isDirect, isFinal): Function called whenever item properties change within the control, providing the changed item, relevant property name, and Boolean values indicating whether this change was directly triggered by the user, and whether this is the final change in a periodic operation such as a drag and drop action, specified as parameters; a custom function may be provided by the developer in order to receive notifications whenever data changes occur within the control:
    
    settings.itemPropertyChangeHandler = function (item, propertyName, isDirect, isFinal) {
        if (isDirect && isFinal)
            alert(item.displayedText + '.' + propertyName + ' changed.');
    }
    
                                        
  • mouseHandler(eventName, item, button, clickCount, e), mouseMoveHandler(item), mouseDownHandler(item, button), itemClickHandler(item), itemDoubleClickHandler(item): Event handlers for generic or granular mouse events, such as for click and double click event types;
  • dependencyLineClickHandler(predecessorItem, targetItem, e), dependencyLineDoubleClickHandler(predecessorItem, targetItem, e): Event handlers for dependency line click and double click events.

Operations

The following static APIs are available at settings initialization time, prefixed by DlhSoft.Controls.Pert.PertChartView namespace:

  • getDefaultStyleDefinitionTemplate(controlElement, settings): Returns a function that provides common SVG definitions that may be used in template methods for task event and dependency line styles specified in the control settings used at initialization time;
  • getDefaultTaskEventTemplate(items, controlElement, settings): Returns a function that provides the original template for task event shapes in the chart area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the taskEventTemplate function specified in the control settings used at initialization time;
  • getDefaultItemTemplate(settings): Returns a function that provides the original template for task event items, usually presented as tool tips when hovering task event shapes in the chart area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the itemTemplate function specified in the control settings used at initialization time;
  • getDefaultDependencyLineTemplate(items, settings): Returns a function that provides the original template for the dependency lines presented in the chart area, based on the item and predecessor item received as parameters; developers can access it to retreive SVG content to be further adorned in the dependencyLineTemplate function specified in the control settings used at initialization time;
  • getDefaultPredecessorItemTemplate(settings): Returns a function that provides the original template for predecessor items representing task event dependencies, usually presented as tool tips when hovering dependency lines in the chart area, based on the item and predecessor item received as parameters; developers can access it to retreive SVG content to be further adorned in the predecessorItemTemplate function specified in the control settings used at initialization time;
  • initializeTaskEventDraggingThumbs(thumb, item, itemLeft, itemTop): Inside task event template functions, sets up task event drag and drop behavior for the non-null SVG element specified to be designed as thumb, considering the specified item and item positioning in the chart;
  • defaultTimeSpanFormatter(timeSpan): Default time span formatter implementation, returning texts representing the specified time span value received in milliseconds and converted to hours.

Component instance

The component may be initialized using an initialize method call:


DlhSoft.Controls.PertChartView.initialize(pertChartView, items, settings);

                            

var pertChartView = DlhSoft.Controls.PertChartView.initialize(pertChartViewElement, items, settings);

                            

The initialized control element provides the following API:

  • items: Provides access to the PERT Chart items displayed by the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(): Updates the user interface considering all external item and settings changes;
  • refreshItems(), refreshItem(item), refreshPredecessorItems(item), refreshItemGraph(item): Update the item(s), predecessor items, or dependency graph within the chart area, considering all external changes on the specified item and related predecessor and successor items:
    
    item.shapeStyle = 'stroke: Red; fill: LightYellow';
    pertChartView.refreshItem(item);
    
                                        
  • scrollToItem(item): Scrolls the chart area horizontally and/or vertically to display the specified item in the viewport:
    
    item.displayedText = '?';
    pertChartView.refreshItem(item);
    pertChartView.scrollToItem(item);
    
                                        
  • scrollToLeft(), scrollToTop(), scrollToRight(), scrollToBottom(): Scroll the chart area vertically or horizontally to the left, top, right, or bottom of the presentation content;
  • getChartWidth(), getChartHeight(): Return the actual width and height of the chart area;
  • getItemLeft(item), getItemTop(item): Return the left X and top Y coordinates of a specific item in the chart area;
  • onItemPropertyChanged(item, propertyName, isDirect, isFinal): Calls itemPropertyChangeHandler function specified within the settings collection using the specified item, property name, and Boolean indicators for direct user actions and completed actions as arguments;
  • exportContent(exportSettings, output), print(exportSettings): Exports or prints the content to a specified output document, window or target or using a temporary document and window; supported export setting properties are:
    • title: The title of the output or temporary window to set up;
    • preparingMessage: The temporary message to be displayed in the output window while the asynchronous export operation is in progress;
    • rotate: Determines whether to rotate the exported content in the output document to simulate landscape printing;
    • autoClose: Determines whether to automatically close the temporary export output window generated for printing when the operation is completed:
    
    pertChartView.print({ title: "PERT Chart" });
    
                                        
  • isItemCritical(item), getCriticalItems(), isDependencyCritical(predecessorItem), getCriticalDependencies(): Determine whether a specific item is critical and the list of items that are part of the critical path, or whether a specific predecessor item is critical and the list of predecessor items that are part of the critical path, considering PERT rules;
  • repositionEnds(): Updates the vertical position of start and finish nodes, assuming they are the first and the last items in the collection, to the first or between the first and second row in the view (when there is at least one item with two or more successors in the collection);
  • isInitializing, isInitialized: Verify that the component instance is currently initializing asynchronously, or that it has been successfully initialized.

The initialized item objects provide the following API, as a supplement to the coerced and validated original properties:

  • actualRowIndex, actualColumnIndex: The actual row and column indexes of the item in the chart.

NetworkDiagramView reference

The control container element can be retrieved using a querySelector method call:


<body>
  <div id="networkDiagramView"></div>
</body>

                                

var networkDiagramView = document.querySelector('#networkDiagramView'); 

                                

var networkDiagramViewElement = document.querySelector('#networkDiagramView'); 

                                

Using AngularJS you can access NetworkDiagramView component using ds:network-diagram directive and preparing the appropriate $scope fields (items, settings) and functions (change):

Using Angular you can access NetworkDiagramView component using networkdiagramview element and preparing the appropriate properties (items, settings) and functions (change):

Using React you can access NetworkDiagramView component using NetworkDiagramView element and preparing the appropriate properties (items, settings) and functions (change):

Using Vue you can access NetworkDiagramView component using network-diagram element and preparing the appropriate properties (items, settings) and event handler methods (change):


<ds:network-diagram id="networkDiagramView"
                    items="items" settings="settings"
                    change="itemPropertyChangeHandler" auto-refresh="{{ true }}"
                    style="min-height: 240px">
</ds:network-diagram>

                            

<networkdiagramview [items]="items" [settings]="settings"
                    [change]="itemPropertyChangeHandler"
                    style="min-height: 240px">
</networkdiagramview>

                            

return (
    <NetworkDiagramView items="{items}" settings="{settings}"
                        change="{itemPropertyChangeHandler}"
                        style={{min-height: 240px}}>
    </PertChartView>
);

                            

<network-diagram v-bind:items="items" v-bind:settings="settings"
                 v-on:change="itemPropertyChangeHandler"
                 style="min-height: 240px">
</network-diagram>

                            

Data items

The task items that may be presented within NetworkDiagramView control should provide these properties:

  • content: The object that is displayed to represent the task item in task shape tool tips, usually the full task name and path;
  • displayedText: The object that is displayed to represent the task item in the task shape, usually a short task name or identifier;
  • effort, earlyStart, earlyfinish, lateState, lateFinish;
  • isMilestone: A milestone task is displayed in the Network Diagram view using a supplemental task shape template;
  • slack;
  • isRelativeToTimezone: Indicates whether {early|Late}{Start|Finish} values are configured as local timezone based values (true by default); it gets set to false upon component initialization as date and times are converted to UTC values internally; set it back to true if you reinitialize the properties and refresh the component; to read the timing values externally, you may use getOutputDate method of the component;
  • isShapeVisible: Indicates whether the task shape is displayed in the diagram area for this item;
  • displayRowIndex, displayColumnIndex: Indicates the row and column indexex to display the task that at within the diagram; by default they are not defined, and the row and column indexes are computed at runtime based on its collection position and dependencies;
  • shapeClass, milestoneClass, shapeStyle, milestoneStyle: CSS classes and/or inline styles to apply to the task shapes and milestone supplemental shapes when they are presented in the diagram for this item;
  • taskTemplate: Optional function that returns the output (SVG node) for the task shape to be presented in the diagram for this item, overriding the control settings;
  • template: Optional function that returns the output (SVG node) to presented in the diagram for this item (usually a tool tip), overriding the control settings;
  • predecessors: The predecessors collection defines predecessor items (objects) referring the task items that the current item depends of, and having the relations displayed in the Network Diagram view as dependency lines; the predecessor item properties are presented below:
    • item: Task item that precedes the owner of the predecessor item (the item that the current item depends of);
    • dependencyLineClass, dependencyLineStyle: CSS class and/or inline style to apply to the dependency line to be presented in the diagram for this predecessor item;
    • template: Optional function that returns the output (SVG node) to presented in the diagram for this predecessor item (usually a tool tip), overriding the control settings.

You may obtain network task items directly from GanttChartView component instances:


var networkDiagramItems = ganttChartView.getNetworkDiagramItems();

                            

Settings

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • target: Name of the target to generically apply to the control; Standard, and Phone targets are supported; by default it is Standard:
    
    settings.target = 'Phone';
    
                                        
  • theme: Name of the internal theme to generically apply to the control; Modern, ModernBordered, and Aero themes are supported; by default it is Modern:
    
    settings.theme = 'Aero';
    
                                        
  • classic: When set to true, reverts default settings to the original version of the component (before 2023):
    
    settings.classic = true;
    
                                        
  • border: Color for the border to be presented around the main content container within the control; the border type is set to solid and its width is set to 1px by design (they are fixed values); by default it is gray:
    
    settings.border = 'Blue';
    
                                        
  • containerClass, containerStyle: CSS class and/or inline style to apply to the main content container within the control;
  • canUserRearrangeItems: Indicates whether the user can change the canvas positions of task items in the control by drag and drop operations (by default it is set to true):
    
    settings.canUserRearrangeItems = false;
    
                                        
  • snapRearrangedItemsToGuidelines: Indicates whether the task item shapes are snapping to row and column based guidelines in the control during drag and drop based rearrange operations (by default it is set to true):
    
    settings.snapRearrangedItemsToGuidelines = false;
    
                                        
  • itemWidth, itemHeight: Width and height values shared by all item columns and rows within the control (diagram item areas); by default they are set to 220 and 100, respectively;
  • aspectRatio: The aspect ratio of the diagram, indicating the rate between horizontal and vertical item layout positioning;
  • shapeWidth, shapeHeight: column width and row height of any shape presented in the diagram; by default they are set to 212 and 92, respectively;
  • minDependencyLineLength: The minimum length of the dependency lines displayed in the diagram at initialization time; by default it is set to 48;
  • diagramMargin: The margin to preserve around the diagram; by default it is set to 16:
    
    settings.diagramMargin = 4;
    
                                        
  • styleDefinitionTemplate: Function that returns SVG definitions (node) to be used in standard and milestone style and template definitions (see below); by default, they include these items: BlueGradient, BlackGradient, ArrowMarker:
    
    settings.styleDefinitionTemplate = function () {
        var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        var arrowMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
        arrowMarker.setAttribute('id', 'ArrowMarker');
        arrowMarker.setAttribute('viewBox', '0 0 10 10');
        arrowMarker.setAttribute('refX', '0');
        arrowMarker.setAttribute('refY', '5');
        arrowMarker.setAttribute('markerUnits', 'strokeWidth');
        arrowMarker.setAttribute('markerWidth', '5');
        arrowMarker.setAttribute('markerHeight', '4');
        arrowMarker.setAttribute('orient', 'auto');
        var arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        arrowPath.setAttribute('fill', 'LightGreen');
        arrowPath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
        arrowMarker.appendChild(arrowPath);
        defs.appendChild(arrowMarker);
        return defs;
    }
    
                                        
  • shapeClass, milestoneClass, shapeStyle, milestoneStyle: CSS classes and/or inline styles to apply to the shapes and milestones in the diagram:
    
    settings.shapeStyle     = 'stroke: Green; fill: LightYellow';
    settings.milestoneStyle = 'stroke: DarkGreen; fill: Yellow';
    
                                        
  • temporaryThumbClass, temporaryThumbStyle: CSS classes and/or inline styles to apply to the temporary shapes displayed during drag and drop operations performed within the diagram;
  • dependencyLineClass, dependencyLineStyle: CSS class and/or inline style to apply to polylines displayed between dependent task shapes in the diagram:
    
    settings.dependencyLineStyle = 'stroke: LightGreen; fill: none; marker-end: url(#ArrowMarker)';
    
                                        
  • taskTemplate: Function that returns the output (SVG node) for task shapes to be presented in the diagram for a specific item received as parameter:
    
    var originalTaskTemplate = DlhSoft.Controls.NetworkDiagramView.getDefaultTaskTemplate(items, networkDiagramView, settings);
    settings.taskTemplate = function (item) {
        var document = item.networkDiagramView.ownerDocument;
        var svgGroup = originalTaskTemplate(item);
        if (item.content.indexOf('Task 2.') == 0) {
            var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rect.setAttribute('x', 0);
            rect.setAttribute('y', 0);
            rect.setAttribute('width', settings.shapeWidth);
            rect.setAttribute('height', settings.shapeHeight);
            rect.setAttribute('style', 'stroke: Red; fill: Transparent');
            svgGroup.insertBefore(rect, svgGroup.childNodes[0]);
        }
        return svgGroup;
    };
    
                                        
  • extraTaskTemplate: Optional function that returns supplemental output (SVG node) to display on top of task shapes to be presented in the diagram for a specific item received as parameter:
    
    settings.extraTaskTemplate = function (item) {
        var document = item.networkDiagramView.ownerDocument;
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute('x', 0);
        rect.setAttribute('y', 0);
        rect.setAttribute('width', 12);
        rect.setAttribute('height', 12);
        rect.setAttribute('style', 'stroke: Blue; fill: LightBlue');
        return rect;
    };
    
                                        
  • isTaskToolTipVisible: Determines whether task shape tool tips are presented;
  • itemTemplate: Function that returns the output (SVG node) to presented in the diagram for a specific item received as parameter (usually a tool tip):
    
    settings.itemTemplate = function (item) {
        var document = item.networkDiagramView.ownerDocument;
        var toolTip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        var toolTipContent = item.content + ' • ' + 'Early start: ' + item.earlyStart.toLocaleString();
        if (!item.isMilestone)
            toolTipContent += ' • ' + 'Late finish: ' + item.lateFinish.toLocaleString();
        toolTip.appendChild(document.createTextNode(toolTipContent));
        return toolTip;
    };
    
                                        
  • dependencyLineTemplate: Function that returns the output (SVG node) for dependency polyline representing predecessor information in the diagram for an item and a specific predecessor item received as parameters;
  • isDependencyToolTipVisible: Determines whether dependency line tool tips are presented;
  • predecessorItemTemplate: Function that returns the output (SVG node) to presented in the diagram for an item and a specific predecessor item received as parameters (usually a tool tip):
    
    settings.predecessorItemTemplate = function (item, predecessorItem) {
        var document = item.networkDiagramView.ownerDocument;
        var toolTip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        var toolTipContent = predecessorItem.item.displayedText + ' → ' + item.displayedText;
        toolTip.appendChild(document.createTextNode(toolTipContent));
        return toolTip;
    };
    
                                        
  • useInlineToolTips: Indicates whether to use tool tip controls generated inside the SVG content rather than title elements; true by default;
  • dateTimeFormatter(dateTime): text, timeSpanFormatter(timeSpan): text: Functions that accept date and time span parameters and return text values, used to convert date or date and time and time span values (received in milliseconds) to text values whenever needed within the control; the functions may be provided by the developer for further customization and/or localization purposes; by default they are initialized to a set of internally defined functions that consider culture invariant date and time and time span formatting: MM/dd/yyyy HH:mm (space character is used to separate the values on two rows internally), {Number}h (the value is shown in hours):
    
    settings.dateTimeFormatter = function (dateTime) { return dateTime.toString(); };
    
                                        
  • itemPropertyChangeHandler(item, propertyName, isDirect, isFinal): Function called whenever item properties change within the control, providing the changed item, relevant property name, and Boolean values indicating whether this change was directly triggered by the user, and whether this is the final change in a periodic operation such as a drag and drop action, specified as parameters; a custom function may be provided by the developer in order to receive notifications whenever data changes occur within the control:
    
    settings.itemPropertyChangeHandler = function (item, propertyName, isDirect, isFinal) {
        if (isDirect && isFinal)
            alert(item.displayedText + '.' + propertyName + ' changed.');
    }
    
                                        
  • mouseHandler(eventName, item, button, clickCount, e), mouseMoveHandler(item), mouseDownHandler(item, button), itemClickHandler(item), itemDoubleClickHandler(item): Event handlers for generic or granular mouse events, such as for click and double click event types;
  • dependencyLineClickHandler(predecessorItem, targetItem, e), dependencyLineDoubleClickHandler(predecessorItem, targetItem, e): Event handlers for dependency line click and double click events.

Operations

The following static APIs are available at settings initialization time, prefixed by DlhSoft.Controls.Pert.NetworkDiagramView namespace:

  • getDefaultStyleDefinitionTemplate(controlElement, settings): Returns a function that provides common SVG definitions that may be used in template methods for task and dependency line styles specified in the control settings used at initialization time;
  • getDefaultTaskTemplate(items, controlElement, settings): Returns a function that provides the original template for task shapes in the diagram area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the taskTemplate function specified in the control settings used at initialization time;
  • getDefaultItemTemplate(settings): Returns a function that provides the original template for task items, usually presented as tool tips when hovering task shapes in the diagram area, based on the item received as parameter; developers can access it to retreive SVG content to be further adorned in the itemTemplate function specified in the control settings used at initialization time;
  • getDefaultDependencyLineTemplate(items, settings): Returns a function that provides the original template for the dependency lines presented in the diagram area, based on the item and predecessor item received as parameters; developers can access it to retreive SVG content to be further adorned in the dependencyLineTemplate function specified in the control settings used at initialization time;
  • getDefaultPredecessorItemTemplate(settings): Returns a function that provides the original template for predecessor items representing task dependencies, usually presented as tool tips when hovering dependency lines in the diagram area, based on the item and predecessor item received as parameters; developers can access it to retreive SVG content to be further adorned in the predecessorItemTemplate function specified in the control settings used at initialization time;
  • initializeTaskDraggingThumbs(thumb, item, itemLeft, itemTop): Inside task template functions, sets up task drag and drop behavior for the non-null SVG element specified to be designed as thumb, considering the specified item and item positioning in the diagram;
  • defaultDateTimeFormatter(date), defaultTimeSpanFormatter(timeSpan): Default date time and time span formatter implementations, returning texts representing the specified date and a time using month, day, year, and hour and minute time parts, or time span value received in milliseconds and converted to hours;
  • getInputDate(date), getOutputDate(date): Prepares the specified date values to be used for component method input or method result or field output, considering that after initialization the component uses UTC date and time values internally; these methods may also be called using a component instance object.

Component instance

The component may be initialized using an initialize method call:


DlhSoft.Controls.NetworkDiagramView.initialize(networkDiagramView, items, settings);

                            

var networkDiagramView = DlhSoft.Controls.NetworkDiagramView.initialize(networkDiagramViewElement, items, settings);

                            

The initialized control element provides the following API:

  • items: Provides access to the Network Diagram items displayed by the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(): Updates the user interface considering all external item and settings changes;
  • refreshItems(), refreshItem(item), refreshPredecessorItems(item), refreshItemGraph(item): Update the item(s), predecessor items, or dependency graph within the diagram area, considering all external changes on the specified item and related predecessor and successor items:
    
    item.shapeStyle = 'stroke: Red; fill: LightYellow';
    networkDiagramView.refreshItem(item);
    
                                        
  • scrollToItem(item): Scrolls the diagram area horizontally and/or vertically to display the specified item in the viewport:
    
    item.displayedText = 'Changed displayed text';
    networkDiagramView.refreshItem(item);
    networkDiagramView.scrollToItem(item);
    
                                        
  • scrollToLeft(), scrollToTop(), scrollToRight(), scrollToBottom(): Scroll the diagram area vertically or horizontally to the left, top, right, or bottom of the presentation content;
  • getChartWidth(), getChartHeight(): Return the actual width and height of the diagram area;
  • getItemLeft(item), getItemTop(item): Return the left X and top Y coordinates of a specific item in the diagram area;
  • onItemPropertyChanged(item, propertyName, isDirect, isFinal): Calls itemPropertyChangeHandler function specified within the settings collection using the specified item, property name, and Boolean indicators for direct user actions and completed actions as arguments;
  • exportContent(exportSettings, output), print(exportSettings): Exports or prints the content to a specified output document, window or target or using a temporary document and window; supported export setting properties are:
    • title: The title of the output or temporary window to set up;
    • preparingMessage: The temporary message to be displayed in the output window while the asynchronous export operation is in progress;
    • rotate: Determines whether to rotate the exported content in the output document to simulate landscape printing;
    • autoClose: Determines whether to automatically close the temporary export output window generated for printing when the operation is completed:
    
    networkDiagramView.print({ title: "Network Diagram" });
    
                                        
  • isItemCritical(item), getCriticalItems(), isDependencyCritical(predecessorItem), getCriticalDependencies(): Determine whether a specific item is critical and the list of items that are part of the critical path, or whether a specific predecessor item is critical and the list of predecessor items that are part of the critical path, considering PERT rules;
  • repositionEnds(): Updates the vertical position of start and finish nodes, assuming they are the first and the last items in the collection, to the first or between the first and second row in the view (when there is at least one item with two or more successors in the collection);
  • isInitializing, isInitialized: Verify that the component instance is currently initializing asynchronously, or that it has been successfully initialized.

The initialized item objects provide the following API, as a supplement to the coerced and validated original properties:

  • actualRowIndex, actualColumnIndex: The actual row and column indexes of the item in the diagram.

Calendar

Calendar control is used to present a date value as a selected item in a month calendar. The selected date value must be of Date type (the time of day of the Date object is ignored):


var selectedDate = new Date();

                            

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • theme: Name of the internal theme to generically apply to the control; Modern and Standard themes are supported; by default it is Modern:
    
    settings.theme = 'Standard';
    
                                        
  • isReadOnly: Indicates whether the control is read only:
    
    settings.isReadOnly = true;
    
                                        
  • displayedDate: Date object that indicates the month to be displayed (day and time of day values are ignored); by default it is set to the current date;
  • isTodayLinkVisible: Indicates whether a Today link that would change the displayed month to the current date when clicked is visible at the bottom of the control; by default it is set to false;
  • defaultTimeOfDay: A numeric value indicating milliseconds since midnight that would to be set as the time of day to the selected date value when it is changed by the end user by clicking a specific day or the Today link available within the displayed month calendar:
    
    settings.defaultTimeOfDay = 8 * 60 * 60 * 1000; // 8 AM
    
                                        
  • containerClass, containerStyle: CSS class and/or inline style to apply to the table representing the month calendar within the control;
  • monthYearHeaderClass, monthYearHeaderStyle, dayOfWeekHeaderClass, dayOfWeekHeaderStyle, dayClass, dayStyle, todayLinkClass, todayLinkStyle: CSS classes and/or inline styles to apply to the inner elements of the month calendar within the control;
  • otherMonthDayClass, otherMonthDayStyle: CSS class and/or inline style to supplementary apply to day items in the previous or next months (before and after the currently displayed month) in the control;
  • selectedDayClass, selectedDayStyle: CSS class and/or inline style to supplementary apply to the currently selected day in the month calendar of the control;
  • months, daysOfWeek: Names of the months and of the days of the week to use at presentation time:
    
    settings.months     = [ 'M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12' ];
    settings.daysOfWeek = [ 'D0', 'D1', 'D2', 'D3', 'D4', 'D5', 'D6' ];
    
                                        
  • todayString: The text of the Today link; by default it is set to English "Today";
  • displayedDateChangeHandler(displayedDate): Function called whenever the displayed month is changed in the control, providing the selected date value that triggered the change, or the first or last day of the next or previous month when the month changed from the previous or next month internal buttons, specified as parameter;
  • selectedDateChangeHandler(selectedDate): Function called whenever the selected date changes within the control, providing the changed value specified as parameter:
    
    settings.selectedDateChangeHandler = function (selectedDate) {
        alert('Selected date changed to ' + selectedDate.toDateString() + '.');
    }
    
                                        
  • monthRows, monthColumns: Indicate how many month rows and columns are displayed; by default their values are set to 1; when set to values higher than 1, some component features may be disabled, tough:
    
    settings.monthRows    = 4;
    settings.monthColumns = 3;
    
                                        
  • monthCellSpacing, monthCellClass, monthCellStyle, applyMonthStyleForSingleCell, applyNextMonthButtonToLastColumn, applyNextMonthButtonToLastRow: Establish further settings for calendar month cells displayed in the view;
  • disabledDateSelector(date): Function called for each displayed date to determine whether it should be disabled in the view;
    
    settings.disabledDateSelector = function(date) { return date.getDay() == 6; }
    
                                        
  • disabledDayClass, disabledDayStyle: Allow customizing the user interface for disabled days in the view;
  • minValue: The minimum date that the control may navigate to and select;
  • highlightingClassSelector(date), highlightingStyleSelector(date): Functions called for each displayed date to determine the CSS class and style to apply to its element in the view;
  • allowMultipleSelection, allowRangeSelection: Indicate whether the control allows multiple date selection and/or date range selection:
    
    settings.allowMultipleSelection = true;
    
                                        
  • selectionChangedHandler(): Function called when there is any change in the selected dates array;
  • calendarSelectorLevels: Indicates the number of supplemental calendar selector levels to display when clicking calendar headers; supported values: 1: month; 2: + year; 3: + decade:
    
    // Display month selector level, showing the current year and allowing selecting another month when clicking the month header in the view:
    // Setting a value of 2 or 3 would also display second and/or third year and decade selector levels, showing the current decade or century 
    // and allowing selecting another year or decade when clicking on the year or decade header in the month or year view.
    settings.calendarSelectorLevels = 1;
    
                                        
  • calendarSelectorPopupClass, calendarSelectorPopupStyles: Popup CSS class and style to apply when displaying supplemental calendar selectors.

The component may be initialized using an initialize method call, and could also be obtained later using a get method call; calendarElement host may be a span or div element of the HTML document:


var calendar = DlhSoft.Controls.Calendar.initialize(calendarElement, selectedDate, settings);
var calendar = DlhSoft.Controls.Calendar.get(calendarElement);

                            

The initialized control element provides the following API:

  • selectedDate: Provides access to the currently selected date in the control;
  • selectedDates, selectedDateRange, selectedDateRanges: Provides access to the currently selected dates array and/or selected date range(s) in the control, when allowMultipleSelection or allowRangeSelection settings are set to true;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(): Updates the user interface considering all external selected date and settings changes;
  • getValue(): selectedDate, setValue(selectedDate): Get and set the selected date in the control;
  • getValues(): value[], setValues(value[]), getValueRange(): { start, finish }, setValueRange({ start, finish }), getValueRanges(): { start, finish }[], setValueRanges({ start, finish }[]): Get and set the date value array or date range(s) in the control, when allowMultipleSelection or allowRangeSelection settings are set to true;
  • isValueSelected(date): Determines whether the specified date is selected in the control, useful when allowMultipleSelection or allowRangeSelection settings are set to true;
  • invertValueSelection(date): Inverts the selection state for the specified date is selected in the control, useful when allowMultipleSelection setting is set to true;
  • setDisplayedValue(displayedDate): Sets the displayed date in the control, indicating the first displayed month in the view;
  • isInitialized: Verifies that the component instance has been successfully initialized.

DatePicker

DatePicker control is used to present and select a date value using a month calendar displayed upon focusing its input element or when clicking an associated drop down button. The value must be of Date type (the time of day of the Date object is ignored):


var value = new Date();

                            

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • theme: Name of the internal theme to generically apply to the control; Modern and Standard themes are supported; by default it is Modern:
    
    settings.theme = 'Standard';
    
                                        
  • isReadOnly: Indicates whether the control is read only:
    
    settings.isReadOnly = true;
    
                                        
  • isNullValueAccepted: Indicates whether an undefined or null value is accepted and represented as an empty string in the input element of the control;
  • isDropDownButtonVisible: Indicates whether a drop down button is appended to the user interface to the right side of the input element of the control; by default it is set to false;
  • dropDownButtonDefinition: Provides HTML to define the drop down button displayed by the control when isDropDownButtonVisible is set to true; by default it is set to an inline SVG image representing a calendar;
  • displayedDate: Date object that indicates the month to be displayed in the calendar (day and time of day values are ignored); by default it is set to the current date;
  • isTodayLinkVisible: Indicates whether a Today link that would change the displayed month to the current date when clicked is visible at the bottom of the calendar of the control; by default it is set to true;
  • defaultTimeOfDay: A numeric value indicating milliseconds since midnight that would to be set as the time of day to the selected date value when it is changed by the end user by clicking a specific day or the Today link available within the displayed month calendar:
    
    settings.defaultTimeOfDay = 8 * 60 * 60 * 1000; // 8 AM
    
                                        
  • inputClass, inputStyle: CSS class and/or inline style to apply to the input element managing the date value within the control;
  • popupClass, popupStyle: CSS class and/or inline style to apply to the popup element displaying the month calendar within the control, when visible;
  • monthYearHeaderClass, monthYearHeaderStyle, dayOfWeekHeaderClass, dayOfWeekHeaderStyle, dayClass, dayStyle, todayLinkClass, todayLinkStyle: CSS classes and/or inline styles to apply to the inner elements of the month calendar within the control;
  • otherMonthDayClass, otherMonthDayStyle: CSS class and/or inline style to supplementary apply to day items in the previous or next months (before and after the currently displayed month) in the control;
  • selectedDayClass, selectedDayStyle: CSS class and/or inline style to supplementary apply to the currently selected day in the month calendar of the control;
  • months, daysOfWeek: Names of the months and of the days of the week to use at presentation time:
    
    settings.months     = [ 'M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12' ];
    settings.daysOfWeek = [ 'D0', 'D1', 'D2', 'D3', 'D4', 'D5', 'D6' ];
    
                                        
  • todayString: The text of the Today link; by default it is set to English "Today";
  • dateTimeFormatter(dateTime): text, dateTimeParser(text): dateTime: Functions that accept date or text parameters and return text or date values, used to convert date and time values to text values, and to parse text values as date and time values whenever needed within the control; the functions may be provided by the developer for further customization and/or localization purposes; by default they are initialized to a set of internally defined functions that consider a culture invariant date and time formatting: MM/dd/yyyy HH:mm:
    
    settings.dateTimeFormatter = function (dateTime) { return dateTime.toString(); };
    settings.dateTimeParser    = function (text)     { return new Date(text); };
    
                                        
  • displayedDateChangeHandler(displayedDate), selectedDateChangeHandler(selectedDate): Functions called whenever the displayed month or selected date are changed in the month calendar of the control, when visible, providing the selected date value that triggered the change, or the first or last day of the next or previous month when the month changed from the previous or next month internal buttons, specified as parameter;
  • dropDownOpenedHandler(), dropDownClosedHandler(): Functions called whenever the drop down is opened (popup element shown) or closed (popup element hidden) in the control;
  • valueChangeHandler(value): Function called whenever the date value changes within the control, providing it specified as parameter:
    
    settings.valueChangeHandler = function (value) {
        alert('Value changed to ' + value.toDateString() + '.');
    }
    
                                        
  • monthRows, monthColumns: Indicate how many month rows and columns are displayed; by default their values are set to 1; when set to values higher than 1, some component features may be disabled, tough:
    
    settings.monthRows    = 4;
    settings.monthColumns = 3;
    
                                        
  • monthCellSpacing, monthCellClass, monthCellStyle, applyMonthStyleForSingleCell, applyNextMonthButtonToLastColumn, applyNextMonthButtonToLastRow: Establish further settings for calendar month cells displayed in the view;
  • disabledDateSelector(date): Function called for each displayed date to determine whether it should be disabled in the view;
    
    settings.disabledDateSelector = function(date) { return date.getDay() == 6; }
    
                                        
  • disabledDayClass, disabledDayStyle: Allow customizing the user interface for disabled days in the view;
  • minValue: The minimum date that the control may navigate to and select;
  • highlightingClassSelector(date), highlightingStyleSelector(date): Functions called for each displayed date to determine the CSS class and style to apply to its element in the view;
  • openDropDownOnInputClick: Indicates whether the drop down should open when clicking inside the input element (and no value change has occured since focusing);
  • calendarSelectorLevels: Indicates the number of supplemental calendar selector levels to display when clicking calendar headers; supported values: 1: month; 2: + year; 3: + decade:
    
    // Display month and year selector levels, showing the current year or decade
    // and allowing selecting another month or year when clicking the month or year header in the views:
    // Setting a value of 3 would also display a third decade selector level, showing the current century 
    // and allowing selecting another decade when clicking on the decade header in the year view.
    settings.calendarSelectorLevels = 2;
    
                                        
  • calendarSelectorPopupClass, calendarSelectorPopupStyles: Popup CSS class and style to apply when displaying supplemental calendar selectors; by default, the values defined by popupClass and popupStyle are used.

The component may be initialized using an initialize method call, and could also be obtained later using a get method call; datePickerElement host may be a span, div, or input element of the HTML document:


var datePicker = DlhSoft.Controls.DatePicker.initialize(datePickerElement, value, settings);
var datePicker = DlhSoft.Controls.DatePicker.get(datePickerElement);

                            

The initialized control element provides the following API:

  • value: Provides access to the current value of the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(), refreshValue(): Update the entire user interface or specific features of the user interface considering all external date value and settings changes;
  • getValue(): value, setValue(value): Get and set the date value of the control;
  • setDisplayedValue(displayedDate): Sets the displayed date in the control, indicating the first displayed month in the view;
  • isOpen: Provides access to a value indicating whether the drop down is opened (popup element is shown) in the control;
  • openDropDown(), closeDropDown(): Open and set the drop down (popup element) of the control;
  • isInitialized: Verifies that the component instance has been successfully initialized.

TimePicker

TimePicker control is used to present and select a time of day value using a calendar day time sheet displayed upon focusing its input element or when clicking an associated drop down button. The value must be of number type (in milliseconds since midnight of the day):


var value = 14 * 60 * 60 * 1000; // 2 PM

                            

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • theme: Name of the internal theme to generically apply to the control; Modern and Standard themes are supported; by default it is Modern:
    
    settings.theme = 'Standard';
    
                                        
  • isReadOnly: Indicates whether the control is read only:
    
    settings.isReadOnly = true;
    
                                        
  • isNullValueAccepted: Indicates whether an undefined or null value is accepted and represented as an empty string in the input element of the control;
  • isDropDownButtonVisible: Indicates whether a drop down button is appended to the user interface to the right side of the input element of the control; by default it is set to false;
  • dropDownButtonDefinition: Provides HTML to define the drop down button displayed by the control when isDropDownButtonVisible is set to true; by default it is set to an inline SVG image representing a clock;
  • header, isHeaderVisible: The displayed header text and its visibility setting;
  • isNowLinkVisible: Indicates whether a Now link that would change the displayed month to the current time when clicked is visible at the bottom of the calendar day time sheet of the control; by default it is set to true;
  • defaultPrefix: An optional displayed prefix text for the input value, such as a string representing a date; the prefix is separated from the time value by a space (last space within the value string);
  • inputClass, inputStyle: CSS class and/or inline style to apply to the input element managing the time value within the control;
  • popupClass, popupStyle: CSS class and/or inline style to apply to the popup element displaying the calendar day time sheet within the control, when visible;
  • headerClass, headerStyle, timeClass, timeStyle, nowLinkClass, nowLinkStyle: CSS classes and/or inline styles to apply to the inner elements of the calendar day time sheet within the control;
  • selectedTimeClass, selectedTimeStyle: CSS class and/or inline style to supplementary apply to the currently selected time in the calendar day time sheet of the control;
  • nowString: The text of the Now link; by default it is set to English "Now";
  • timeFormatter(time): text, timeParser(text): time: Functions that accept time numbers (in milliseconds) or text parameters and return text or time number (in milliseconds) values, used to convert time values to text values, and to parse text values as time values whenever needed within the control; the functions may be provided by the developer for further customization and/or localization purposes; by default they are initialized to a set of internally defined functions that consider a culture invariant date and time formatting: HH:mm;
  • dropDownOpenedHandler(), dropDownClosedHandler(): Functions called whenever the drop down is opened (popup element shown) or closed (popup element hidden) in the control;
  • valueChangeHandler(value): Function called whenever the time value changes within the control, providing it specified as parameter:
    
    settings.valueChangeHandler = function (value) {
        alert('Value changed to ' + value + ' (milliseconds).');
    }
    
                                        
  • hourDivisions: Indicates the number of times to display for each hour of the day; by default it is set to 2, displaying :00 and :30 minute times of each hour:
    
    settings.hourDivisions = 4; // Display quarters.
    
                                        
  • hourColumns: Indicates the number of columns to display for the shown times of day; by default it is set to 4, displaying these time of day intervals: 0 - 6, 6 - 12, 12 - 18, 18 - 24:
    
    settings.hourColumns = 2; // Display AM and PM hours side by side.
    
                                        
  • scrollingHeight: Specifies the maximum height to use for the time sheet before enabling scrolling; by default it is set to auto, but if you use a large value for hourDivisions and/or a low value for hourColumns you may want to set it to an appropriate value:
    
    settings.scrollingHeight = '160px'; // Enable scrolling.
    
                                        
  • disabledTimeSelector(time): Function called for each displayed time to determine whether it should be disabled in the view;
    
    settings.disabledTimeSelector = function(time) { return time < 5 * 60 * 60 * 1000; } // 5 AM
    
                                        
  • disabledTimeClass, disabledTimeStyle: Allow customizing the user interface for disabled times in the view;
  • highlightingClassSelector(date), highlightingStyleSelector(date): Functions called for each displayed time to determine the CSS class and style to apply to its element in the view;
  • openDropDownOnInputClick: Indicates whether the drop down should open when clicking inside the input element (and no value change has occured since focusing).

The component may be initialized using an initialize method call, and could also be obtained later using a get method call; timePickerElement host may be a span, div, or input element of the HTML document:


var timePicker = DlhSoft.Controls.TimePicker.initialize(timePickerElement, value, settings);
var timePicker = DlhSoft.Controls.TimePicker.get(timePickerElement);

                            

The initialized control element provides the following API:

  • value: Provides access to the current value of the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(), refreshValue(): Update the entire user interface or specific features of the user interface considering all external time value and settings changes;
  • getValue(): value, setValue(value): Get and set the time value of the control (in milliseconds since midnight);
  • isOpen: Provides access to a value indicating whether the drop down is opened (popup element is shown) in the control;
  • openDropDown(), closeDropDown(): Open and set the drop down (popup element) of the control;
  • isInitialized: Verifies that the component instance has been successfully initialized.

DateTimePicker

DateTimePicker control is used to present and select a date and time value using a month calendar displayed upon focusing its input element or when clicking on the date part of the value, and using a calendar day time sheet displaying upon cliking the input element on the time part of the value, or when clicking two associated drop down buttons. It is an extension for and licensed as a DatePicker control. The value must be of Date type:


var value = new Date();

                            

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • theme: Name of the internal theme to generically apply to the control; Modern and Standard themes are supported; by default it is Modern:
    
    settings.theme = 'Standard';
    
                                        
  • isReadOnly: Indicates whether the control is read only:
    
    settings.isReadOnly = true;
    
                                        
  • isNullValueAccepted: Indicates whether an undefined or null value is accepted and represented as an empty string in the input element of the control;
  • areDropDownButtonsVisible: Indicates whether drop down buttons are appended to the user interface to the right side of the input element of the control; by default it is set to false;
  • areCurrentLinksVisible: Indicates whether Today and Now links are visible at the bottom of the month calendar or calendar day time sheet of the control; by default it is set to true;
  • defaultTimeOfDay: A numeric value indicating milliseconds since midnight that would to be set as the time of day to the selected date value when it is changed by the end user by clicking a specific day or the Today link available within the displayed month calendar:
    
    settings.defaultTimeOfDay = 8 * 60 * 60 * 1000; // 8 AM
    
                                        
  • inputClass, inputStyle: CSS class and/or inline style to apply to the input element managing the date and time value within the control;
  • popupClass, popupStyle: CSS class and/or inline style to apply to the popup elements displaying the month calendar and the calendar day time sheet within the control, when visible;
  • months, daysOfWeek: Names of the months and of the days of the week to use at presentation time:
    
    settings.months     = [ 'M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12' ];
    settings.daysOfWeek = [ 'D0', 'D1', 'D2', 'D3', 'D4', 'D5', 'D6' ];
    
                                        
  • dateTimeFormatter(dateTime): text, dateTimeParser(text): dateTime: Functions that accept date or text parameters and return text or date values, used to convert date and time values to text values, and to parse text values as date and time values whenever needed within the control; the functions may be provided by the developer for further customization and/or localization purposes; by default they are initialized to a set of internally defined functions that consider a culture invariant date and time formatting: MM/dd/yyyy HH:mm;
  • displayedDateChangeHandler(displayedDate), selectedDateChangeHandler(selectedDate): Functions called whenever the displayed month or selected date are changed in the month calendar of the control, when visible, providing the selected date value that triggered the change, or the first or last day of the next or previous month when the month changed from the previous or next month internal buttons, specified as parameter;
  • valueChangeHandler(value): Function called whenever the date value changes within the control, providing it specified as parameter:
    
    settings.valueChangeHandler = function (value) {
        alert('Value changed to ' + value.toDateString() + '.');
    }
    
                                        
  • disabledDateSelector(date): Function called for each displayed date to determine whether it should be disabled in the view;
    
    settings.disabledDateSelector = function(date) { return date.getDay() == 6; }
    
                                        
  • disabledTimeSelector(time): Function called for each displayed time (in millseconds since midnight) to determine whether it should be disabled in the view;
    
    settings.disabledTimeSelector = function(time) { return time < 5 * 60 * 60 * 1000; } // 5 AM
    
                                        
  • openDropDownOnInputClick: Indicates whether an appropriate drop down should open when clicking inside the input element (and no value change has occured since focusing), depending on the currently selected date and time value part of the input;
  • calendarSelectorLevels: Indicates the number of supplemental calendar selector levels to display when clicking calendar headers; supported values: 1: month; 2: + year; 3: + decade:
    
    // Display month and year selector levels, showing the current year or decade 
    // and allowing selecting another month or year when clicking the month or year header in the views:
    // Setting a value of 3 would also display a third decade selector level, showing the current century 
    // and allowing selecting another decade when clicking on the decade header in the year view.
    settings.calendarSelectorLevels = 2;
    
                                        
  • datePickerSettings, timePickerSettings: Provide supplemental settings for DatePicker and TimePicker control parts of the current component instance.

The component may be initialized using an initialize method call, and could also be obtained later using a get method call; dateTimePickerElement host may be a span, div, or input element of the HTML document:


var dateTimePicker = DlhSoft.Controls.DateTimePicker.initialize(dateTimePickerElement, value, settings);
var dateTimePicker = DlhSoft.Controls.DateTimePicker.get(dateTimePickerElement);

                            

The initialized control element provides the following API:

  • value: Provides access to the current value of the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refreshValue(): Updates the value features of the user interface considering all external date value changes;
  • getValue(): value, setValue(value): Get and set the date and time value of the control;
  • getTimeValue(): value, setTimeValue(value): Get and set the time value of the control (in milliseconds since midnight);
  • isOpen: Provides access to a value indicating whether the date drop down is opened (popup element is shown) in the control;
  • openDropDown(), closeDropDown(): Open and set the date drop down (popup element) of the control;
  • isTimeOpen: Provides access to a value indicating whether the time drop down is opened (popup element is shown) in the control;
  • openTimeDropDown(), closeTimeDropDown(): Open and set the time drop down (popup element) of the control;
  • getCurrentValuePart(): Returns "Date" or "Time" to indicate which date and time value part is currently selected in the input element of the control;
  • isInitialized: Verifies that the component instance has been successfully initialized.

MultiSelectorComboBox

MultiSelectorComboBox control is used to present and construct an aggregated text value using a list of choice check boxes displayed upon focusing its input element or when clicking an associated drop down button. The available choices and the resulting value must be of string type (aggregated text would use separator characters, such as comma, to separate parts, and special characters, such as brackets, may also introduce excluded content for any of the parts, if needed):


var availableChoices = ['Value 1', 'Value 2', 'Value 3'];
var value = 'Value 1 [details], Value 2';

                            

The control supports specific settings passed as an argument object to the initialize method call; the settings object supports these properties:

  • theme: Name of the internal theme to generically apply to the control; Modern and Standard themes are supported; by default it is Modern:
    
    settings.theme = 'Standard';
    
                                        
  • isReadOnly: Indicates whether the control is read only:
    
    settings.isReadOnly = true;
    
                                        
  • autoAppendAvailableChoices: Indicates whether new choice values entered by the end user using the input element of the control are automatically appended to the available choices collection; by default it is set to false;
  • isDropDownButtonVisible: Indicates whether a drop down button is appended to the user interface to the right side of the input element of the control; by default it is set to false;
  • dropDownButtonDefinition: Provides HTML to define the drop down button displayed by the control when isDropDownButtonVisible is set to true; by default it is set to a value generating a simple button based on a triangle arrow character oriented towards the bottom of the screen;
  • separator: Indicates the separator string used to identify parts in the aggregated value of the control; by default it is set to a comma (",");
  • isSpaceSeparated: Indicates whether aggregated value will have space characters after each separator in the control; by default it is set to true;
  • delimiters: Optional array of delimiter characters for aggregated value parts to ignore during choice value comparisons; by default it is set to an array containing only the left bracket ("["]);
  • inputClass, inputStyle: CSS class and/or inline style to apply to the input element managing the aggregated value within the control;
  • popupClass, popupStyle: CSS class and/or inline style to apply to the popup element displaying the available choices as a check box list within the control, when visible;
  • choiceClass, choiceStyle: CSS class and/or inline style to apply to each element displaying one of the available choices within the control, when visible;
  • selectedChoiceClass, selectedChoiceStyle: CSS class and/or inline style to apply to each element displaying one of the selected choices within the control, when visible;
  • areCheckBoxesVisible: Indicates whether check boxes are displayed in the popup; if set to false, the choices will still be displayed as clickable labels, but the end user could not select more than one value, similarly to using a standard combo box; provided in order to be able to simmulate an auto-complete text box using the same type of user interface when required in a custom application; by default it is set to true;
  • dropDownOpenedHandler(), dropDownClosedHandler(): Functions called whenever the drop down is opened (popup element shown) or closed (popup element hidden) in the control;
  • valueChangeHandler(value): Function called whenever the aggregated value changes within the control, providing it specified as parameter:
    
    settings.valueChangeHandler = function (value) {
        alert('Value changed to ' + value + '.');
    }
    
                                        
  • openDropDownOnInputClick: Indicates whether the drop down should open when clicking inside the input element (and no value change has occured since focusing).

The component may be initialized using an initialize method call, and could also be obtained later using a get method call; multiSelectorComboBoxElement host may be a span, div, or input element of the HTML document:


var multiSelectorComboBox = DlhSoft.Controls.MultiSelectorComboBox.initialize(multiSelectorComboBoxElement, availableChoices, value, settings);
var multiSelectorComboBox = DlhSoft.Controls.MultiSelectorComboBox.get(multiSelectorComboBoxElement);

                            

The initialized control element provides the following API:

  • availableChoices: Provides access to the available choice values of the control;
  • value: Provides access to the current value of the control;
  • settings: Provides access to the settings object used to initialize the control;
  • refresh(), refreshAvailableChoices(), refreshSelectedChoices(), refreshValue(): Update the entire user interface or specific features of the user interface considering all external aggregated value and settings changes;
  • getSelectedChoices(availableOnly): Enumerates the selected choices specified in the current aggregated value control to an output array, optionally limiting them to those indicated by availableChoices;
  • selectChoice(choice), unselectChoice(choice): Select or unselect a specific choice in the control, updating the aggregated value accordingly;
  • getValue(): value, setValue(value): Get and set the aggregated value of the control;
  • isOpen: Provides access to a value indicating whether the drop down is opened (popup element is shown) in the control;
  • openDropDown(), closeDropDown(): Open and set the drop down (popup element) of the control;
  • isInitialized: Verifies that the component instance has been successfully initialized.