GanttChart API

GanttChart Javascript API

Class

GanttChart

Gantt charts are specialized bar charts that help clearly represent how tasks and resources are allocated over time in planning, project management, and scheduling applications.

Selector

smart-gantt-chart

Properties

Events

Methods

Properties

autoScheduleboolean

Recalculates the tasks that are connected and re-schedules them according to their connections. If no connections are present, autoScheduling has no effect until a connection is created. Connection types determines the start/end date limits of the tasks.

Default value

false

Example

Set the autoSchedule property.

 <smart-gantt-chart auto-schedule></smart-gantt-chart>

Set the autoSchedule property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.autoSchedule = false;

Get the autoSchedule property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let autoSchedule = ganttchart.autoSchedule;

autoScheduleStrictModeboolean

Affects the tasks only when autoSchedule is enabled. When set to true, the tasks are strictly scheduled ( according to their connections ) and dragging is not allowed.
Users can set lag to specific connections to determine a delay of overlap of between the two tasks ( interval of time in miliseconds ). Lag one of the attributes of a task connection and should be set in the dataSource where the task connections are defined.

Default value

false

Example

Set the autoScheduleStrictMode property.

 <smart-gantt-chart auto-schedule-strict-mode></smart-gantt-chart>

Set the autoScheduleStrictMode property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.autoScheduleStrictMode = false;

Get the autoScheduleStrictMode property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let autoScheduleStrictMode = ganttchart.autoScheduleStrictMode;

autoScrollStepnumber

Determines the scroll speed when dragging when autoScroll property is set.

Default value

5

Example

Set the autoScrollStep property.

 <smart-gantt-chart auto-scroll-step='5'></smart-gantt-chart>

Set the autoScrollStep property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.autoScrollStep = 10;

Get the autoScrollStep property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let autoScrollStep = ganttchart.autoScrollStep;

dataExportobject

Sets the GanttChart's Data Export options.

headerboolean

Sets whether the columns header will be exported.

Default value

true

Get the header property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let header = ganttchart.dataExport.header;

styleobject

Sets a custom style object of the dataExport.

Get the style property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let style = ganttchart.dataExport.style;

fileNamestring

Sets the exported file's name.

Default value

"smartGanttChart"

Get the fileName property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let fileName = ganttchart.dataExport.fileName;

itemType"task" | "resource"

Determines the type of items that is going to be exported.

Default value

"task"

Get the itemType property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let itemType = ganttchart.dataExport.itemType;

pageOrientationstring

Sets the page orientation, when exporting to PDF.

Default value

"portrait"

Get the pageOrientation property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let pageOrientation = ganttchart.dataExport.pageOrientation;

expandCharstring

Sets the expand char displayed for the Project tasks when GanttChart exported.

Default value

"+"

Get the expandChar property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let expandChar = ganttchart.dataExport.expandChar;

collapseCharstring

Sets the collapse char displayed for the Project tasks when GanttChart is exported.

Default value

"-"

Get the collapseChar property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let collapseChar = ganttchart.dataExport.collapseChar;

dataSource{label: string, dateStart: string | Date, dateEnd: string | Date, expanded: boolean, progress: number, tasks: [], type: string}[]

Determines the tasks that will be loaded inside the Timeline. Each item represents an object that should contain the following properties:

  • label - the label of the Task
  • dateStart - the starting date of the Task. Should be a string representing a valid date.
  • dateEnd - the ending date of the Task. Should be a string representing a valid date.
  • type - determines the type of the task. Whether it's a simple task, a project or a milestone. Each type of task has specific behavior and additional attributes.
.
Additional properties:
  • connections - an array of objects representing the connection between two tasks. Each connection (object) should have the following properties :
    • target - a number representing the index of the target task
    • type - a number representing the type of the connection. Four types of connections are available:
      • 0 - is a connection of type Start-to-Start
      • 1 - is a connection of type End-to-Start
      • 2 - is a connection of type End-to-End
      • 3 - is a connection of type Start-to-End
    • lag - a number that determines the delay between two connected auto scheduled tasks. Lag property can be a positive or a negative number. When negative it determines the overlap between two connected tasks. This property is used in conjuction with autoSchedule.
  • duration - determines the duration of a Task in days, hours, minutes, seconds or miliseconds. Very usefull when the the dateEnd of a Task is unknown.
  • minDuration - sets the minimum duration of a task.
  • maxDuration - sets the maximum duration of a task.
  • minDateStart - determines the mininum date that a task can start from. Must be if type string and should represent a valid date.
  • maxDateStart - determines the maximum date that a task can start from. Must be if type string and should represent a valid date.
  • minDateEnd - determines the mininum date that a task can end. Must be if type string and should represent a valid date.
  • maxDateEnd - determines the maximum date that a task can end. Must be if type string and should represent a valid date.
  • progress - a number that determines the progress of a task ( from 0 to 100 ).
  • disableDrag - a boolean property that disables the dragging of a task when set to true.
  • disableResize - a boolean property that disables the resizing of a task when set to true.
  • dragProject - a boolean that determines whether or not the whole project (along with the tasks) can be dragged while dragging the project task. Applicalbe only to Projects.
  • synchronized - a boolean that if set the project task's start/end dates are automatically calculated based on the tasks. By default a synchronized project task can't be dragged alone. Applicable only to Project tasks.
  • expanded - a boolean that determines if a project is expanded or not. If not all of it's sub-tasks are not visible. Only the project task itself is visible. By default no projects are expanded. Applicable only to project tasks..

connectionsGanttChartTaskConnection[]

Tasks connection.

Default value

null

Properties

targetstring | number

Task's connection target.

Default value

0

Get the target property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let target = ganttchart.dataSource.connections[0].target;

typenumber

Task's connection type.

Default value

0

Get the type property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let type = ganttchart.dataSource.connections[0].type;

Get the connections property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let connections = ganttchart.dataSource.connections;

classstring

Project, Task or Milestone CSS class.

Default value

""

Get the class property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let class = ganttchart.dataSource.class;

dateStartstring | Date

Project, Task or Milestone start date.

Default value

""

Get the dateStart property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dateStart = ganttchart.dataSource.dateStart;

dateEndstring | Date

Project, Task or Milestone end date.

Default value

""

Get the dateEnd property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dateEnd = ganttchart.dataSource.dateEnd;

disableResourcesboolean

Disable the resources for Project, Task or Milestone.

Default value

false

Get the disableResources property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableResources = ganttchart.dataSource.disableResources;

disableDragboolean

Project, Task or Milestone dragging is disabled.

Default value

false

Get the disableDrag property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableDrag = ganttchart.dataSource.disableDrag;

disableResizeboolean

Project, Task or Milestone resizing is disabled.

Default value

false

Get the disableResize property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableResize = ganttchart.dataSource.disableResize;

dragProjectboolean

Project, Task or Milestone drag enabled in the view.

Default value

true

Get the dragProject property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dragProject = ganttchart.dataSource.dragProject;

expandedboolean

Project, Task or Milestone expanded state in the view.

Default value

false

Get the expanded property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let expanded = ganttchart.dataSource.expanded;

idstring | null

Project, Task or Milestone id.

Default value

""

Get the id property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let id = ganttchart.dataSource.id;

labelstring | null

Project, Task or Milestone label.

Default value

""

Get the label property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let label = ganttchart.dataSource.label;

formatFunctionany

Project, Task or Milestone format function.

Get the formatFunction property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let formatFunction = ganttchart.dataSource.formatFunction;

minDateStartstring | Date

Project, Task or Milestone min start date.

Default value

""

Get the minDateStart property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let minDateStart = ganttchart.dataSource.minDateStart;

maxDateEndstring | Date

Project, Task or Milestone max end date.

Default value

""

Get the maxDateEnd property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let maxDateEnd = ganttchart.dataSource.maxDateEnd;

progressnumber

Project, Task or Milestone progress.

Default value

0

Get the progress property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let progress = ganttchart.dataSource.progress;

resources{id: string, capacity: number, label: string, value: string, maxCapacity: number, type: string}[]

Project, Task or Milestone resources

Default value

null

capacitynumber

The capacity of a resource. By default it is used to determines the working capacity ( in hours ) of the resource.

Default value

8

Get the capacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let capacity = ganttchart.dataSource.resources[0].capacity;

idstring

Resource id. The unique id of the resource.

Default value

""

Get the id property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let id = ganttchart.dataSource.resources[0].id;

labelstring | null

Resource label.

Default value

0

Get the label property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let label = ganttchart.dataSource.resources[0].label;

minCapacitynumber

Resource min capacity

Default value

0

Get the minCapacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let minCapacity = ganttchart.dataSource.resources[0].minCapacity;

maxCapacitynumber

Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.

Default value

0

Get the maxCapacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let maxCapacity = ganttchart.dataSource.resources[0].maxCapacity;

progressnumber

Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.

Default value

0

Get the progress property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let progress = ganttchart.dataSource.resources[0].progress;

valueany

Resource value.

Default value

""

Get the value property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let value = ganttchart.dataSource.resources[0].value;

hiddenboolean | undefined

Resource visibility.

Default value

false

Get the hidden property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let hidden = ganttchart.dataSource.resources[0].hidden;

workloadstring | number

Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.

Default value

0

Get the workload property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let workload = ganttchart.dataSource.resources[0].workload;

Get the resources property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resources = ganttchart.dataSource.resources;

synchronizedboolean

Project, Task or Milestone synchronized in the view.

Default value

false

Get the synchronized property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let synchronized = ganttchart.dataSource.synchronized;

tasksGanttChartTask[]

Project's tasks.

Get the tasks property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let tasks = ganttchart.dataSource.tasks;

typeGanttChartTaskType

Project, Task or Milestone type. Possible values are 'project' and 'task'

Default value

Get the type property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let type = ganttchart.dataSource.type;

valueany

Project, Task or Milestone value.

Default value

""

Get the value property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let value = ganttchart.dataSource.value;

hiddenboolean | undefined

Project, Task or Milestone value.

Default value

false

Get the hidden property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let hidden = ganttchart.dataSource.hidden;

Example

Set the dataSource property.

 <smart-gantt-chart data-source='{ label: 'Task 3', dateStart: '2018-02-05', dateEnd: '2018-07-08', progress: 50, type: 'task' }'></smart-gantt-chart>

Set the dataSource property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.dataSource =  {  label: 'Task 2', dateStart: '2020-03-10T15:30:00', dateEnd: '2018-08-10', type: 'task' }, { label: 'Milestone 1', dateEnd: '2018-05-24', type: 'milestone', connections: [{target: 5,type: 1 }]}, { label: 'Task 3', dateStart: '2018-02-05', dateEnd: '2018-07-08', progress: 50,  type: 'task' };

Get the dataSource property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dataSource = ganttchart.dataSource;

dayFormat"2-digit" | "numeric" | "long" | "short" | "narrow"

Determines the format of the dates in the timeline header when they represent days.

Default value

"short"

Example

Set the dayFormat property.

 <smart-gantt-chart day-format='numeric'></smart-gantt-chart>

Set the dayFormat property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.dayFormat = 'short';

Get the dayFormat property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dayFormat = ganttchart.dayFormat;

dateEndstring | Date

Determines a specific end date for the Timeline. Usefull when the user wants custom ending date for the Timeline. If no date is set the end date of the timeline is automatically determined from the tasks.

Default value

""

Example

Set the dateEnd property.

 <smart-gantt-chart date-end='new Date(2050,0,1)'></smart-gantt-chart>

Set the dateEnd property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.dateEnd = 2070-1-1;

Get the dateEnd property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dateEnd = ganttchart.dateEnd;

dateStartstring | Date

Determines a specific starting date for the Timeline. Usefull when the user wants custom starting date for the Timeline. If no date is set the start date of the timeline is automatically determined from the tasks.

Default value

""

Example

Set the dateStart property.

 <smart-gantt-chart date-start='new Date(2002,0,1)'></smart-gantt-chart>

Set the dateStart property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.dateStart = 2010-1-1;

Get the dateStart property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dateStart = ganttchart.dateStart;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

 <smart-gantt-chart disabled></smart-gantt-chart>

Set the disabled property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.disabled = false;

Get the disabled property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disabled = ganttchart.disabled;

disableAutoScrollboolean

Disables auto scrolling while dragging/resizing a task bar inside the Timeline.

Default value

false

Example

Set the disableAutoScroll property.

 <smart-gantt-chart disable-auto-scroll></smart-gantt-chart>

Set the disableAutoScroll property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.disableAutoScroll = false;

Get the disableAutoScroll property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableAutoScroll = ganttchart.disableAutoScroll;

disableTaskDragboolean

Disables dragging of tasks in the Timeline.

Default value

false

Example

Set the disableTaskDrag property.

 <smart-gantt-chart disable-task-drag></smart-gantt-chart>

Set the disableTaskDrag property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.disableTaskDrag = false;

Get the disableTaskDrag property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableTaskDrag = ganttchart.disableTaskDrag;

disableTaskProgressChangeboolean

Disables task progress changing in the Timeline.

Default value

false

Example

Set the disableTaskProgressChange property.

 <smart-gantt-chart disable-task-progress-change></smart-gantt-chart>

Set the disableTaskProgressChange property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.disableTaskProgressChange = false;

Get the disableTaskProgressChange property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableTaskProgressChange = ganttchart.disableTaskProgressChange;

disableTaskResizeboolean

Disables resizing of tasks in the Timeline.

Default value

false

Example

Set the disableTaskResize property.

 <smart-gantt-chart disable-task-resize></smart-gantt-chart>

Set the disableTaskResize property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.disableTaskResize = false;

Get the disableTaskResize property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableTaskResize = ganttchart.disableTaskResize;

disableSelectionboolean

Disables the selection inside the GanttChart.

Default value

false

Example

Set the disableSelection property.

 <smart-gantt-chart disable-selection></smart-gantt-chart>

Set the disableSelection property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.disableSelection = false;

Get the disableSelection property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableSelection = ganttchart.disableSelection;

disableWindowEditorboolean

Disables the window editor for the GanttChart.

Default value

false

Example

Set the disableWindowEditor property.

 <smart-gantt-chart disable-window-editor></smart-gantt-chart>

Set the disableWindowEditor property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.disableWindowEditor = false;

Get the disableWindowEditor property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableWindowEditor = ganttchart.disableWindowEditor;

durationUnit"day" | "hour" | "minute" | "second" | "milisecond"

Determines in what unit is task duration property measured.

Default value

"milisecond"

Example

Set the durationUnit property.

 <smart-gantt-chart duration-unit='day'></smart-gantt-chart>

Set the durationUnit property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.durationUnit = 'hour';

Get the durationUnit property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let durationUnit = ganttchart.durationUnit;

headerTemplateany

Allows to create a custom header content for the Task Panel. The attribute accepts an HTMLTemplate element, it's id or a function.

Example

Set the headerTemplate property.

 <smart-gantt-chart header-template='headerTemplate'></smart-gantt-chart>

Set the headerTemplate property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.headerTemplate = headerTemplate2;

Get the headerTemplate property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let headerTemplate = ganttchart.headerTemplate;

hideResourcePanelboolean

Hides the Resource panel regardless of the resources availability By default the Resource panel is visible if resources are added to the GanttChart. This property allows to hide the Resource panel permanently.

Default value

false

Example

Set the hideResourcePanel property.

 <smart-gantt-chart hide-resource-panel></smart-gantt-chart>

Set the hideResourcePanel property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.hideResourcePanel = false;

Get the hideResourcePanel property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let hideResourcePanel = ganttchart.hideResourcePanel;

horizontalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Determines weather or not horizontal scrollbar is shown.

Default value

"auto"

Example

Set the horizontalScrollBarVisibility property.

 <smart-gantt-chart horizontal-scroll-bar-visibility='disabled'></smart-gantt-chart>

Set the horizontalScrollBarVisibility property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.horizontalScrollBarVisibility = 'hidden';

Get the horizontalScrollBarVisibility property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let horizontalScrollBarVisibility = ganttchart.horizontalScrollBarVisibility;

hourFormat"default" | "2-digit" | "numeric"

Determines the format of the dates inside the timeline header when they represent hours.

Default value

"numeric"

Example

Set the hourFormat property.

 <smart-gantt-chart hour-format='2-digit'></smart-gantt-chart>

Set the hourFormat property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.hourFormat = 'default';

Get the hourFormat property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let hourFormat = ganttchart.hourFormat;

invertedboolean

When set the Timeline is positioned on the left side while the Task Tree is positioned on the right. By default it's vice versa.

Default value

false

Example

Set the inverted property.

 <smart-gantt-chart inverted></smart-gantt-chart>

Set the inverted property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.inverted = false;

Get the inverted property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let inverted = ganttchart.inverted;

localestring

Determines the language of the GanttChart.

Default value

"en"

Example

Set the locale property.

 <smart-gantt-chart locale='de'></smart-gantt-chart>

Set the locale property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.locale = 'en';

Get the locale property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let locale = ganttchart.locale;

maxany

Detetmines the maximum possible date of the Timeline.

Default value

2100-1-1

Example

Set the max property.

 <smart-gantt-chart max='2020-1-1'></smart-gantt-chart>

Set the max property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.max = 2025-12-31;

Get the max property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let max = ganttchart.max;

minany

Detetmines the minimum possible date of the Timeline.

Default value

1900-1-1

Example

Set the min property.

 <smart-gantt-chart min='2000-1-1'></smart-gantt-chart>

Set the min property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.min = 2005-12-31;

Get the min property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let min = ganttchart.min;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




Example

Set the messages property.

 <smart-gantt-chart messages='{"de":{"incorrectArgument":"Falsches Argument '{{argumentName}}' in der Methode {{methodName}}.","outOfBounds":"Unbegrenztes Argument {{argumentName}} in der Methode {{methodName}}."}}'></smart-gantt-chart>

Set the messages property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.messages = {"en":{"incorrectArgument":"{{elementType}}: Incorrect argument {{argumentName}} in method {{methodName}}.","outOfBounds":"{{elementType}}: Out of bounds argument {{argumentName}} in method {{methodName}}."}};

Get the messages property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let messages = ganttchart.messages;

monthFormat"2-digit" | "numeric" | "long" | "short" | "narrow"

Determines the format of the dates the timeline header when they represent months.

Default value

"short"

Example

Set the monthFormat property.

 <smart-gantt-chart month-format='numeric'></smart-gantt-chart>

Set the monthFormat property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.monthFormat = 'short';

Get the monthFormat property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let monthFormat = ganttchart.monthFormat;

nonworkingDaysnumber[]

Determines the nonworking days of the week from 0 to 6, where 0 is the first day of the week and 6 is the last day. Nonworking days will be displayed with colored cells inside the timeline and will be ignored during task range calculations.

Example

Set the nonworkingDays property.

 <smart-gantt-chart nonworking-days='[0,1]'></smart-gantt-chart>

Set the nonworkingDays property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.nonworkingDays = [0,5,6];

Get the nonworkingDays property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let nonworkingDays = ganttchart.nonworkingDays;

nonworkingHoursnumber[]

Determines the nonworking hours of a day. Hours are represented as numbers inside an array. In the timline the cells that represent nonworking days are colored differently from the rest.

Example

Set the nonworkingHours property.

 <smart-gantt-chart nonworking-hours='[0, 1, 2, 3, 4, 5, 6]'></smart-gantt-chart>

Set the nonworkingHours property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.nonworkingHours = [22, 23, 0, 1, 2, 3, 4, 5, 6];

Get the nonworkingHours property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let nonworkingHours = ganttchart.nonworkingHours;

popupWindowCustomizationFunctionfunction | null

A function that can be used to completly customize the popup Window that is used to interact width tasks by changing their properties. The function as three arguments:

  • target - the target popup Window that is about to be opened.
  • type - the type of the window. The type determines the purpose of the window. Three possible values: 'task' (task editing), 'confirm' ( confirmation window), 'connection' (used when deleting a connection between tasks).
  • taskIndex - the index of the task that is being edited. It will be undefined if the type of the window is not 'task'.

Example

Set the popupWindowCustomizationFunction property.

 <smart-gantt-chart popup-window-customization-function='null'></smart-gantt-chart>

Set the popupWindowCustomizationFunction property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.popupWindowCustomizationFunction = function(target, type, taskIndex) { if (type === 'task') { target.headerPosition = 'left'; } };

Get the popupWindowCustomizationFunction property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let popupWindowCustomizationFunction = ganttchart.popupWindowCustomizationFunction;

resources{label: string, capacity: number, value: string, workload: number, progress: number, id: string, progress: number, workload: number, class: string }[]

A getter that returns a flat structure as an array of all resources inside the element.

Default value

null

assignedToGanttChartTask[]

An array of the tasks that the resources is assigned to.

Default value

[]

Get the assignedTo property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let assignedTo = ganttchart.resources[0].assignedTo;

classstring

Resource class. Used to style the resource Timeline.

Default value

""

Get the class property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let class = ganttchart.resources[0].class;

capacitynumber

The capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.

Default value

8

Get the capacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let capacity = ganttchart.resources[0].capacity;

idstring

Resource id. The unique id of the resource.

Default value

""

Get the id property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let id = ganttchart.resources[0].id;

labelstring | null

Resource label.

Default value

0

Get the label property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let label = ganttchart.resources[0].label;

minCapacitynumber

Resource min capacity

Default value

0

Get the minCapacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let minCapacity = ganttchart.resources[0].minCapacity;

maxCapacitynumber

Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.

Default value

0

Get the maxCapacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let maxCapacity = ganttchart.resources[0].maxCapacity;

progressnumber

Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.

Default value

0

Get the progress property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let progress = ganttchart.resources[0].progress;

valueany

Resource value.

Default value

""

Get the value property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let value = ganttchart.resources[0].value;

workloadstring | number

Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.

Default value

0

Get the workload property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let workload = ganttchart.resources[0].workload;

resourceColumns{label: string, value: string}[]

Deteremines the columns that will be visible in the Resource Tree. Each entry in the value of this property must be of type Object.
It should contain the label and value keys. The value of label determines the column header label inside the Task Tree. The value of value determines the content of the cells in the column.
By default, one column with all resource labels is visible.
Additional properties:

  • formatFunction - a function that allows to customize the content of each record in the column. The function accepts two arguments - the actual label as string that is going to be inserted and the index of the resource. The function must return a string as the new content.
  • min - controls the min size of the column
  • max - controls the max size of the column
  • size - controls the actual size of the column

labelstring | null

Column's label.

Default value

""

Get the label property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let label = ganttchart.resourceColumns[0].label;

valuestring | null

Column's value. The value shold reference an actual resoruce attribute.

Default value

""

Get the value property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let value = ganttchart.resourceColumns[0].value;

minstring | number | null

Column's min size.

Default value

0

Get the min property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let min = ganttchart.resourceColumns[0].min;

sizestring | number | null

Column's size.

Default value

0

Get the size property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let size = ganttchart.resourceColumns[0].size;

formatFunctionany

Column's format function. You can use it to customize the column label's rendering.

Get the formatFunction property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let formatFunction = ganttchart.resourceColumns[0].formatFunction;

Example

Set the resourceColumns property.

 <smart-gantt-chart resource-columns='{ "label": "Task Name", "value": "label" }'></smart-gantt-chart>

Set the resourceColumns property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.resourceColumns = { "label": "Date Start", "value": "dateStart" }, { "label": "Duration", "value": "duration" };

Get the resourceColumns property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resourceColumns = ganttchart.resourceColumns;

resourcePanelHeaderTemplateany

Allows to create a custom header content for the Resource Panel. The attribute accepts an HTMLTemplate element, it's id or a function.

Example

Set the resourcePanelHeaderTemplate property.

 <smart-gantt-chart resource-panel-header-template='resourcePanelTemplate1'></smart-gantt-chart>

Set the resourcePanelHeaderTemplate property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.resourcePanelHeaderTemplate = resourcePanelTemplate2;

Get the resourcePanelHeaderTemplate property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resourcePanelHeaderTemplate = ganttchart.resourcePanelHeaderTemplate;

resourcePanelMinnumber | string

Determines the min size of the Resource Panel.

Default value

100

Example

Set the resourcePanelMin property.

 <smart-gantt-chart resource-panel-min='20%'></smart-gantt-chart>

Set the resourcePanelMin property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.resourcePanelMin = 100px;

Get the resourcePanelMin property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resourcePanelMin = ganttchart.resourcePanelMin;

resourcePanelSizenumber | string

Determines the size of the Resource Panel.

Default value

""

Example

Set the resourcePanelSize property.

 <smart-gantt-chart resource-panel-size='25%'></smart-gantt-chart>

Set the resourcePanelSize property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.resourcePanelSize = 200px;

Get the resourcePanelSize property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resourcePanelSize = ganttchart.resourcePanelSize;

resourcePanelRefreshRatenumber

Determines the refresh rate of the Resource Panel when dragging/resizing/progress changing a Task from the Timeline. This property allows to customize the interval between resource Tree/Timeline refreshes. By default they refresh immediately after a change.

Default value

0

Example

Set the resourcePanelRefreshRate property.

 <smart-gantt-chart resource-panel-refresh-rate='20'></smart-gantt-chart>

Set the resourcePanelRefreshRate property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.resourcePanelRefreshRate = 0;

Get the resourcePanelRefreshRate property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resourcePanelRefreshRate = ganttchart.resourcePanelRefreshRate;

resourceTimelineFormatFunctionany

A callback that can be used to customize the content of the resource Timeline cells. The callback accepts three arguments:

  • taskIndexes - an array of task indexes that are assigned to the resource for the current cell.
  • resourceIndex - the index of the resource.
  • cellDate - the date of the current cell.
This property is used when resourceTimelineView is set to custom. Depending on the resourceTimelineMode, it should return:
  • string - when the resourceTimelineMode is set to 'diagram'.
  • object - when the resourceTimelineMode is set to 'histogram'. The object should have two attributes: capacity and maxCapacity, in order to be visualized as a histogram.
. Another usage of this callback is to customize the timeline resource representation completely if resourceTimelineMode is set to custom.

resourceTimelineMode"diagram" | "histogram" | "custom"

Determines how the capacity of the resources will be visualized inside the resource timeline. By default, the capacity is measured in hours depending on the view property of the element.

Default value

"diagram"

Example

Set the resourceTimelineMode property.

 <smart-gantt-chart resource-timeline-mode='histogram'></smart-gantt-chart>

Set the resourceTimelineMode property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.resourceTimelineMode = 'diagram';

Get the resourceTimelineMode property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resourceTimelineMode = ganttchart.resourceTimelineMode;

resourceTimelineView"hours" | "tasks" | "custom"

Determines how the resources will be displayed inside the resource Timeline.

Default value

"hours"

Example

Set the resourceTimelineView property.

 <smart-gantt-chart resource-timeline-view='hours'></smart-gantt-chart>

Set the resourceTimelineView property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.resourceTimelineView = 'tasks';

Get the resourceTimelineView property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resourceTimelineView = ganttchart.resourceTimelineView;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Example

Set the rightToLeft property.

 <smart-gantt-chart right-to-left></smart-gantt-chart>

Set the rightToLeft property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.rightToLeft = false;

Get the rightToLeft property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let rightToLeft = ganttchart.rightToLeft;

selectedIndexesnumber[]

Determines the selected task(s). If empty no tasks are selected.

Example

Set the selectedIndexes property.

 <smart-gantt-chart selected-indexes='[2]'></smart-gantt-chart>

Set the selectedIndexes property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.selectedIndexes = [0];

Get the selectedIndexes property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let selectedIndexes = ganttchart.selectedIndexes;

snapToNearestboolean

If set the dateStart/dateEnd of the tasks will be coerced to the nearest timeline cell date ( according to the view ). Affects the dragging operation as well.

Default value

false

Example

Set the snapToNearest property.

 <smart-gantt-chart snap-to-nearest></smart-gantt-chart>

Set the snapToNearest property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.snapToNearest = false;

Get the snapToNearest property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let snapToNearest = ganttchart.snapToNearest;

sortableboolean

Determines whether the GanttChart can be sorted or not.

Default value

false
 <smart-gantt-chart sortable></smart-gantt-chart>

sortMode"one" | "many"

Determines whether the GanttChart can be sorted by one or more columns.

Default value

"one"

Example

Set the sortMode property.

 <smart-gantt-chart sort-mode='many'></smart-gantt-chart>

Set the sortMode property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.sortMode = 'one';

Get the sortMode property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let sortMode = ganttchart.sortMode;

tasks{label: string, dateStart: string | Date, dateEnd: string | Date, expanded: boolean, progress: number, type: string}[]

A getter that returns a flat structure as an array of all tasks inside the element.

Default value

null

connectionsGanttChartTaskConnection[]

Tasks connection.

Default value

null

Properties

targetstring | number

Task's connection target.

Default value

0

Get the target property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let target = ganttchart.tasks[0].connections[0].target;

typenumber

Task's connection type.

Default value

0

Get the type property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let type = ganttchart.tasks[0].connections[0].type;

Get the connections property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let connections = ganttchart.tasks[0].connections;

classstring

Project, Task or Milestone CSS class.

Default value

""

Get the class property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let class = ganttchart.tasks[0].class;

dateStartstring | Date

Project, Task or Milestone start date.

Default value

""

Get the dateStart property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dateStart = ganttchart.tasks[0].dateStart;

dateEndstring | Date

Project, Task or Milestone end date.

Default value

""

Get the dateEnd property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dateEnd = ganttchart.tasks[0].dateEnd;

disableResourcesboolean

Project, Task or Milestone with disabled resources.

Default value

false

Get the disableResources property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableResources = ganttchart.tasks[0].disableResources;

disableDragboolean

Project, Task or Milestone dragging is disabled.

Default value

false

Get the disableDrag property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableDrag = ganttchart.tasks[0].disableDrag;

disableResizeboolean

Project, Task or Milestone resizing is disabled.

Default value

false

Get the disableResize property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let disableResize = ganttchart.tasks[0].disableResize;

dragProjectboolean

Project, Task or Milestone drag enabled in the view.

Default value

true

Get the dragProject property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let dragProject = ganttchart.tasks[0].dragProject;

expandedboolean

Project, Task or Milestone expanded state in the view.

Default value

false

Get the expanded property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let expanded = ganttchart.tasks[0].expanded;

idstring | null

Project, Task or Milestone id.

Default value

""

Get the id property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let id = ganttchart.tasks[0].id;

labelstring | null

Project, Task or Milestone label.

Default value

""

Get the label property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let label = ganttchart.tasks[0].label;

formatFunctionany

Project, Task or Milestone format function.

Get the formatFunction property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let formatFunction = ganttchart.tasks[0].formatFunction;

minDateStartstring | Date

Project, Task or Milestone min start date.

Default value

""

Get the minDateStart property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let minDateStart = ganttchart.tasks[0].minDateStart;

maxDateEndstring | Date

Project, Task or Milestone max end date.

Default value

""

Get the maxDateEnd property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let maxDateEnd = ganttchart.tasks[0].maxDateEnd;

progressnumber

Project, Task or Milestone progress.

Default value

0

Get the progress property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let progress = ganttchart.tasks[0].progress;

resourcesGanttChartTaskResource[]

Project, Task or Milestone resources.

Default value

null

capacitynumber

Resource capacity.

Default value

0

Get the capacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let capacity = ganttchart.tasks[0].resources[0].capacity;

formatFunctionany

Resource format function.

Get the formatFunction property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let formatFunction = ganttchart.tasks[0].resources[0].formatFunction;

idstring

Resource id.

Default value

""

Get the id property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let id = ganttchart.tasks[0].resources[0].id;

labelstring | null

Resource label.

Default value

0

Get the label property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let label = ganttchart.tasks[0].resources[0].label;

maxCapacitynumber

Resource max capacity.

Default value

0

Get the maxCapacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let maxCapacity = ganttchart.tasks[0].resources[0].maxCapacity;

minCapacitynumber

Resource min capacity.

Default value

0

Get the minCapacity property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let minCapacity = ganttchart.tasks[0].resources[0].minCapacity;

progressnumber

Resource progress.

Default value

0

Get the progress property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let progress = ganttchart.tasks[0].resources[0].progress;

typeany

Resource type.

Default value

""

Get the type property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let type = ganttchart.tasks[0].resources[0].type;

valueany

Resource value.

Default value

""

Get the value property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let value = ganttchart.tasks[0].resources[0].value;

hiddenboolean | undefined

Resource visibility.

Default value

false

Get the hidden property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let hidden = ganttchart.tasks[0].resources[0].hidden;

workloadstring | number

Resource workload.

Default value

0

Get the workload property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let workload = ganttchart.tasks[0].resources[0].workload;

Get the resources property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let resources = ganttchart.tasks[0].resources;

synchronizedboolean

Project, Task or Milestone synchronized in the view.

Default value

false

Get the synchronized property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let synchronized = ganttchart.tasks[0].synchronized;

tasksGanttChartTask[]

Project's tasks.

Get the tasks property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let tasks = ganttchart.tasks[0].tasks;

type"project" | "milestone" | "task"

Project, Task or Milestone type. Possible values are 'project' and 'task'

Default value

""

Get the type property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let type = ganttchart.tasks[0].type;

valueany

Project, Task or Milestone value.

Default value

""

Get the value property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let value = ganttchart.tasks[0].value;

taskColumns{label: string, value: string}[]

Deteremines the columns that will be visible in the Task Tree. Each entry in the value of this property must be of type Object.
It should contain the label and value keys. The value of label determines the column header label inside the Task Tree. The value of value determines the content of the cells in the column. It should reference a task attribute from the dataSource.
By default, one column with all task labels is visible.
Additional properties:

  • formatFunction - a function that allows to customize the content of each record in the column. The function accepts one argument - the actual label as string that is going to be inserted and must return some content.
  • min - controls the min size of the column
  • max - controls the max size of the column
  • size - controls the actual size of the column
  • customEditor - a callback that can be used to set a custom editor for the column when editing via the window. It accepts two arguments
    • label - the label of the column
    • value - the value of the column.
    The callback must return the editor.
  • setCustomEditorValue - a callback that is used to set the value of the custom editor.
  • getCustomEditorValue - a callback that is used to get the value of the custom editor.

labelstring | null

Column's label.

Default value

""

Get the label property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let label = ganttchart.taskColumns[0].label;

valuestring | null

Column's value.

Default value

""

Get the value property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let value = ganttchart.taskColumns[0].value;

minstring | number | null

Column's min size.

Default value

0

Get the min property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let min = ganttchart.taskColumns[0].min;

rootboolean

Determines whether the column will be the root column of the Task Tree. Root column contains the Tree structure. By default the first column is the root.

Default value

false

Get the root property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let root = ganttchart.taskColumns[0].root;

sizestring | number | null

Column's size.

Default value

0

Get the size property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let size = ganttchart.taskColumns[0].size;

formatFunctionany

Column's format function. You can use it to customize the column label's rendering.

Get the formatFunction property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let formatFunction = ganttchart.taskColumns[0].formatFunction;

Example

Set the taskColumns property.

 <smart-gantt-chart task-columns='{ "label": "Task Name", "value": "label" }'></smart-gantt-chart>

Set the taskColumns property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.taskColumns = { "label": "Date Start", "value": "dateStart" }, { "label": "Duration", "value": "duration" };

Get the taskColumns property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let taskColumns = ganttchart.taskColumns;

taskPanelMinany

Determines the min size of the Task Panel. Used when Resource Panel is visible.

Default value

200

Example

Set the taskPanelMin property.

 <smart-gantt-chart task-panel-min='200'></smart-gantt-chart>

Set the taskPanelMin property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.taskPanelMin = 50%;

Get the taskPanelMin property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let taskPanelMin = ganttchart.taskPanelMin;

taskPanelSizeany

Determines the size of the Task Panel. Used when Resource Panel is visible.

Default value

""

Example

Set the taskPanelSize property.

 <smart-gantt-chart task-panel-size='500'></smart-gantt-chart>

Set the taskPanelSize property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.taskPanelSize = 50%;

Get the taskPanelSize property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let taskPanelSize = ganttchart.taskPanelSize;

timelineMinany

Determines the min width of the timeline.

Default value

200

Example

Set the timelineMin property.

 <smart-gantt-chart timeline-min='150'></smart-gantt-chart>

Set the timelineMin property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.timelineMin = 50%;

Get the timelineMin property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let timelineMin = ganttchart.timelineMin;

treeMinany

Determines the min width of the task tree.

Default value

100

Example

Set the treeMin property.

 <smart-gantt-chart tree-min='200'></smart-gantt-chart>

Set the treeMin property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.treeMin = 300;

Get the treeMin property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let treeMin = ganttchart.treeMin;

treeSizeany

Determines the size(width) of the task tree.

Default value

100

Example

Set the treeSize property.

 <smart-gantt-chart tree-size='50%'></smart-gantt-chart>

Set the treeSize property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.treeSize = 300;

Get the treeSize property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let treeSize = ganttchart.treeSize;

timelineHeaderFormatFunctionfunction | null

A format function for the Header of the Timeline.

Example

Set the timelineHeaderFormatFunction property.

 <smart-gantt-chart timeline-header-format-function='null'></smart-gantt-chart>

Set the timelineHeaderFormatFunction property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.timelineHeaderFormatFunction = function(date, type, isHeaderDetailsContainer) { if (isHeaderDetailsContainer) { return 'Custom Header Function' } else { return date.toDateString() }  };

Get the timelineHeaderFormatFunction property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let timelineHeaderFormatFunction = ganttchart.timelineHeaderFormatFunction;

verticalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Determines weather or not vertical scrollbar is shown.

Default value

"auto"

Example

Set the verticalScrollBarVisibility property.

 <smart-gantt-chart vertical-scroll-bar-visibility='hidden'></smart-gantt-chart>

Set the verticalScrollBarVisibility property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.verticalScrollBarVisibility = 'visible';

Get the verticalScrollBarVisibility property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let verticalScrollBarVisibility = ganttchart.verticalScrollBarVisibility;

view"day" | "week" | "month" | "year" | "resource"

Determines the viewing date range of the timeline. Possible values:

  • day - The timeline show the hours of the day.
  • week - the timeline shows the days of the week.
  • month - the timeline shows the days of the month.
  • year - the timeline shows the months of the year.
  • resource - displays the current tasks by grouping them according to the resources they have assigned. The unassigned tasks will be placed in a separate group called 'Unassigned'.

The timeline has a header section that contains the labels of each cell according to the date inside them. The header is splitted in two sections in order to give a more detailed information of the dates.

Default value

"year"

Example

Set the view property.

 <smart-gantt-chart view='week'></smart-gantt-chart>

Set the view property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.view = 'day';

Get the view property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let view = ganttchart.view;

yearFormat"2-digit" | "numeric"

Determines the format of the dates inside the timeline header when they represent years.

Default value

"numeric"

Example

Set the yearFormat property.

 <smart-gantt-chart year-format='2-digit'></smart-gantt-chart>

Set the yearFormat property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.yearFormat = 'numeric';

Get the yearFormat property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let yearFormat = ganttchart.yearFormat;

weekFormat"long" | "numeric"

Determines the format of the dates inside the timeline header when they represent weeks.

Default value

"long"

Example

Set the weekFormat property.

 <smart-gantt-chart week-format='long'></smart-gantt-chart>

Set the weekFormat property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.weekFormat = 'numeric';

Get the weekFormat property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let weekFormat = ganttchart.weekFormat;

themestring

Sets or gets the element's visual theme.

Default value

""

Example

Set the theme property.

 <smart-gantt-chart theme='material'></smart-gantt-chart>

Set the theme property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.theme = 'material-purple';

Get the theme property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let theme = ganttchart.theme;

unfocusableboolean

Sets or gets if the element can be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-gantt-chart unfocusable></smart-gantt-chart>

Set the unfocusable property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.unfocusable = false;

Get the unfocusable property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let unfocusable = ganttchart.unfocusable;

Events

changeCustomEvent

This event is triggered when a Task is selected/unselected.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.value - The index of the new selected task.
ev.detail.oldValue - The index of the previously selected task.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue;

	// event handling code goes here.
}

progressChangeStartCustomEvent

This event is triggered when the progress of a task bar starts to change as a result of user interaction. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onProgressChangeStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.index - The index of the task which progress is going to be changed.
ev.detail.progress - The progress of the task before it is changed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of progressChangeStart event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('progressChangeStart', function (event) {
    const detail = event.detail,
        index = detail.index,
        progress = detail.progress;

	// event handling code goes here.
}

progressChangeEndCustomEvent

This event is triggered when the progress of a task is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onProgressChangeEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.index - The index of the task which progress is has been changed.
ev.detail.progress - The progress of the task after it was changed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of progressChangeEnd event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('progressChangeEnd', function (event) {
    const detail = event.detail,
        index = detail.index,
        progress = detail.progress;

	// event handling code goes here.
}

dragStartCustomEvent

This event is triggered when dragging of a task starts. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.index - The index of the task that is going to be dragged.
ev.detail.dateStart - The start date of the task that is going to be dragged.
ev.detail.dateEnd - The end date of the task that is going to be dragged.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragStart event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        index = detail.index,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd;

	// event handling code goes here.
}

dragEndCustomEvent

This event is triggered when dragging of a task finishes.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.index - The index of the task that is was dragged.
ev.detail.dateStart - The start date of the task that is was dragged.
ev.detail.dateEnd - The end date of the task that is was dragged.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragEnd event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('dragEnd', function (event) {
    const detail = event.detail,
        index = detail.index,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd;

	// event handling code goes here.
}

resizeStartCustomEvent

This event is triggered when resizing of a task starts. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onResizeStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.index - The index of the task that is going to be resized.
ev.detail.dateStart - The start date of the task that is going to be resized.
ev.detail.dateEnd - The end date of the task that is going to be resized.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeStart event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('resizeStart', function (event) {
    const detail = event.detail,
        index = detail.index,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd;

	// event handling code goes here.
}

resizeEndCustomEvent

This event is triggered when the resizing of a task finishes.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onResizeEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.index - The index of the task that was resized.
ev.detail.dateStart - The start date of the task that was resized.
ev.detail.dateEnd - The end date of the task that was resized.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeEnd event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('resizeEnd', function (event) {
    const detail = event.detail,
        index = detail.index,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd;

	// event handling code goes here.
}

connectionStartCustomEvent

This event is triggered when the user starts connecting one task to another. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onConnectionStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.startIndex - The index of the task that a connection is started from.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of connectionStart event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('connectionStart', function (event) {
    const detail = event.detail,
        startIndex = detail.startIndex;

	// event handling code goes here.
}

connectionEndCustomEvent

This event is triggered when the user completes a connection between two tasks.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onConnectionEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.startIndex - The index of the task that a connection is started from.
ev.detail.endIndex - The index of the task that a connection is started from.
ev.detail.type - The type of connection. Fours types are available:
  • 0 - start-to-start
  • 1 - end-to-start
  • 2 - end-to-end
  • 3 - start-to-end

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of connectionEnd event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('connectionEnd', function (event) {
    const detail = event.detail,
        startIndex = detail.startIndex,
        endIndex = detail.endIndex,
        type = detail.type;

	// event handling code goes here.
}

scrollBottomReachedCustomEvent

This event is triggered when the Timeline has been scrolled to the bottom.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onScrollBottomReached

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of scrollBottomReached event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
}

scrollTopReachedCustomEvent

This event is triggered when the Timeline has been scrolled to the top.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onScrollTopReached

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of scrollTopReached event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
}

openingCustomEvent

This event is triggered just before the window for task editing starts opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

Arguments

evCustomEvent
ev.detailObject
ev.detail.target - The instance of the window that is going to open.
ev.detail.type - The type of window that is going to open. There are three types of windows inside GanttChart:
  • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
  • task - a window used for task editing.
  • connection - a window used to delete a connection.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of opening event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('opening', function (event) {
    const detail = event.detail,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
}

openCustomEvent

This event is triggered when the window for task editing is opened( visible ).

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of open event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('open', function (event) {
	// event handling code goes here.
}

closingCustomEvent

This event is triggered just before the window for task editing starts closing. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

Arguments

evCustomEvent
ev.detailObject
ev.detail.target - The instance of the window that is going to close.
ev.detail.type - The type of window that is going to close. There are three types of windows inside GanttChart:
  • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
  • task - a window used for task editing.
  • connection - a window used to delete a connection.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of closing event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('closing', function (event) {
    const detail = event.detail,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
}

closeCustomEvent

This event is triggered when the window for task editing is closed( hidden )

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event.

const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('close', function (event) {
	// event handling code goes here.
}

Methods

addTaskTo( taskIndex: string | number, projectIndex: string | number): void

Adds a task as the last item of a Project.

Arguments

taskIndexstring | number

A number that represents the index of a task or a string that matches the hierarchical position of the item, e.g. '0' ( following smartTree syntax).

projectIndexstring | number

A number that represents the index of a project or a string that matches the hierarchical position of the item, e.g. '0' ( following smartTree syntax).


Invoke the addTaskTo method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.addTaskTo("0, 2");

beginUpdate(): void

Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.


Invoke the beginUpdate method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.beginUpdate();

endUpdate(): void

Ends the update operation. This method will resume the rendering and will refresh the GanttChart.


Invoke the endUpdate method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.endUpdate();

refresh( fullRefresh?: boolean): void

Refereshes the GanttChart after resizing by recalculating the Scrollbars.

Arguments

fullRefresh?boolean

If set the GanttChart will be re-rendered completely.


Invoke the refresh method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.refresh(true,false);

removeAllConnections(): void

Removes all connections between tasks.


Invoke the removeAllConnections method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.removeAllConnections(false);

removeConnection( startTaskIndex: number | string, taskEndIndex?: number, connectionType?: number): object

Removes a connection between tasks. The function accepts three arguments(task's start index, end index and connection type) or one connection string argument which describes the connection.

Arguments

startTaskIndexnumber | string

The index of the start task or the connection string like '2-3-0.

taskEndIndex?number

The index of the end task.

connectionType?number

The type of the connection. A numeric value from 0 to 3.

Returnsobject

Invoke the removeConnection method.

const ganttchart = document.querySelector('smart-ganttchart');
const result = ganttchart.removeConnection("0, 4, 1");

removeTaskConnection( taskStartIndex: number, taskEndIndex?: number): string

Removes all connections of a task or between two tasks if the second argument is provided and valid.

Arguments

taskStartIndexnumber

The index of the start task.

taskEndIndex?number

The index of the end task.

Returnsstring

Invoke the removeTaskConnection method.

const ganttchart = document.querySelector('smart-ganttchart');
const result = ganttchart.removeTaskConnection("10, 4");

clearTasks(): void

Removes all tasks.


Invoke the clearTasks method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.clearTasks(false);

clearResources(): void

Removes all resources.


Invoke the clearResources method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.clearResources(false);

createConnection( startTaskIndex: number | string, taskEndIndex?: number, connectionType?: number): void

Creates a connection between two tasks.

Arguments

startTaskIndexnumber | string

The index of the start task or the connection string like '2-3-0.

taskEndIndex?number

The index of the end task.

connectionType?number

The type of the connection. A numeric value from 0 to 3.


Invoke the createConnection method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.createConnection("1, 2, 0");

collapse( index: string | number): void

Collapses an expanded project with tasks.

Arguments

indexstring | number

The index of a project task that should be collapsed.


Invoke the collapse method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.collapse("0");

ensureVisible( item: string | number): void

Makes sure a Task is visible by scrolling to it.

Arguments

itemstring | number

The index of the target Task. Can be a string representing a Tree index ( similar to smartTree )


Invoke the ensureVisible method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.ensureVisible("0");

expand( index: string | number): void

Expands a collapsed project with tasks.

Arguments

indexstring | number

The index of a project task that should be expanded.


Invoke the expand method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.expand("0");

exportData( dataFormat: string, callback?: any): void

Exports the data of Tree of the GanttChart.

Arguments

dataFormatstring

Determines the format of the exported file. Three possible values are available:

  • pdf
  • xlsx
  • html

callback?any

A callback that allows to format the exported data based on a condition. For additional details, refer ro the Smart Export Documentation.


Invoke the exportData method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.exportData("'pdf'");

getState(): []

Returns a JSON representation of all tasks inside the element along with their connections and settings.

Returns[]

Invoke the getState method.

const ganttchart = document.querySelector('smart-ganttchart');
const result = ganttchart.getState(false);

getTaskIndex( task: HTMLElement): number

Returns the index of a task.

Arguments

taskHTMLElement

A GattChartTask object.

Returnsnumber

Invoke the getTaskIndex method.

const ganttchart = document.querySelector('smart-ganttchart');
const result = ganttchart.getTaskIndex("timelineTaskInstance");

getTaskPath( task: GanttChartTask): string

Returns the tree path of a task.

Arguments

taskGanttChartTask

Returns the Tree path of the task as a string.

Returnsstring

Invoke the getTaskPath method.

const ganttchart = document.querySelector('smart-ganttchart');
const result = ganttchart.getTaskPath("ganttChartTask");

getResourceIndex( resource: any): number

Returns the index of a resource.

Arguments

resourceany

A GanttChartResource object.

Returnsnumber

Invoke the getResourceIndex method.

const ganttchart = document.querySelector('smart-ganttchart');
const result = ganttchart.getResourceIndex("ganttChartResource");

clearSelection(): void

Unselects all currently selected items inside the GanttChart including Tasks and Resources. It also clears the assignment highlgihters.


Invoke the clearSelection method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.clearSelection();

clearState(): void

Removes a previously saved state of the element form LocalStorage according to it's id. Requires an id to be set to the element.


Invoke the clearState method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.clearState("state");

loadState( state?: any[]): void

Loads a previously saved state of the element or checks LocalStorage for any saved states if no argument is passed to the method.

Arguments

state?any[]

An Array containing a valid structure of Gantt Chart tasks.


Invoke the loadState method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.loadState("state");

saveState( state?: any[]): void

Saves the current settings of the element to LocalStorage. Requires an id to be set to the element.

Arguments

state?any[]

An Array containing a valid structure of Gantt Chart tasks.


Invoke the saveState method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.saveState("state");

insertTask( index: string | number, taskObject: any): void

Inserts a new task in the timeline.

Arguments

indexstring | number

A number that represents the index of a task or a string that matches the hierarchical position of the item, e.g. '0' ( following smartTree syntax).

taskObjectany

An object describing a Gantt Chart task.


Invoke the insertTask method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.insertTask("0, { label: 'Inserted Task 1', dateStart: '2020-08-10', dateEnd: '2020-12-23' }");

updateTask( index: string | number, taskObject: any): void

Updates a task inside the timeline.

Arguments

indexstring | number

A number that represents the index of a task or a string that matches the hierarchical position of the item, e.g. '0' ( following smartTree syntax).

taskObjectany

An object describing a Gantt Chart task. The properties of this object will be applied to the desired task.


Invoke the updateTask method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.updateTask("2, { label: 'Updated Task', dateEnd: '2020-12-23' }");

removeTask( index: string | number): void

Removes a task from the timeline.

Arguments

indexstring | number

A number that represents the index of a task or a string that matches the hierarchical position of the item, e.g. '0' ( following smartTree syntax).


Invoke the removeTask method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.removeTask("0");

insertResource( resourceId: string | number, resourceObject?: any): void

Inserts a new resource.

Arguments

resourceIdstring | number

A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.

resourceObject?any

An object describing a Gantt Chart resource.


Invoke the insertResource method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.insertResource("0, { id: 'newResource', label: 'New Resource', capacity: 4 }");

updateResource( resourceId: any, taskObject: any): void

Updates an existing resource.

Arguments

resourceIdany

A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.

taskObjectany

An object describing a Gantt Chart resource. The properties of this object will be applied to the target resource.


Invoke the updateResource method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.updateResource("2, { label: 'Updated Task', capacity: 6 }");

removeResource( resourceId: any): void

Removes a resource.

Arguments

resourceIdany

A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.


Invoke the removeResource method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.removeResource("0");

openWindow( index: string | number): void

Opens the popup Window for specific task Editing.

Arguments

indexstring | number

A string or number that represents the index of a task that is going to be edited.


Invoke the openWindow method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.openWindow("2");

closeWindow(): void

Closes an opened popup Window. The method will close any opened popup window inside the element.


Invoke the closeWindow method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.closeWindow();

print(): void

Prepares the GanttChart for printing by opening the browser's Print Preview.


Invoke the print method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.print(false);

sort( columns?: any): void

Sorts the GanttChart tasks/resources if sortable is enabled.

Arguments

columns?any

An Array of objects which determine which columns to be sorted, the sort order and the type of item to sort: task or resource. If no arguments are provided sorting will be removed.
An object should have the following properties:

  • value - a string that represents the value of a taskColumn to sort.
  • sortOrder - a string that represents the sorting order for the column: 'asc' (asscending sorting) or 'desc' (descending) are possible values.
  • type - a string that represents the type of item to sort. This property determines which panel will be sorted. Two possible values: 'task', 'resource'.


Invoke the sort method.

const ganttchart = document.querySelector('smart-ganttchart');
ganttchart.sort("[{ value: 'label', sortOrder: 'asc', type: 'task' }]","[{ value: 'label', sortOrder: 'asc', type: 'task' }, { value: 'label', sortOrder: 'asc', type: 'resource' }]");

CSS Variables

--smart-gantt-chart-splitter-bar-fit-sizevar()

Default value

"calc(var(--smart-gantt-chart-timeline-content-height) + 2 * var(--smart-gantt-chart-task-default-height))"

The fit size of all Splitter bars inside the element

--smart-gantt-chart-task-tree-splitter-bar-fit-sizevar()

Default value

"var(--smart-gantt-chart-splitter-bar-fit-size)"

The fit size of the Splitter Bars that are inside the Task Tree Splitter

--smart-gantt-chart-task-default-heightvar()

Default value

"30px"

The height of a Task inside the Timeline

--smart-gantt-chart-task-bar-fill-paddingvar()

Default value

"5px"

The padding of the Fill of the Task Bar

--smart-gantt-chart-task-label-paddingvar()

Default value

"var(--smart-gantt-chart-task-bar-fill-padding)"

--smart-gantt-chart-task-thumb-colorvar()

Default value

"rgba(0,0,0,.55)"

The color of the thumb

--smart-gantt-chart-task-progress-colorvar()

Default value

"rgba(0,0,0,.15)"

The default color of the progress fill of all Tasks inside the Timeline

--smart-gantt-chart-project-colorvar()

Default value

"#ffa558"

The defaut color for all Project tasks

--smart-gantt-chart-project-label-colorvar()

Default value

"#333"

Determines the label color of the project tasks inside the Timeline.

--smart-gantt-chart-project-label-color-selectedvar()

Default value

"#000"

Determines the label color of the project tasks inside the Timeline when selected.

--smart-gantt-chart-project-progress-colorvar()

Default value

"var(--smart-gantt-chart-task-progress-color)"

The default color of the progress fill for all Project tasks

--smart-gantt-chart-task-colorvar()

Default value

"rgb(43, 195, 190)"

The default color of a Task inside the Timeline

--smart-gantt-chart-milestone-colorvar()

Default value

"#800080"

The default color for all Milestones

--smart-gantt-chart-timeline-task-background-colorvar()

Default value

"transparent"

Determines the background color of the tasks(rows) inside the Timeline.

--smart-gantt-chart-timeline-task-connection-feedback-colorvar()

Default value

"#e6510a"

Determines the default color of the feedback that is shows when creating a connection between tasks inside the Timeline.

--smart-gantt-chart-timeline-task-connection-feedback-widthvar()

Default value

"1px"

Determines the default width of the feedback that is shows when creating a connection between tasks inside the Timeline.

--smart-gantt-chart-timeline-task-connection-feedback-stylevar()

Default value

"dashed"

Determines the style of the feedback that is shows when creating a connection between tasks inside the Timeline.

--smart-gantt-chart-timeline-task-connection-colorvar()

Default value

"var(--smart-gantt-chart-timeline-task-connection-feedback-color)"

Determines the color of the connections between Tasks inside the Timeline.

--smart-gantt-chart-timeline-task-connection-color-hovervar()

Default value

"var(--smart-gantt-chart-timeline-task-connection-color)"

Determines the color on hover of the connections between Tasks inside the Timeline.

--smart-gantt-chart-timeline-task-connection-widthvar()

Default value

"var(--smart-gantt-chart-timeline-task-connection-feedback-width)"

Determines the width of the connections between the tasks inside the Timeline.

--smart-gantt-chart-timeline-task-connection-stylevar()

Default value

"solid"

Determines the style of the connections between the tasks inside the Timeline.

--smart-gantt-chart-timeline-task-connection-arrow-typevar()

Default value

"solid"

Determines the border type of the arrow of the connections between Tasks inside the Timeline.

--smart-gantt-chart-timeline-task-connection-arrow-widthvar()

Default value

"5px"

Determines the width of the arrow of the connections between Tasks inside the Timeline.

--smart-gantt-chart-timeline-task-resize-indicator-widthvar()

Default value

"4px"

Determines the defualt width of the resize indicator of the Task bars inside the Timeline.

--smart-gantt-chart-timeline-task-resize-indicator-colorvar()

Default value

"#fff"

Determines the background-color of the resize indicators of the Task bars insinde the Timeline.

--smart-gantt-chart-timeline-task-resize-indicator-border-colorvar()

Default value

"#333"

Determines the border-color of the resize indicator of the Task bars inside the Timeline.

--smart-gantt-chart-timeline-task-progress-thumb-sizevar()

Default value

"10px"

Determines the size of the thumb controlling the progress of a Task inside the Timeline.

--smart-gantt-chart-timeline-cell-sizevar()

Default value

"auto"

Determines the default width of the cells inside the Timeline.

--smart-gantt-chart-timeline-cell-min-sizevar()

Default value

"70px"

Determines the default min-width of the cells inside the Timeline.

--smart-gantt-chart-timeline-task-min-widthvar()

Default value

"5px"

Determines the default min-width of the Tasks insinde the Timeline. Not applicable to Milestone tasks.

--smart-gantt-chart-timeline-weekend-colorvar()

Default value

"#EFF5FD"

Determines the default background color of the 'weekend' cells insinde the Timeline.

--smart-gantt-chart-timeline-nonworking-colorvar()

Default value

"#F5F5F5"

Determines the default background-color of the nonworking days/hours inside the Timeline.

--smart-gantt-chart-default-widthvar()

Default value

"auto"

Determines the default width of the element.

--smart-gantt-chart-default-heightvar()

Default value

"600px"

Determines the height of the element.

--smart-gantt-chart-task-popup-window-default-widthvar()

Default value

"500px"

Determines the width of the task editing popup windows of the element.

--smart-gantt-chart-connection-popup-window-default-widthvar()

Default value

"300px"

Determines the width of the connection editing popup windows of the element.

--smart-gantt-chart-confirm-popup-window-default-widthvar()

Default value

"var(--smart-gantt-chart-connection-popup-default-width)"

Determines the width of the confirm popup window of the element.

--smart-gantt-chart-popup-window-header-heightvar()

Default value

"35px"

Determines the height of the header of the popup windows inside the element.

Default value

"50px"

Determines the height of the footer of the popup windows insinde the element.