GanttChart JAVASCRIPT UI Component API

GanttChart Javascript API

Class

GanttChart

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

AadjustToNonworkingTimeDetermines whether nonworkingDays/nonworkingHours are taken into considuration when determining the dateEnd of the tasks. When this property is enabled the dateEnd of the tasks is calculated to include only the actual working time. By default it's disabled and only calendar time is used.
AautoScheduleRecalculates 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.
AautoScheduleStrictModeAffects 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.
AautoScrollStepDetermines the scroll speed when dragging when autoScroll property is set.
CcolumnMenuEnabled/Disables the colummn header menu. When enabled and the user hovers a column header, a drop down button will appear that triggers a column menu for quick actions like sorting, filtering, etc. The actions depend on the enabled Gantt features, for example the filtering action will be available only if filtering is enabled for the element.
CcolumnResizeDetermines whether the Table columns are resizable or not. When enabled it is possible to resize the columns from the header cells of the Table in both Task and Resource timelines.
CcolumnResizeFeedbackDetermines resize feedback is used during column resizing. This property is applicable only when columnResize is enabled.
CcurrentTimeGantt's current time. By default it is the today's date.
CcurrentTimeIndicatorEnables/Disables the current time indicator. Current time indicator shows the current time in the appropriate view cells.
CcurrentTimeIndicatorIntervalDetermines the refresh interval in seconds for the currentTimeIndicator.
DdataExportSets the GanttChart's Data Export options. Click for more details. Property object's options:
  • exportFiltered:boolean - Determines whether to export filtered items or not. By default filtered data is not exported.
  • fileName:string - Sets the exported file's name.
  • itemType:string - Determines the type of items that is going to be exported.
DdataSourceDetermines 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 TaskdateStart - 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 tasktype - 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-End3 - 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. The duration always shows the calendar time whether it is in days/hours or other.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 ).overdue - a boolean that indicates whether the task's dateEnd has surpassed it's deadline date.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.segments - an array of objects that allows to devide a task into multiple segements. Each segment (except the first) can have a different starting date, duration and label.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..GanttChart also accepts a DataAdapter instance as dataSource. You can read more about the dataAdapter here - https://www.htmlelements.com/docs/data-adapter/. Click for more details. Property object's options:
    DdayFormatDetermines the format of the dates in the timeline header when they represent days.
    DdateEndDetermines 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.
    DdateStartDetermines 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.
    DdateMarkersDetermines the date markers that will be displayed inside the timeline. Date markers allow to mark and even label specific dates (including time) inside the GanttChart timeline. Click for more details. Property object's options:
    • label:string | null - Determines the marker label.
    • date:string | date | number - Determines the date for the marker. The date can include time as well.
    • className:string? - Allows to add a custom class name to the marker.
    DdisabledEnables or disables the element.
    DdisableAutoScrollDisables auto scrolling while dragging/resizing a task bar inside the Timeline.
    DdisableTaskDragDisables dragging of tasks in the Timeline.
    DdisableTaskProgressChangeDisables task progress changing in the Timeline.
    DdisableTaskResizeDisables resizing of tasks in the Timeline.
    DdisableSelectionDisables the selection inside the GanttChart.
    DdisableSegmentDragDisables the task segment dragging.
    DdisableSegmentResizeDisables the task segment resizing.
    DdisableWindowEditorDisables the window editor for the GanttChart.
    DdurationUnitDetermines in what unit is task duration property measured.
    FfilterRowDetermines whether a dedicated filter row is used for Table filtering instead of the default filter input. This property has no effect if filtering is not enabled.
    FfirstDayOfWeekDetermines the view start day. Sunday is 0, Monday is 1, Saturday is 6. By default it's Sunday.
    GgroupByResourcesGroups the tasks inside the Task timeline according to the resources they are assigned to. Unassigned tasks are placed in a default group labeled 'Unassigned'.
    HheaderTemplateAllows to create a custom header content for the Task Panel. The attribute accepts an HTMLTemplate element, it's id or a function.
    HhideDateMarkersDetermines whether the dateMarkers are visible or not.
    HhideTimelineHeaderBy default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header container( the bottom container ).
    HhideTimelineHeaderDetailsBy default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header details container( the top container ).
    HhideTimelineSecondHeaderDetailsBy default the Timeline has a three level header - timeline details and timeline header. This property hides the second header details container( the middle container ).
    HhideResourcePanelHides 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.
    HhorizontalScrollBarVisibilityDetermines weather or not horizontal scrollbar is shown.
    HhourFormatDetermines the format of the dates inside the timeline header when they represent hours.
    IinfiniteTimelineWhen enabled, scrolling to the end of the horizotal timeline, triggers the creation of additional to extend the time range. The number of cells to be added when the scrollbar reaches the end position is determined by the infiniteTimelineStep.
    IinfiniteTimelineStepDetermines the number of cells to be added when the horizontal scroll bar of the Timeline reaches it's end position when infiniteTimeline is enabled.
    IinvertedWhen set the Timeline is positioned on the left side while the Task Tree is positioned on the right. By default it's vice versa.
    KkeyboardNavigationDetermines whether keyboard navigation inside the Table is enabled or not. Keyboard navigation affects both Task and Resource Tables. It allows to navigate between items. the following keyboard shortcut keys are available for focused tasks inside the Task Table: Enter - opens the Window editor to edit the currently focused task.Delete - opens a confirmation window regarding the deletion of the currently focused task.
    Llocale Determines the language of the GanttChart.
    MmaxDetetmines the maximum possible date of the Timeline.
    MminDetetmines the minimum possible date of the Timeline.
    MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
    MmonthFormatDetermines the format of the dates the timeline header when they represent months.
    MmonthScaleDetermines the scale in Month view.
    NnonworkingDaysDetermines 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 not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled.
    NnonworkingHoursDetermines the nonworking hours of a day. Hours are represented as numbers inside an array (e.g. [1,2,3] - means 1,2 and 3 AM) or number ranges represented as nested arrays(e.g. [[0,6]] - means from 0 to 6 AM). In the timline the cells that represent nonworking days are colored differently from the rest and will not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled.
    OonTaskRenderA function that can be used to completly customize the task element. The function has five arguments: task - the task object.segment - the task current segment object. If the task has only one segment, the task object is passed again.taskElement - the task's html element.segmentElement - the task's segment html element.labelElement - the task's segment label html element.
    PpopupWindowCustomizationFunctionA 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). item - the connection/task object that is the target of the window.
    PpopupWindowTabsDetermines which Tab items are visible inside the popup window. Three possible values are allowed: general - the general tab with task properties determines by the taskColumns property.dependency - the dependency tab which shows the connections to the task and allows to create/delete connections.segments - the segments tab which shows the segments of the task and allows to created/delete segments..
    PprogressLabelFormatFunctionA format function for the Timeline task progress label. The expected result from the function is a string. The label is hidden by default can be shown with the showProgressLabel property.
    QquarterFormatDetermines the format of the dates the timeline header when they represent quarters.
    RresourcesA getter that returns a flat structure as an array of all resources inside the element. Click for more details. Property object's options:
    • class:string - Resource class. Used to style the resource Timeline.
    • capacity:number - The capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.
    • hidden:boolean | undefined - Resource visibility.
    • id:string - Resource id. The unique id of the resource.
    • label:string | null - Resource label.
    • minCapacity:number - Resource min capacity
    • maxCapacity:number - 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.
    • progress:number - Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
    • type:any - Resource type.
    • value:any - Resource value.
    • workload:string | 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.
    RresourceColumnsDeteremines 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 columnsize - controls the actual size of the column Click for more details. Property object's options:
    • label:string | null - Column's label.
    • value:string | null - Column's value. The value shold reference an actual resoruce attribute.
    • min:string | number | null - Column's min size.
    • size:string | number | null - Column's size.
    • formatFunction:any - Column's format function. You can use it to customize the column label's rendering.
    RresourceFilteringDetermines whether the Resource Table is filterable or not.
    RresourceGroupFormatFunctionA format function that allows to re-format the group row labels when groupByResources is enabled.
    RresourcePanelHeaderTemplateAllows to create a custom header content for the Resource Panel. The attribute accepts an HTMLTemplate element, it's id or a function.
    RresourcePanelMinDetermines the min size of the Resource Panel.
    RresourcePanelSizeDetermines the size of the Resource Panel.
    RresourcePanelRefreshRateDetermines 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.
    RresourceTimelineFormatFunctionA 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.
    RresourceTimelineModeDetermines 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.
    RresourceTimelineViewDetermines how the resources will be displayed inside the resource Timeline.
    RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
    SselectedTaskIdsSets which tasks to select by their id or gets the currently selected task ids. If no id is provided for the task, an internal id is generated for each task according to it's index(tree path).
    SselectedResourceIdsSets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path).
    SshadeUntilCurrentTimeEnables/Disables the current time shader. If enabled all cells that represent past time will be shaded.
    SshowSelectionColumnShows the selection column of the Task/Resource Table. When applied a checkbox column is displayed that allows to select tasks/resources.
    SshowBaselineDetermines whether the baselnes of the tasks are visible or not. Baselines are defined via the 'planned' attribute on the task objects of the dataSource property.
    SshowProgressLabelShows the progress label inside the progress bars of the Timeline tasks.
    SsnapToNearestIf 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.
    SsortFunctionAllows to set a custom sorting function to be executed when a column is sorted. Can be used to override the default sorting behavior. The function contains the following parameters:
      dataSource - the Table's data sourcesortColumns - an array of the data fields of columns to be sorted bydirections - an array of sort directions to be sorted by (corresponding to sortColumns)defaultCompareFunctions - an array of default compare functions to be sorted by (corresponding to sortColumns), useful if the sorting of some columns does not have to be overridden
    .
    SsortModeDetermines whether the GanttChart can be sorted by one, more then one or no columns.
    TtasksA getter that returns a flat structure as an array of all tasks inside the element. Click for more details. Property object's options:
    • connections:array - Tasks connection.
      • Property object's options:
      • class:string - Project, Task or Milestone CSS class.
      • dateStart:string | Date - Project, Task or Milestone start date.
      • dateEnd:string | Date - Project, Task or Milestone end date.
      • deadline:string | Date - Determines the deadline for the Project, Task or Milestone.
      • disableResources:boolean - Project, Task or Milestone with disabled resources.
      • disableDrag:boolean - Project, Task or Milestone dragging is disabled.
      • disableResize:boolean - Project, Task or Milestone resizing is disabled.
      • dragProject:boolean - Project, Task or Milestone drag enabled in the view.
      • duration:number | undefined - The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.
      • expanded:boolean - Project, Task or Milestone expanded state in the view.
      • hidden:boolean | undefined - Task visibility.
      • id:string | null - Project, Task or Milestone id.
      • indicators:{label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[] - Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
        • Property object's options:
        • label:string? - Indicator label.
        • date:string | Date - Indicator date(can include time).
        • className:string? - A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
        • icon:string? - Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
        • tooltip:string? - Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
      • label:string | null - Project, Task or Milestone label.
      • formatFunction:any - Project, Task or Milestone format function.
      • onRender:any - Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
        • task - the task object.
        • segment - the task current segment object. If the task has only one segment, the task object is passed again.
        • taskElement - the task's html element.
        • segmentElement - the task's segment html element.
        • labelElement - the task's segment label html element.
      • maxDateStart:string | Date - Project, Task or Milestone max start date.
      • minDateStart:string | Date - Project, Task or Milestone min start date.
      • maxDateEnd:string | Date - Project, Task or Milestone max end date.
      • minDateEnd:string | Date - Project, Task or Milestone min end date.
      • minDuration:number | undefined - The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
      • maxDuration:number | undefined - The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
      • overdue:boolean - Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
      • planned:{ dateStart: date | string | number, dateEnd: date | string | number, duration?: number } - Determines the planned dateStart/dateEnd for as the baseline for the task.
        • Property object's options:
        • dateStart:string | Date - Determines the planned dateStart of the task.
        • dateEnd:string | Date - Determines the planned dateEnd of the task.
        • duration:number | undefined - Determines the planned duration of the task.
      • progress:number - Project, Task or Milestone progress.
      • resources:array - Project, Task or Milestone resources.
        • Property object's options:
        • segments:{label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[] - Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
          • Property object's options:
          • label:string | null - Segment label.
          • dateStart:string | Date - Segment start date.
          • dateEnd:string | Date - Segment end date.
          • disableDrag:boolean - Determines whether segment dragging is disabled.
          • disableResize:boolean - Determines whether segment resizing is disabled.
          • duration:number | undefined - The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
          • formatFunction:any - Segment label format function.
        • synchronized:boolean - Project, Task or Milestone synchronized in the view.
        • tasks:array - Project's tasks. Only projects can have tasks.
        • type:string - Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'
        • value:any - Project, Task or Milestone value.
        TtaskColumnsDeteremines 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 columncustomEditor - 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 columnvalue - 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. Click for more details. Property object's options:
        • disableEdit:boolean - Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.
        • dateFormat:string | object | null - Applies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: 
          dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
          . Another option is to use a date format string. Built-in Date formats:
          // short date pattern
          'd' - 'M/d/yyyy',
          // long date pattern
          'D' - 'dddd, MMMM dd, yyyy',
          // short time pattern
          't' - 'h:mm tt',
          // long time pattern
          'T' - 'h:mm:ss tt',
          // long date, short time pattern
          'f' - 'dddd, MMMM dd, yyyy h:mm tt',
          // long date, long time pattern
          'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
          // month/day pattern
          'M' - 'MMMM dd',
          // month/year pattern
          'Y' - 'yyyy MMMM',
          // S is a sortable format that does not vary by culture
          'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

          Date format strings:
          'd'-the day of the month;
          'dd'-the day of the month
          'ddd'-the abbreviated name of the day of the week
          'dddd'- the full name of the day of the week
          'h'-the hour, using a 12-hour clock from 1 to 12
          'hh'-the hour, using a 12-hour clock from 01 to 12

          'H'-the hour, using a 24-hour clock from 0 to 23
          'HH'- the hour, using a 24-hour clock from 00 to 23
          'm'-the minute, from 0 through 59
          'mm'-the minutes,from 00 though59
          'M'- the month, from 1 through 12
          'MM'- the month, from 01 through 12
          'MMM'-the abbreviated name of the month
          'MMMM'-the full name of the month
          's'-the second, from 0 through 59
          'ss'-the second, from 00 through 59
          't'- the first character of the AM/PM designator
          'tt'-the AM/PM designator
          'y'- the year, from 0 to 99
          'yy'- the year, from 00 to 99
          'yyy'-the year, with a minimum of three digits
          'yyyy'-the year as a four-digit number;
          'yyyyy'-the year as a four-digit number.
        • numberFormat:string | object | null - Applies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings:
          'd' - decimal numbers.
          'f' - floating-point numbers.
          'n' - integer numbers.
          'c' - currency numbers.
          'p' - percentage numbers.

          For adding decimal places to the numbers, add a number after the formatting stri

          For example: 'c3' displays a number in this format $25.256
        • label:string | null - Column's label.
        • value:string | null - Column's value.
        • size:string | number | null - Column's size.
        • minWidth:string | number | null - Column's min width.
        • formatFunction:any - Column's format function. You can use it to customize the column label's rendering.
        • customEditor:function | undefined | null - A function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments:
          • name - the name of the task property that is going to be edited.
          • value - the value of the task property that is going to be edited.
          It's also important to define a getCustomEditorValue to return the value from the custom editor.
        • getCustomEditorValue:function | undefined | null - A function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
        • setCustomEditorValue:function | undefined | null - A function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments -
          • editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
          • columnValue - the value property of the column.
          • value - the value of the task property that the column displays(the editor value).
        TtaskFilteringDetermines whether the Task Table is filterable or not.
        TtaskPanelMinDetermines the min size of the Task Panel. Used when Resource Panel is visible.
        TtaskPanelSizeDetermines the size of the Task Panel. Used when Resource Panel is visible.
        TtimelineMinDetermines the min width of the timeline.
        TtreeMinDetermines the min width of the task table.
        TtreeSizeDetermines the size(width) of the task table.
        TtimelineHeaderFormatFunctionA format function for the Header of the Timeline. The function provides the following arguments: date - a Date object that represets the date for the current cell.type - a string that represents the type of date that the cell is showing, e.g. 'month', 'week', 'day', etc.isHeaderDetails - a boolean that indicates whether the current cell is part of the Header Details Container or not.value - a string that represents the default value for the cell provided by the element.
        TtooltipDetermines whether the tooltips are enabled or not. Tooltips are available for timeline tasks, resources, connections, indicators and segments. Click for more details. Property object's options:
        • arrow:boolean - Determines whether the tooltip will have an arrow or not.
        • delay:number - Determines the delay (in miliseconds) before the tooltip is opened.
        • enabled:boolean - Enabled or disables the tooltips.
        • offset:number[] - Determines the [horizontal, vertical] offset (in pixels) for the tooltip position when opened.
        VverticalScrollBarVisibilityDetermines weather or not vertical scrollbar is shown.
        VviewDetermines 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.
        YyearFormatDetermines the format of the dates inside the timeline header when they represent years.
        WweekFormatDetermines the format of the dates inside the timeline header when they represent weeks.
        TthemeSets or gets the element's visual theme.
        UunfocusableSets or gets if the element can be focused.

        Events

        BbeginUpdateThis event is triggered when a batch update was started after executing the beginUpdate method.
        EendUpdateThis event is triggered when a batch update was ended from after executing the endUpdate method.
        CconnectionStartThis 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.
        CconnectionEndThis event is triggered when the user completes a connection between two tasks.
        CchangeThis event is triggered when a Task is selected/unselected.
        CcolumnResizeThis event is triggered when a Tree column is resized. Column resizing is controled by the columnResize property.
        CclosingThis event is triggered just before the window for task editing or tooltip is closing. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
        CcloseThis event is triggered when the window for task editing is closed( hidden )
        CcollapseThis event is triggered when an item is collapsed.
        DdragStartThis 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.
        DdragEndThis event is triggered when dragging of a task finishes.
        EexpandThis event is triggered when an item is expanded.
        FfilterThis event is triggered when the GanttChart is filtered.
        IitemClickThis event is triggered when a task, resource or connection is clicked inside the Timeline or the Tree columns.
        IitemInsertThis event is triggered when a Task/Resource/Connection is inserted.
        IitemRemoveThis event is triggered when a Task/Resource/Connection is removed.
        IitemUpdateThis event is triggered when a Task/Resource/Connection is updated.
        OopeningThis event is triggered just before the window for task editing or tooltip is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.
        OopenThis event is triggered when the window for task editing is opened( visible ) or when the tooltip is opened.
        PprogressChangeStartThis 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.
        PprogressChangeEndThis event is triggered when the progress of a task is changed.
        RresizeStartThis 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.
        RresizeEndThis event is triggered when the resizing of a task finishes.
        SsortThis event is triggered when the GanttChart is sorted by some column.
        SscrollBottomReachedThis event is triggered when the Timeline has been scrolled to the bottom.
        SscrollTopReachedThis event is triggered when the Timeline has been scrolled to the top.
        SscrollLeftReachedThis event is triggered when the Timeline has been scrolled to the beginning (horizontally).
        SscrollRightReachedThis event is triggered when the Timeline has been scrolled to the end (horizontally).

        Methods

        AaddFilterAdds a custom filter to a specific column (task or resource column).
        CclearFiltersClears the currently applied filters.
        CclearSortClears the currently applied column sorting.
        CclearSelectionUnselects all currently selected items inside the GanttChart including Tasks and Resources. It also clears the assignment highlgihters.
        CclearStateRemoves a previously saved state of the element form LocalStorage according to it's id. Requires an id to be set to the element.
        CclearTasksRemoves all tasks.
        CclearResourcesRemoves all resources.
        CcreateConnectionCreates a connection between two tasks.
        CcollapseCollapses an expanded project.
        BbeginUpdateStarts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
        EendUpdateEnds the update operation. This method will resume the rendering and will refresh the GanttChart.
        RrefreshRefereshes the GanttChart after resizing by recalculating the Scrollbars.
        EensureVisibleMakes sure a Task is visible by scrolling to it.
        EexpandExpands a collapsed project with tasks.
        EexportDataExports the data of Tree of the GanttChart.
        GgetConnectionsReturns all existing connections. The connections are returned as objects that contain detailed information. Each object in the array has the following keys: 'id' - connection id, 'type' - connection type, 'startTaskId' - connection's start task id, 'endTaskId' - connection's end task id, 'startIndex' - connection's start task index, 'endIndex' - connection's end task index, 'lag' - lag time.
        GgetConnectionDetailsReturns the connection details for the target connection which includes: startTask, endTask, startTaskId, endTaskId and type of the corresponding connection. Connection types are described in detail under the `connectionEnd` event description in this document and in a dedicated topic available on the website.
        GgetStateReturns a JSON representation of all tasks inside the element along with their connections and settings.
        GgetItemPathReturns the Tree path of a task/resource. The tree path is used as task/resource id if no id is provided by the user.
        GgetTaskReturns the task object that corresponds to the id/path.
        GgetTasksReturns an array of all GanttChart tasks.
        GgetTaskIndexReturns the index of a task.
        GgetTaskConnectionsReturns the connections definitions of a task.
        GgetTaskProjectReturns the Project of a task or undefined if it does not have one.
        GgetResourceReturns the resource object that corresponds to the id/path.
        GgetResourcesReturns an array of all GanttChart resources.
        GgetResourceIndexReturns the index of a resource.
        GgetResourceTasksReturns the tasks that are assigned to the resource.
        GgetSelectedIdsReturns the currently selected tasks/resource ids. If selection is disabled or no items are selected returns null.
        GgetSelectedTasksReturns the currently selected tasks.
        GgetSelectedResourcesReturns the currently selected resources.
        GgetWorkingHoursReturns the working hours of the day as numbers.
        HhideTooltipHides the tooltip if it's visible.
        IisWorkingDayDepending on the nonworkingDays property, returns true or false whether the target date is on a working day or not.
        LloadStateLoads a previously saved state of the element or checks LocalStorage for any saved states if no argument is passed to the method.
        RremoveAllConnectionsRemoves all connections between tasks.
        RremoveConnectionRemoves 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.
        RremoveTaskConnectionRemoves all connections of a task or between two tasks if the second argument is provided and valid.
        SshowTooltipShows the tooltip for a specific element.
        SsaveStateSaves the current settings of the element to LocalStorage. Requires an id to be set to the element.
        IinsertTaskInserts a new task in the timeline. The new task can be inserted as a sub task of a project by passing the appropriate argument for the project id or as a root level item.
        UupdateTaskUpdates a task/project/milestone.
        RremoveTaskRemoves a task from the timeline.
        IinsertResourceInserts a new resource.
        UupdateResourceUpdates an existing resource.
        RremoveResourceRemoves a resource.
        OopenWindowOpens the popup Window for specific task to edit or to delete a connection if a connection string is passed.
        CcloseWindowCloses an opened popup Window. The method will close any opened popup window inside the element.
        PprintPrepares the GanttChart for printing by opening the browser's Print Preview.
        SsetWorkTimeAllows to sets the working days and hours at once.
        SselectTaskAllows to select a task based on it's id.
        SselectResourceAllows to select a resource based on it's id.
        UunselectTaskAllows to unselect a task based on it's id.
        UunselectResourceAllows to unselect a resource based on it's id.
        UunsetWorkTimeAllows to unset previously set working time. The opposte method for setWorkingTime.
        SsortSorts the GanttChart tasks/resources if sortable is enabled.

        Properties

        adjustToNonworkingTimeboolean

        Determines whether nonworkingDays/nonworkingHours are taken into considuration when determining the dateEnd of the tasks. When this property is enabled the dateEnd of the tasks is calculated to include only the actual working time. By default it's disabled and only calendar time is used.

        Default value

        false
        Try a demo showcasing the adjustToNonworkingTime property.

        Example

        Set the adjustToNonworkingTime property. 

         <smart-gantt-chart adjust-to-nonworking-time></smart-gantt-chart>

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

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

        Get the adjustToNonworkingTime property. 

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

        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
        Try a demo showcasing the autoSchedule property.

        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
        Try a demo showcasing the autoScheduleStrictMode property.

        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
        Try a demo showcasing the autoScrollStep property.

        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;

        columnMenuboolean

        Enabled/Disables the colummn header menu. When enabled and the user hovers a column header, a drop down button will appear that triggers a column menu for quick actions like sorting, filtering, etc. The actions depend on the enabled Gantt features, for example the filtering action will be available only if filtering is enabled for the element.

        Default value

        false

        Example

        Set the columnMenu property. 

         <smart-gantt-chart column-menu></smart-gantt-chart>

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

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

        Get the columnMenu property. 

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

        columnResizeboolean

        Determines whether the Table columns are resizable or not. When enabled it is possible to resize the columns from the header cells of the Table in both Task and Resource timelines.

        Default value

        false

        Example

        Set the columnResize property. 

         <smart-gantt-chart column-resize></smart-gantt-chart>

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

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

        Get the columnResize property. 

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

        columnResizeFeedbackboolean

        Determines resize feedback is used during column resizing. This property is applicable only when columnResize is enabled.

        Default value

        false

        Example

        Set the columnResizeFeedback property. 

         <smart-gantt-chart column-resize-feedback></smart-gantt-chart>

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

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

        Get the columnResizeFeedback property. 

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

        currentTimestring | Date

        Gantt's current time. By default it is the today's date.

        Default value

        ""

        currentTimeIndicatorboolean

        Enables/Disables the current time indicator. Current time indicator shows the current time in the appropriate view cells.

        Default value

        false

        Example

        Set the currentTimeIndicator property. 

         <smart-gantt-chart current-time-indicator></smart-gantt-chart>

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

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

        Get the currentTimeIndicator property. 

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

        currentTimeIndicatorIntervalnumber

        Determines the refresh interval in seconds for the currentTimeIndicator.

        Default value

        1

        Example

        Set the currentTimeIndicatorInterval property. 

         <smart-gantt-chart current-time-indicator-interval='60'></smart-gantt-chart>

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

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.currentTimeIndicatorInterval = 120;

        Get the currentTimeIndicatorInterval property. 

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

        dataExportobject

        Sets the GanttChart's Data Export options.

        Properties

        exportFiltered
        fileName
        itemType

        exportFilteredboolean

        Determines whether to export filtered items or not. By default filtered data is not exported.

        Default value

        false

        Get the exportFiltered property. 

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

        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.

        Allowed Values

        • "task" - Exports the Task Tree.
        • "resource" - Exports the Resource Tree.

        Default value

        "task"

        Get the itemType property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let itemType = ganttchart.dataExport.itemType;
        Try a demo showcasing the dataExport property.

        dataSourceany

        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. The duration always shows the calendar time whether it is in days/hours or other.
        • 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 ).
        • overdue - a boolean that indicates whether the task's dateEnd has surpassed it's deadline date.
        • 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.
        • segments - an array of objects that allows to devide a task into multiple segements. Each segment (except the first) can have a different starting date, duration and label.
        • 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..
        GanttChart also accepts a DataAdapter instance as dataSource. You can read more about the dataAdapter here - https://www.htmlelements.com/docs/data-adapter/.



        The dataSource property's object value may have the following properties:
        • connections: array - Tasks connection.
          • lag: number | undefined - Task's connection lag. Used by the Auto Scheduling (autoSchedue proeprty) feature to determine the connection lag, which is the time before/after the target begins/ends (depending on the connection type). The lag can be a negative number in which case it acts as lead time. In other words, the lab property is used to make a task start late(positive lag) or early(negative lag) then planned when autoSchedule is enabled.
            • lag
          • target: string | number - Task's connection target.
            • target
          • type: number - Task's connection type.
            • type
        • connectionType: array - Project, Task or Milestone connection type which may include 'start' and 'end' string values.
        • class: string - Project, Task or Milestone CSS class.
        • dateStart: string | Date - Project, Task or Milestone start date.
        • dateEnd: string | Date - Project, Task or Milestone end date.
        • deadline: string | Date - Determines the deadline for the Project, Task or Milestone.
        • disableResources: boolean - Disable the resources for Project, Task or Milestone.
        • disableDrag: boolean - Project, Task or Milestone dragging is disabled.
        • disableResize: boolean - Project, Task or Milestone resizing is disabled.
        • dragProject: boolean - Project, Task or Milestone drag enabled in the view.
        • duration: number | undefined - The duration of the Project, Task or Milestone in miliseconds. The duration unit can be changed via the durationUnit property.
        • expanded: boolean - Project, Task or Milestone expanded state in the view.
        • id: string | null - Project, Task or Milestone id.
        • indicators: {label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[] - Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
          • label: string? - Indicator label.
            • label
          • date: string | Date - Indicator date(can include time).
            • date
          • className: string? - A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
            • className
          • icon: string? - Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
            • icon
          • tooltip: string? - Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
            • tooltip
        • label: string | null - Project, Task or Milestone label.
        • formatFunction: any - Project, Task or Milestone format function. The function gets passed a label as a function argument and you can return another formatted label.
        • onRender: any - Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
          • task - the task object.
          • segment - the task current segment object. If the task has only one segment, the task object is passed again.
          • taskElement - the task's html element.
          • segmentElement - the task's segment html element.
          • labelElement - the task's segment label html element.
        • maxDateStart: string | Date - Project, Task or Milestone max start date.
        • minDateStart: string | Date - Project, Task or Milestone min start date.
        • maxDateEnd: string | Date - Project, Task or Milestone max end date.
        • minDateEnd: string | Date - Project, Task or Milestone min end date.
        • minDuration: number | undefined - The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
        • maxDuration: number | undefined - The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
        • overdue: boolean - Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
        • planned: { dateStart: date | string | number, dateEnd: date | string | number, duration?: number } - Determines the planned dateStart/dateEnd for as the baseline for the task.
          • dateStart: string | Date - Determines the planned dateStart of the task.
            • dateStart
          • dateEnd: string | Date - Determines the planned dateEnd of the task.
            • dateEnd
          • duration: number | undefined - Determines the planned duration of the task.
            • duration
        • progress: number - Project, Task or Milestone progress.
        • resources: {id: string, capacity: number, label: string, value: string, maxCapacity: number, type: string}[] - Project, Task or Milestone resources
          • capacity: number - The capacity of a resource. By default it is used to determines the working capacity ( in hours ) of the resource.
            • capacity
          • id: string - Resource id. The unique id of the resource.
            • id
          • label: string | null - Resource label.
            • label
          • minCapacity: number - Resource min capacity
            • minCapacity
          • maxCapacity: number - 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.
            • maxCapacity
          • progress: number - Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
            • progress
          • type: any - Resource type.
            • type
          • value: any - Resource value.
            • value
          • hidden: boolean | undefined - Resource visibility.
            • hidden
          • workload: string | 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.
            • workload
        • segments: {label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[] - Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
          • label: string | null - Segment label.
            • label
          • dateStart: string | Date - Segment start date.
            • dateStart
          • dateEnd: string | Date - Segment end date.
            • dateEnd
          • disableDrag: boolean - Determines whether segment dragging is disabled.
            • disableDrag
          • disableResize: boolean - Determines whether segment resizing is disabled.
            • disableResize
          • duration: number | undefined - The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
            • duration
          • formatFunction: any - Segment label format function.
            • formatFunction
        • synchronized: boolean - Project, Task or Milestone synchronized in the view.
        • tasks: array - Project's tasks.
        • type: string - Project, Task or Milestone type. Possible values are 'project' and 'task'
        • value: any - Project, Task or Milestone value.
        • hidden: boolean | undefined - Project, Task or Milestone value.
        Try a demo showcasing the dataSource property.

        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;

        dateMarkers{label?: string, date: date | string, className?: string }[]

        Determines the date markers that will be displayed inside the timeline. Date markers allow to mark and even label specific dates (including time) inside the GanttChart timeline.

        Properties

        label
        date
        className

        labelstring | null

        Determines the marker label.

        Default value

        ""

        Get the label property. 

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

        datestring | date | number

        Determines the date for the marker. The date can include time as well.

        Get the date property. 

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

        classNamestring?

        Allows to add a custom class name to the marker.

        Get the className property. 

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

        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;

        disableSegmentDragboolean

        Disables the task segment dragging.

        Default value

        false

        Example

        Set the disableSegmentDrag property. 

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

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

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

        Get the disableSegmentDrag property. 

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

        disableSegmentResizeboolean

        Disables the task segment resizing.

        Default value

        false

        Example

        Set the disableSegmentResize property. 

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

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

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

        Get the disableSegmentResize property. 

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

        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;

        filterRowboolean

        Determines whether a dedicated filter row is used for Table filtering instead of the default filter input. This property has no effect if filtering is not enabled.

        Default value

        false

        Example

        Set the filterRow property. 

         <smart-gantt-chart filter-row></smart-gantt-chart>

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

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

        Get the filterRow property. 

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

        firstDayOfWeeknumber

        Determines the view start day. Sunday is 0, Monday is 1, Saturday is 6. By default it's Sunday.

        Default value

        -1

        Example

        Set the firstDayOfWeek property. 

         <smart-gantt-chart first-day-of-week='0'></smart-gantt-chart>

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

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

        Get the firstDayOfWeek property. 

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

        groupByResourcesboolean

        Groups the tasks inside the Task timeline according to the resources they are assigned to. Unassigned tasks are placed in a default group labeled 'Unassigned'.

        Default value

        false

        Example

        Set the groupByResources property. 

         <smart-gantt-chart group-by-resources></smart-gantt-chart>

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

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

        Get the groupByResources property. 

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

        headerTemplateany

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

        Try a demo showcasing the headerTemplate property.

        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;

        hideDateMarkersboolean

        Determines whether the dateMarkers are visible or not.

        Default value

        false

        Example

        Set the hideDateMarkers property. 

         <smart-gantt-chart hide-date-markers></smart-gantt-chart>

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

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

        Get the hideDateMarkers property. 

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

        hideTimelineHeaderboolean

        By default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header container( the bottom container ).

        Default value

        false

        Example

        Set the hideTimelineHeader property. 

         <smart-gantt-chart hide-timeline-header></smart-gantt-chart>

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

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

        Get the hideTimelineHeader property. 

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

        hideTimelineHeaderDetailsboolean

        By default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header details container( the top container ).

        Default value

        false

        Example

        Set the hideTimelineHeaderDetails property. 

         <smart-gantt-chart hide-timeline-header-details></smart-gantt-chart>

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

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

        Get the hideTimelineHeaderDetails property. 

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

        hideTimelineSecondHeaderDetailsboolean

        By default the Timeline has a three level header - timeline details and timeline header. This property hides the second header details container( the middle container ).

        Default value

        true

        Example

        Set the hideTimelineSecondHeaderDetails property. 

         <smart-gantt-chart hide-timeline-second-header-details></smart-gantt-chart>

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

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

        Get the hideTimelineSecondHeaderDetails property. 

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

        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;

        infiniteTimelineboolean

        When enabled, scrolling to the end of the horizotal timeline, triggers the creation of additional to extend the time range. The number of cells to be added when the scrollbar reaches the end position is determined by the infiniteTimelineStep.

        Default value

        false

        Example

        Set the infiniteTimeline property. 

         <smart-gantt-chart infinite-timeline></smart-gantt-chart>

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

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

        Get the infiniteTimeline property. 

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

        infiniteTimelineStepnumber

        Determines the number of cells to be added when the horizontal scroll bar of the Timeline reaches it's end position when infiniteTimeline is enabled.

        Default value

        5

        Example

        Set the infiniteTimelineStep property. 

         <smart-gantt-chart infinite-timeline-step='3'></smart-gantt-chart>

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

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

        Get the infiniteTimelineStep property. 

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

        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
        Try a demo showcasing the inverted property.

        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;

        keyboardNavigationboolean

        Determines whether keyboard navigation inside the Table is enabled or not. Keyboard navigation affects both Task and Resource Tables. It allows to navigate between items. the following keyboard shortcut keys are available for focused tasks inside the Task Table:

        • Enter - opens the Window editor to edit the currently focused task.
        • Delete - opens a confirmation window regarding the deletion of the currently focused task.

        Default value

        false
        Try a demo showcasing the keyboardNavigation property.

        Example

        Set the keyboardNavigation property. 

         <smart-gantt-chart keyboard-navigation></smart-gantt-chart>

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

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

        Get the keyboardNavigation property. 

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

        localestring

        Determines the language of the GanttChart.

        Default value

        "en"
        Try a demo showcasing the locale property.

        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;

        maxstring | date

        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;

        minstring | date

        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;

        monthScale"day" | "week"

        Determines the scale in Month view.

        Default value

        "week"

        Example

        Set the monthScale property. 

         <smart-gantt-chart month-scale='day'></smart-gantt-chart>

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

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.monthScale = 'week';

        Get the monthScale property. 

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

        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 not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled.

        Try a demo showcasing the nonworkingDays property.

        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[] | number[][]

        Determines the nonworking hours of a day. Hours are represented as numbers inside an array (e.g. [1,2,3] - means 1,2 and 3 AM) or number ranges represented as nested arrays(e.g. [[0,6]] - means from 0 to 6 AM). In the timline the cells that represent nonworking days are colored differently from the rest and will not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled.

        Try a demo showcasing the nonworkingHours property.

        Example

        Set the nonworkingHours property. 

         <smart-gantt-chart nonworking-hours='[[0, 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, 6]];

        Get the nonworkingHours property. 

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

        onTaskRenderfunction | null

        A function that can be used to completly customize the task element. The function has five arguments:

        • task - the task object.
        • segment - the task current segment object. If the task has only one segment, the task object is passed again.
        • taskElement - the task's html element.
        • segmentElement - the task's segment html element.
        • labelElement - the task's segment label html element.

        Try a demo showcasing the onTaskRender property.

        Example

        Set the onTaskRender property. 

         <smart-gantt-chart on-task-render='null'></smart-gantt-chart>

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

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.onTaskRender = function(task, segment, taskElement, segmentElement, labelElement) { if (task.type === 'task') { segmentElement.style.color = 'red'; } };

        Get the onTaskRender property. 

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

        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).
        • item - the connection/task object that is the target of the window.

        Try a demo showcasing the popupWindowCustomizationFunction property.

        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, item) { if (type === 'task') { target.headerPosition = 'left'; } };

        Get the popupWindowCustomizationFunction property. 

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

        popupWindowTabsstring[]

        Determines which Tab items are visible inside the popup window. Three possible values are allowed:

        • general - the general tab with task properties determines by the taskColumns property.
        • dependency - the dependency tab which shows the connections to the task and allows to create/delete connections.
        • segments - the segments tab which shows the segments of the task and allows to created/delete segments.
        .

        Default value

        ['general', 'dependency', 'segments']

        Example

        Set the popupWindowTabs property. 

         <smart-gantt-chart popup-window-tabs='['general', 'dependency']'></smart-gantt-chart>

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

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

        Get the popupWindowTabs property. 

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

        progressLabelFormatFunctionfunction | null

        A format function for the Timeline task progress label. The expected result from the function is a string. The label is hidden by default can be shown with the showProgressLabel property.

        Try a demo showcasing the progressLabelFormatFunction property.

        Example

        Set the progressLabelFormatFunction property. 

         <smart-gantt-chart progress-label-format-function='function(progress) { return progress }'></smart-gantt-chart>

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

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.progressLabelFormatFunction = null;

        Get the progressLabelFormatFunction property. 

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

        quarterFormat"numeric" | "long" | "short"

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

        Default value

        "short"

        Example

        Set the quarterFormat property. 

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

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

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

        Get the quarterFormat property. 

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

        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.

        Properties

        class
        capacity
        hidden
        id
        label
        minCapacity
        maxCapacity
        progress
        type
        value
        workload

        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;

        hiddenboolean | undefined

        Resource visibility.

        Default value

        false

        Get the hidden property. 

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

        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;

        typeany

        Resource type.

        Default value

        ""

        Get the type property. 

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

        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;
        Try a demo showcasing the resources property.

        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

        Properties

        label
        value
        min
        size
        formatFunction

        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;
        Try a demo showcasing the resourceColumns property.

        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;

        resourceFilteringboolean

        Determines whether the Resource Table is filterable or not.

        Default value

        false

        Example

        Set the resourceFiltering property. 

         <smart-gantt-chart resource-filtering></smart-gantt-chart>

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

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

        Get the resourceFiltering property. 

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

        resourceGroupFormatFunctionfunction | null

        A format function that allows to re-format the group row labels when groupByResources is enabled.

        Example

        Set the resourceGroupFormatFunction property. 

         <smart-gantt-chart resource-group-format-function='null'></smart-gantt-chart>

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

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourceGroupFormatFunction = function(resourceId) { return 'New Resource Group Label' };

        Get the resourceGroupFormatFunction property. 

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

        resourcePanelHeaderTemplateany

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

        Try a demo showcasing the resourcePanelHeaderTemplate property.

        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

        ""
        Try a demo showcasing the resourcePanelSize property.

        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
        Try a demo showcasing the resourcePanelRefreshRate property.

        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.

        Try a demo showcasing the resourceTimelineFormatFunction property.

        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.

        Allowed Values

        • "diagram" - Displays the capacity of the resources in the resource timeline for the tasks that the resource is assigned to.
        • "histogram" - Displays a histogram of the capacity and maxCapacity properties of the resources for the tasks they are assigned to in the resource timeline.
        • "custom" - Indicates that a custom content will be displayed for the resources in the timeline. The content is determined by the return value of the resourceTimelineFormatFunction.

        Default value

        "diagram"
        Try a demo showcasing the resourceTimelineMode property.

        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.

        Allowed Values

        • "hours" - Displays the capacity, maxCapacity and workload of the resources in the Timeline as hours per task.
        • "tasks" - Displays the number of tasks per resource depending on the date of the cells.
        • "custom" - Allows to customize the way resources are displayed in the Timeline via the resourceTimelineFormatFunction callback. The expected result from the callback is a string.

        Default value

        "hours"
        Try a demo showcasing the resourceTimelineView property.

        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
        Try a demo showcasing the rightToLeft property.

        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;

        selectedTaskIdsnumber[] | string[]

        Sets which tasks to select by their id or gets the currently selected task ids. If no id is provided for the task, an internal id is generated for each task according to it's index(tree path).

        Example

        Set the selectedTaskIds property. 

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

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

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

        Get the selectedTaskIds property. 

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

        selectedResourceIdsnumber[] | string[]

        Sets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path).

        Example

        Set the selectedResourceIds property. 

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

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

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

        Get the selectedResourceIds property. 

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

        shadeUntilCurrentTimeboolean

        Enables/Disables the current time shader. If enabled all cells that represent past time will be shaded.

        Default value

        false
        Try a demo showcasing the shadeUntilCurrentTime property.

        Example

        Set the shadeUntilCurrentTime property. 

         <smart-gantt-chart shade-until-current-time></smart-gantt-chart>

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

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

        Get the shadeUntilCurrentTime property. 

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

        showSelectionColumnboolean

        Shows the selection column of the Task/Resource Table. When applied a checkbox column is displayed that allows to select tasks/resources.

        Default value

        false

        Example

        Set the showSelectionColumn property. 

         <smart-gantt-chart show-selection-column></smart-gantt-chart>

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

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

        Get the showSelectionColumn property. 

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

        showBaselineboolean

        Determines whether the baselnes of the tasks are visible or not. Baselines are defined via the 'planned' attribute on the task objects of the dataSource property.

        Default value

        false

        Example

        Set the showBaseline property. 

         <smart-gantt-chart show-baseline></smart-gantt-chart>

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

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

        Get the showBaseline property. 

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

        showProgressLabelboolean

        Shows the progress label inside the progress bars of the Timeline tasks.

        Default value

        false

        Example

        Set the showProgressLabel property. 

         <smart-gantt-chart show-progress-label></smart-gantt-chart>

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

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

        Get the showProgressLabel property. 

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

        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;

        sortFunction{ (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void }

        Allows to set a custom sorting function to be executed when a column is sorted. Can be used to override the default sorting behavior. The function contains the following parameters:

        1. dataSource - the Table's data source
        2. sortColumns - an array of the data fields of columns to be sorted by
        3. directions - an array of sort directions to be sorted by (corresponding to sortColumns)
        4. defaultCompareFunctions - an array of default compare functions to be sorted by (corresponding to sortColumns), useful if the sorting of some columns does not have to be overridden
        .

        Example

        Set the sortFunction property. 

         <smart-gantt-chart sort-function='(dataSource, sortColumns, directions, compareFunctions) => dataSource.sort((a, b) => a - b)'></smart-gantt-chart>

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

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.sortFunction = (dataSource, sortColumns, directions, compareFunctions) => dataSource.sort((a, b) => b - a);

        Get the sortFunction property. 

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

        sortMode"none" | "one" | "many"

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

        Allowed Values

        • "none" - Sorting is disabled. Default value.
        • "one" - Allows sorting by a single column.
        • "many" - Allows sorting by multiple columns.

        Default value

        "none"
        Try a demo showcasing the sortMode property.

        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

        Properties

        connections
        class
        dateStart
        dateEnd
        deadline
        disableResources
        disableDrag
        disableResize
        dragProject
        duration
        expanded
        hidden
        id
        indicators
        label
        formatFunction
        onRender
        maxDateStart
        minDateStart
        maxDateEnd
        minDateEnd
        minDuration
        maxDuration
        overdue
        planned
        dateStart
        dateEnd
        duration

        connectionsarray

        Tasks connection.

        Default value

        null

        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;

        deadlinestring | Date

        Determines the deadline for the Project, Task or Milestone.

        Default value

        ""

        Get the deadline property. 

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

        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;

        durationnumber | undefined

        The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.

        Default value

        0

        Get the duration property. 

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

        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;

        hiddenboolean | undefined

        Task visibility.

        Default value

        false

        Get the hidden property. 

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

        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;

        indicators{label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[]

        Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.

        Properties

        label
        date
        className
        icon
        tooltip

        labelstring?

        Indicator label.

        Default value

        ""

        Get the label property. 

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

        datestring | Date

        Indicator date(can include time).

        Default value

        ""

        Get the date property. 

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

        classNamestring?

        A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.

        Get the className property. 

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

        iconstring?

        Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.

        Get the icon property. 

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

        tooltipstring?

        Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.

        Get the tooltip property. 

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

        Get the indicators property. 

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

        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;

        onRenderany

        Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.

        • task - the task object.
        • segment - the task current segment object. If the task has only one segment, the task object is passed again.
        • taskElement - the task's html element.
        • segmentElement - the task's segment html element.
        • labelElement - the task's segment label html element.

        Get the onRender property. 

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

        maxDateStartstring | Date

        Project, Task or Milestone max start date.

        Default value

        ""

        Get the maxDateStart property. 

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

        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;

        minDateEndstring | Date

        Project, Task or Milestone min end date.

        Default value

        ""

        Get the minDateEnd property. 

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

        minDurationnumber | undefined

        The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.

        Default value

        0

        Get the minDuration property. 

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

        maxDurationnumber | undefined

        The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.

        Default value

        0

        Get the maxDuration property. 

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

        overdueboolean

        Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.

        Default value

        false

        Get the overdue property. 

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

        planned{ dateStart: date | string | number, dateEnd: date | string | number, duration?: number }

        Determines the planned dateStart/dateEnd for as the baseline for the task.

        Default value

        null

        Properties

        dateStartstring | Date

        Determines the planned dateStart of the task.

        Default value

        ""

        Get the dateStart property. 

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

        dateEndstring | Date

        Determines the planned dateEnd of the task.

        Default value

        ""

        Get the dateEnd property. 

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

        durationnumber | undefined

        Determines the planned duration of the task.

        Default value

        0

        Get the duration property. 

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

        Get the planned property. 

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

        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].planned.progress;

        resourcesarray

        Project, Task or Milestone resources.

        Get the resources property. 

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

        segments{label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[]

        Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.

        Properties

        label
        dateStart
        dateEnd
        disableDrag
        disableResize
        duration
        formatFunction

        labelstring | null

        Segment label.

        Default value

        ""

        Get the label property. 

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

        dateStartstring | Date

        Segment start date.

        Default value

        ""

        Get the dateStart property. 

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

        dateEndstring | Date

        Segment end date.

        Default value

        ""

        Get the dateEnd property. 

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

        disableDragboolean

        Determines whether segment dragging is disabled.

        Default value

        false

        Get the disableDrag property. 

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

        disableResizeboolean

        Determines whether segment resizing is disabled.

        Default value

        false

        Get the disableResize property. 

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

        durationnumber | undefined

        The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.

        Default value

        0

        Get the duration property. 

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

        formatFunctionany

        Segment label format function.

        Get the formatFunction property. 

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

        Get the segments property. 

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

        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].planned.synchronized;

        tasksarray

        Project's tasks. Only projects can have tasks.

        Get the tasks property. 

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

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

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

        Default value

        "task"

        Get the type property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let type = ganttchart.tasks[0].planned.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].planned.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.

        Properties

        disableEdit
        dateFormat
        numberFormat
        label
        value
        size
        minWidth
        formatFunction
        customEditor
        getCustomEditorValue
        setCustomEditorValue

        disableEditboolean

        Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.

        Default value

        false

        Get the disableEdit property. 

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

        dateFormatstring | object | null

        Applies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: 

        dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
        . Another option is to use a date format string. Built-in Date formats:
        // short date pattern
        'd' - 'M/d/yyyy',
        // long date pattern
        'D' - 'dddd, MMMM dd, yyyy',
        // short time pattern
        't' - 'h:mm tt',
        // long time pattern
        'T' - 'h:mm:ss tt',
        // long date, short time pattern
        'f' - 'dddd, MMMM dd, yyyy h:mm tt',
        // long date, long time pattern
        'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
        // month/day pattern
        'M' - 'MMMM dd',
        // month/year pattern
        'Y' - 'yyyy MMMM',
        // S is a sortable format that does not vary by culture
        'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

        Date format strings:
        'd'-the day of the month;
        'dd'-the day of the month
        'ddd'-the abbreviated name of the day of the week
        'dddd'- the full name of the day of the week
        'h'-the hour, using a 12-hour clock from 1 to 12
        'hh'-the hour, using a 12-hour clock from 01 to 12

        'H'-the hour, using a 24-hour clock from 0 to 23
        'HH'- the hour, using a 24-hour clock from 00 to 23
        'm'-the minute, from 0 through 59
        'mm'-the minutes,from 00 though59
        'M'- the month, from 1 through 12
        'MM'- the month, from 01 through 12
        'MMM'-the abbreviated name of the month
        'MMMM'-the full name of the month
        's'-the second, from 0 through 59
        'ss'-the second, from 00 through 59
        't'- the first character of the AM/PM designator
        'tt'-the AM/PM designator
        'y'- the year, from 0 to 99
        'yy'- the year, from 00 to 99
        'yyy'-the year, with a minimum of three digits
        'yyyy'-the year as a four-digit number;
        'yyyyy'-the year as a four-digit number.

        Get the dateFormat property. 

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

        numberFormatstring | object | null

        Applies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings:
        'd' - decimal numbers.
        'f' - floating-point numbers.
        'n' - integer numbers.
        'c' - currency numbers.
        'p' - percentage numbers.

        For adding decimal places to the numbers, add a number after the formatting stri

        For example: 'c3' displays a number in this format $25.256

        Get the numberFormat property. 

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

        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;

        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;

        minWidthstring | number | null

        Column's min width.

        Default value

        0

        Get the minWidth property. 

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

        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;

        customEditorfunction | undefined | null

        A function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments:

        • name - the name of the task property that is going to be edited.
        • value - the value of the task property that is going to be edited.
        It's also important to define a getCustomEditorValue to return the value from the custom editor.

        Get the customEditor property. 

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

        getCustomEditorValuefunction | undefined | null

        A function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.

        Get the getCustomEditorValue property. 

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

        setCustomEditorValuefunction | undefined | null

        A function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments -

        • editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
        • columnValue - the value property of the column.
        • value - the value of the task property that the column displays(the editor value).

        Get the setCustomEditorValue property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let setCustomEditorValue = ganttchart.taskColumns[0].setCustomEditorValue;
        Try a demo showcasing the taskColumns property.

        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;

        taskFilteringboolean

        Determines whether the Task Table is filterable or not.

        Default value

        false

        Example

        Set the taskFiltering property. 

         <smart-gantt-chart task-filtering></smart-gantt-chart>

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

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

        Get the taskFiltering property. 

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

        taskPanelMinstring | number

        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;

        taskPanelSizestring | number

        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;

        timelineMinstring | number

        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;

        treeMinstring | number

        Determines the min width of the task table.

        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;

        treeSizestring | number

        Determines the size(width) of the task table.

        Default value

        100
        Try a demo showcasing the treeSize property.

        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. The function provides the following arguments:

        • date - a Date object that represets the date for the current cell.
        • type - a string that represents the type of date that the cell is showing, e.g. 'month', 'week', 'day', etc.
        • isHeaderDetails - a boolean that indicates whether the current cell is part of the Header Details Container or not.
        • value - a string that represents the default value for the cell provided by the element.

        Try a demo showcasing the timelineHeaderFormatFunction property.

        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, isHeaderDetails, value) { if (isHeaderDetails) { return 'Custom Header Function' } else { return date.toDateString() }  };

        Get the timelineHeaderFormatFunction property. 

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

        tooltipobject

        Determines whether the tooltips are enabled or not. Tooltips are available for timeline tasks, resources, connections, indicators and segments.

        Properties

        arrow
        delay
        enabled
        offset

        arrowboolean

        Determines whether the tooltip will have an arrow or not.

        Default value

        false

        Get the arrow property. 

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

        delaynumber

        Determines the delay (in miliseconds) before the tooltip is opened.

        Default value

        50

        Get the delay property. 

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

        enabledboolean

        Enabled or disables the tooltips.

        Default value

        false

        Get the enabled property. 

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

        offsetnumber[]

        Determines the [horizontal, vertical] offset (in pixels) for the tooltip position when opened.

        Get the offset property. 

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

        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" | "quarter" | "year"

        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.

        Allowed Values
        • "day" - The timeline displays days by hours.
        • "week" - The Timeline displays weeks by days.
        • "month" - The Timeline displays months by weeks. Depending on the 'monthScale' property value, it may display month by days.
        • "quarter" - The Timeline displays quarter by months.
        • "year" - The Timeline displays years by months.

        Default value

        "year"
        Try a demo showcasing the view property.

        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

        beginUpdateCustomEvent

        This event is triggered when a batch update was started after executing the beginUpdate method.

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

        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 beginUpdate event. 

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

        endUpdateCustomEvent

        This event is triggered when a batch update was ended from after executing the endUpdate method.

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

        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 endUpdate event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('endUpdate', function (event) {
	// 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.id - The id of the connection that was created.
        ev.detail.startTaskId - The id of the task that a connection is started from.
        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 ended to.
        ev.detail.endTaskId - The id of the task that a connection ended to.
        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,
        id = detail.id,
        startTaskId = detail.startTaskId,
        startIndex = detail.startIndex,
        endIndex = detail.endIndex,
        endTaskId = detail.endTaskId,
        type = detail.type;

	// event handling code goes here.
})

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

        columnResizeCustomEvent

        This event is triggered when a Tree column is resized. Column resizing is controled by the columnResize property.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.dataField - The name of the column. Corresponds to the value attribute of a taskColumns/resourceColumns object.
        ev.detail.headerCellElement - The HTMLElement column cell element that was resized.
        ev.detail.widthInPercentages - The new width of the column in percentages.
        ev.detail.width - The new width of the column in pixels.

        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 columnResize event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('columnResize', function (event) {
    const detail = event.detail,
        dataField = detail.dataField,
        headerCellElement = detail.headerCellElement,
        widthInPercentages = detail.widthInPercentages,
        width = detail.width;

	// event handling code goes here.
})

        closingCustomEvent

        This event is triggered just before the window for task editing or tooltip is 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.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip.
        ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
        ev.detail.target - The instance of the window/tooltip that is going to close.
        ev.detail.type - The type of window/tooltip 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.
        . If the event is a tooltip event, there are several tooltip types:
        • indicator - when the tooltip owner is an indicator.
        • segment - when the tooltip owner is a task segment.
        • task - when the tooltip owner is a task.
        • resource - when the tooltip target is a resource.

        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,
        owner = detail.owner,
        item = detail.item,
        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
        ev.detailObject
        ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
        ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
        ev.detail.target - The instance of the window/tooltip that is closed.
        ev.detail.type - The type of window/tooltip that is closed. 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.
        . If the event is a tooltip event, there are several tooltip types:
        • indicator - when the tooltip owner is an indicator.
        • segment - when the tooltip owner is a task segment.
        • task - when the tooltip owner is a task.
        • resource - when the tooltip target is a resource.

        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) {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

        collapseCustomEvent

        This event is triggered when an item is collapsed.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when groupByResoruces is enabled.
        ev.detail.item - The object details of the collapsed item.
        ev.detail.index - The index of the collapsed item.
        ev.detail.label - The label of the collapsed item.
        ev.detail.value - The value of the collapsed item.

        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 collapse event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('collapse', function (event) {
    const detail = event.detail,
        isGroup = detail.isGroup,
        item = detail.item,
        index = detail.index,
        label = detail.label,
        value = detail.value;

	// 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.id - The id of the task that is going to be dragged.
        ev.detail.item - The object 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.
        ev.detail.segment - The segment object that is going to be dragged. This attribute is undefined if a segment is not 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,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// 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.id - The id of the task that is was dragged.
        ev.detail.item - The object 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.
        ev.detail.segment - The segment object that was dragged. This attribute is undefined if a segment has not been 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,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

        expandCustomEvent

        This event is triggered when an item is expanded.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when groupByResoruces is enabled.
        ev.detail.item - The index of the expanded item.
        ev.detail.index - The index of the expanded item.
        ev.detail.label - The label of the expanded item.
        ev.detail.value - The value of the expanded item.

        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 expand event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('expand', function (event) {
    const detail = event.detail,
        isGroup = detail.isGroup,
        item = detail.item,
        index = detail.index,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

        filterCustomEvent

        This event is triggered when the GanttChart is filtered.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.type - The type of items that have been filtered ( task or resource ).
        ev.detail.action - The name of the filtering action (whether filtering is added or removed).
        ev.detail.filters - The filters that have been applied. Filters represent Smart.Utilities.FilterGroup objects.

        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 filter event. 

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

	// event handling code goes here.
})

        itemClickCustomEvent

        This event is triggered when a task, resource or connection is clicked inside the Timeline or the Tree columns.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task.
        ev.detail.item - The item that was clicked. It can be a task, resource or connection.
        ev.detail.type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
        ev.detail.originalEvent - The original DOM event.

        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 itemClick event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('itemClick', function (event) {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        type = detail.type,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

        itemInsertCustomEvent

        This event is triggered when a Task/Resource/Connection is inserted.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
        ev.detail.item - An object that represents the actual item with it's attributes.

        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 itemInsert event. 

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

	// event handling code goes here.
})

        itemRemoveCustomEvent

        This event is triggered when a Task/Resource/Connection is removed.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task.
        ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
        ev.detail.item - An object that represents the actual item with it's attributes.

        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 itemRemove event. 

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

	// event handling code goes here.
})

        itemUpdateCustomEvent

        This event is triggered when a Task/Resource/Connection is updated.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task.
        ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
        ev.detail.item - An object that represents the actual item with it's attributes.

        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 itemUpdate event. 

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

	// event handling code goes here.
})

        openingCustomEvent

        This event is triggered just before the window for task editing or tooltip is 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.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
        ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
        ev.detail.target - The instance of the window/tooltip that is going to open.
        ev.detail.type - The type of window/tooltip 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.
        . If the event is a tooltip event, there are several tooltip types:
        • indicator - when the tooltip owner is an indicator.
        • segment - when the tooltip owner is a task segment.
        • task - when the tooltip owner is a task.
        • resource - when the tooltip target is a resource.

        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,
        owner = detail.owner,
        item = detail.item,
        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 ) or when the tooltip is opened.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
        ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
        ev.detail.target - The instance of the window/tooltip that is opened.
        ev.detail.type - The type of window/tooltip that is opened. 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.
        . If the event is a tooltip event, there are several tooltip types:
        • indicator - when the tooltip owner is an indicator.
        • segment - when the tooltip owner is a task segment.
        • task - when the tooltip owner is a task.
        • resource - when the tooltip target is a resource.

        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) {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// 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.id - The id of the task.
        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,
        id = detail.id,
        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.id - The id of the task.
        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,
        id = detail.id,
        index = detail.index,
        progress = detail.progress;

	// 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.id - The id of the task that is going to be resized.
        ev.detail.item - The object 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.
        ev.detail.segment - The segment object that is going to be resized. This attribute is undefined if a segment is not 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,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// 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.id - The id of the task that was resized.
        ev.detail.item - The object 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.
        ev.detail.segment - The segment object that was resized. This attribute is undefined if a segment has not been 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,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

        sortCustomEvent

        This event is triggered when the GanttChart is sorted by some column.

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

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.type - The type of columns that have been sorted ( task or resource column ).
        ev.detail.columns - An array of objects that contains the currently sorted column objects.
        ev.detail.sortDataFields - The dataFields of the columns that have been sorted. The dataField corresponds to the value property of a taskColumns/resourceColumns object.
        ev.detail.sortOrders - The orders of the columns that have been sorted.
        ev.detail.sortDataTypes - The data types of the columns that have been sorted.

        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 sort event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('sort', function (event) {
    const detail = event.detail,
        type = detail.type,
        columns = detail.columns,
        sortDataFields = detail.sortDataFields,
        sortOrders = detail.sortOrders,
        sortDataTypes = detail.sortDataTypes;

	// 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.
})

        scrollLeftReachedCustomEvent

        This event is triggered when the Timeline has been scrolled to the beginning (horizontally).

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

        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 scrollLeftReached event. 

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

        scrollRightReachedCustomEvent

        This event is triggered when the Timeline has been scrolled to the end (horizontally).

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

        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 scrollRightReached event. 

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

        Methods

        addFilter( columns: any, filterGroup: any): void

        Adds a custom filter to a specific column (task or resource column).

        Arguments

        columnsany

        An object or an array of objects with the following syntax:

        • type - indicates the type of column to filter. Possible values are 'task' or 'resource'.
        • value - the value of the column that must match the value attribute of a taskColumns/resourceColumns object(e.g. 'label', 'dateStart', etc).
        .

        filterGroupany

        A Smart.Utilities.FilterGroup object. Here's an example for creating a FilterGroup object: 

        const filterGroup = new window.Smart.Utilities.FilterGroup(), filterObject = filterGroup.createFilter('string', 'Task B', 'STARTS_WITH_CASE_SENSITIVE'); filterGroup.addFilter('or', filterObject); gantt.addFilter({ type: 'task', value: 'label' }, filterGroup);


        Invoke the addFilter method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addFilter("{ type: 'task', value: 'label' }, FilterGroup");

        clearFilters(): void

        Clears the currently applied filters.


        Invoke the clearFilters method.

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

        clearSort(): void

        Clears the currently applied column sorting.


        Invoke the clearSort method.

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

        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-gantt-chart');
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-gantt-chart');
ganttchart.clearState("state");

        clearTasks(): void

        Removes all tasks.


        Invoke the clearTasks method.

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

        clearResources(): void

        Removes all resources.


        Invoke the clearResources method.

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

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

        Creates a connection between two tasks.

        Arguments

        startTaskIndexnumber | string

        The id of the start task or the connection string like '2-3-0'. If the complete connections string is provided as the first argument, the rest of the method arguments are not necessary

        taskEndIndex?number | string

        The id of the end task.

        connectionType?number

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

        • 0 - Start-to-Start connection.
        • 1 - End-to-Start connection.
        • 2 - End-to-End connection.
        • 3 - Start-to-End connection.

        lag?number

        The connection lag in miliseconds. Used by the Auto scheduling algorithm in order allow some slack time slack time before or after the next task begins/ends. Lag is measured in miliseconds. It can be a negative (lead) or a positive (lag) number.


        Invoke the createConnection method.

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

        collapse( id: string | number): void

        Collapses an expanded project.

        Arguments

        idstring | number

        The id of a project item that should be collapsed.


        Invoke the collapse method.

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

        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-gantt-chart');
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-gantt-chart');
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-gantt-chart');
ganttchart.refresh(true,false);

        ensureVisible( taskId: string | number): void

        Makes sure a Task is visible by scrolling to it.

        Arguments

        taskIdstring | number

        The id of the target Task.


        Invoke the ensureVisible method.

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

        expand( id: string | number): void

        Expands a collapsed project with tasks.

        Arguments

        idstring | number

        The id of a project task that should be expanded.


        Invoke the expand method.

        const ganttchart = document.querySelector('smart-gantt-chart');
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
        • tsv
        • csv
        • xml

        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-gantt-chart');
ganttchart.exportData("'pdf'");

        getConnections(): array

        Returns all existing connections. The connections are returned as objects that contain detailed information. Each object in the array has the following keys: 'id' - connection id, 'type' - connection type, 'startTaskId' - connection's start task id, 'endTaskId' - connection's end task id, 'startIndex' - connection's start task index, 'endIndex' - connection's end task index, 'lag' - lag time.

        Returnsarray

        Invoke the getConnections method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getConnections();

        getConnectionDetails( connectionId: string): object | undefined

        Returns the connection details for the target connection which includes: startTask, endTask, startTaskId, endTaskId and type of the corresponding connection. Connection types are described in detail under the `connectionEnd` event description in this document and in a dedicated topic available on the website.

        Arguments

        connectionIdstring

        A connection id. Each connection has a unique id that is assigned when a connection is created.

        Returnsobject | undefined

        Invoke the getConnectionDetails method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getConnectionDetails("0-3-0","6-15-1");

        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-gantt-chart');
const result = ganttchart.getState();

        getItemPath( item: any): string

        Returns the Tree path of a task/resource. The tree path is used as task/resource id if no id is provided by the user.

        Arguments

        itemany

        A GattChartTask/GanttChartResource item object.

        Returnsstring

        Invoke the getItemPath method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getItemPath("task");

        getTask( itemId: string | number): object

        Returns the task object that corresponds to the id/path.

        Arguments

        itemIdstring | number

        The id/path of a task.

        Returnsobject

        Invoke the getTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTask("0.4");

        getTasks(): []

        Returns an array of all GanttChart tasks.

        Returns[]

        Invoke the getTasks method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTasks();

        getTaskIndex( task: any): number

        Returns the index of a task.

        Arguments

        taskany

        A GattChartTask object.

        Returnsnumber

        Invoke the getTaskIndex method.

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

        getTaskConnections( taskId: any): any

        Returns the connections definitions of a task.

        Arguments

        taskIdany

        A GanttChartTask object or it's id.

        Returnsany

        Invoke the getTaskConnections method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTaskConnections("0");

        getTaskProject( task: any): object | undefined

        Returns the Project of a task or undefined if it does not have one.

        Arguments

        taskany

        A GantChartTask object.

        Returnsobject | undefined

        Invoke the getTaskProject method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTaskProject("taskA","taskB");

        getResource( itemId: string | number): object

        Returns the resource object that corresponds to the id/path.

        Arguments

        itemIdstring | number

        The id/path of a resource.

        Returnsobject

        Invoke the getResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getResource("4");

        getResources(): []

        Returns an array of all GanttChart resources.

        Returns[]

        Invoke the getResources method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getResources();

        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-gantt-chart');
const result = ganttchart.getResourceIndex("ganttChartResource");

        getResourceTasks( resource: any): array

        Returns the tasks that are assigned to the resource.

        Arguments

        resourceany

        A GanttChartResource object or it's id.

        Returnsarray

        Invoke the getResourceTasks method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getResourceTasks("ganttChartResource");

        getSelectedIds(): array | null

        Returns the currently selected tasks/resource ids. If selection is disabled or no items are selected returns null.

        Returnsarray | null

        Invoke the getSelectedIds method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getSelectedIds();

        getSelectedTasks(): array | null

        Returns the currently selected tasks.

        Returnsarray | null

        Invoke the getSelectedTasks method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getSelectedTasks();

        getSelectedResources(): array | null

        Returns the currently selected resources.

        Returnsarray | null

        Invoke the getSelectedResources method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getSelectedResources();

        getWorkingHours(): array

        Returns the working hours of the day as numbers.

        Returnsarray

        Invoke the getWorkingHours method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getWorkingHours();

        hideTooltip(): array

        Hides the tooltip if it's visible.

        Returnsarray

        Invoke the hideTooltip method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.hideTooltip();

        isWorkingDay( date: Date): void

        Depending on the nonworkingDays property, returns true or false whether the target date is on a working day or not.

        Arguments

        dateDate

        A javascript Date object or a string/number which represents a valid JS Date.


        Invoke the isWorkingDay method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.isWorkingDay("new Date(2021, 1, 10)");

        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-gantt-chart');
ganttchart.loadState("state");

        removeAllConnections(): void

        Removes all connections between tasks.


        Invoke the removeAllConnections method.

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

        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-gantt-chart');
const result = ganttchart.removeConnection("0, 4, 1");

        removeTaskConnection( taskStart: any, taskEnd?: any): void

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

        Arguments

        taskStartany

        The start task object or it's id.

        taskEnd?any

        The end task object or it's id.


        Invoke the removeTaskConnection method.

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

        showTooltip( target: HTMLElement, content?: string): void

        Shows the tooltip for a specific element.

        Arguments

        targetHTMLElement

        The HTMLElement that will be the target of the tooltip.

        content?string

        Allows to set a custom content for the Tooltip.


        Invoke the showTooltip method.

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

        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-gantt-chart');
ganttchart.saveState("state");

        insertTask( taskObject: any, project?: any, index?: number): string | number | undefined

        Inserts a new task in the timeline. The new task can be inserted as a sub task of a project by passing the appropriate argument for the project id or as a root level item.

        Arguments

        taskObjectany

        An object describing a Gantt Chart task.

        project?any

        A number or string that represents the id of a project (e.g. '0') or a project object definition present in the GanttChart. This parameter determines the parent project of the task that will be inserted. If null is passed as an arguemnt the new task will be inserted at root level without a parent project.

        index?number

        The index where the new item should be inserted(e.g. 2). This index will determine the position of the newly inserted task.

        Returnsstring | number | undefined

        Invoke the insertTask method.

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

        updateTask( taskId: any, taskObject: any): void

        Updates a task/project/milestone.

        Arguments

        taskIdany

        A number or string that represents the id of a task/project(e.g. '0') or the object definition of the task/project.

        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-gantt-chart');
ganttchart.updateTask("'2', { label: 'Updated Task', dateEnd: '2020-12-23' }");

        removeTask( taskId: any): void

        Removes a task from the timeline.

        Arguments

        taskIdany

        A number or string that represents the id of a task or the actual item object.


        Invoke the removeTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
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-gantt-chart');
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-gantt-chart');
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-gantt-chart');
ganttchart.removeResource("0");

        openWindow( taskId: any): void

        Opens the popup Window for specific task to edit or to delete a connection if a connection string is passed.

        Arguments

        taskIdany

        A string or number that represents the id of a task or the task object that is going to be edited or a connection string(e.g. '2-0-0').


        Invoke the openWindow method.

        const ganttchart = document.querySelector('smart-gantt-chart');
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-gantt-chart');
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-gantt-chart');
ganttchart.print();

        setWorkTime( settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): void

        Allows to sets the working days and hours at once.

        Arguments

        settings{ days: (number | string | number[])[], hours: (number | string | number[])[] }

        An object definition that contains the days and hours that should be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.


        Invoke the setWorkTime method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.setWorkTime("{ days: ['1-3']}","{ days: [[1,3]], hours: ['0:00-7:00']}");

        selectTask( id: string | number): void

        Allows to select a task based on it's id.

        Arguments

        idstring | number

        The id of the task to select.


        Invoke the selectTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.selectTask(1,"5");

        selectResource( id: string | number): void

        Allows to select a resource based on it's id.

        Arguments

        idstring | number

        The id of the resource to select.


        Invoke the selectResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.selectResource(1,"5");

        unselectTask( id: string | number): void

        Allows to unselect a task based on it's id.

        Arguments

        idstring | number

        The id of the task to unselect.


        Invoke the unselectTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.unselectTask(1,"5");

        unselectResource( id: string | number): void

        Allows to unselect a resource based on it's id.

        Arguments

        idstring | number

        The id of the resource to unselect.


        Invoke the unselectResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.unselectResource(1,"5");

        unsetWorkTime( settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): void

        Allows to unset previously set working time. The opposte method for setWorkingTime.

        Arguments

        settings{ days: (number | string | number[])[], hours: (number | string | number[])[] }

        An object definition that contains the days and hours that should not be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.


        Invoke the unsetWorkTime method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.unsetWorkTime("{ days: ['1-3']}","{ days: [[1,3]], hours: ['0:00-7:00']}");

        sort( columns: any): void

        Sorts the GanttChart tasks/resources if sortable is enabled.

        Arguments

        columnsany

        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-gantt-chart');
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-resource-splitter-bar-fit-sizevar()

        Default value

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

        Determines the size of the splitter bar inside the Resource panel between the Table component and Resource timeline.

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

        Default value

        "var(--smart-gantt-chart-task-timeline-content-height)"

        Determines the height of the splitter nar inside the Task panel between the Table component and the Task timeline.

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

        Default value

        "30px"

        The height of a Task inside the Timeline

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

        Default value

        "var(--smart-gantt-chart-task-default-height)"

        The height of the Timeline Header container that is only displayed when the headerTemplate property is set. By default it's hidden.

        --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 and the Tree columns.

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

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

        Default value

        "50px"

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

        --smart-gantt-chart-header-placeholdervar()

        Default value

        " - "

        Determines the placeholder for the Timeline headers when there are no tasks.

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

        Default value

        "0 10px 0 10px"

        Determines the padding for the Timeline task progress label.

        --smart-gantt-chart-filter-row-heightvar()

        Default value

        "30px"

        Determines the height of the filter row that is displayed when taskFiltering or resourceFiltering is enabled.

        --smart-gantt-chart-task-fill-border-radiusvar()

        Default value

        "0"

        Determines the default border radius for the Timeline task bars.

        --smart-gantt-chart-segment-link-colorvar()

        Default value

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

        Determines the color of the link between the segments of a task.

        --smart-gantt-chart-segment-link-sizevar()

        Default value

        "var(--smart-border-width)"

        Determines the size of the links between the segments of a task.

        --smart-gantt-chart-date-marker-colorvar()

        Default value

        "var(--smart-primary)"

        Determines the text color for the date markers.

        --smart-gantt-chart-date-marker-heightvar()

        Default value

        "25px"

        Determines the height of the date markers.

        --smart-gantt-chart-date-marker-widthvar()

        Default value

        "var(--smart-border-width)"

        Determines the width of the date markers.

        --smart-gantt-chart-date-marker-backgroundvar()

        Default value

        "var(--smart-primary)"

        Determines the background for the date marker label.

        --smart-gantt-chart-date-marker-colorvar()

        Default value

        "var(--smart-primary-color)"

        Determines the text color for the date marker label.

        --smart-gantt-chart-date-marker-h-offsetvar()

        Default value

        "10px"

        Determines the horizontal offset for the date marker label.

        --smart-gantt-chart-date-marker-v-offsetvar()

        Default value

        "15%"

        Determines the vertical offset for the date marker label.

        --smart-gantt-chart-deadline-iconvar()

        Default value

        "var(--smart-icon-attention-circled)"

        Determines the icon for the deadlines.

        --smart-gantt-chart-deadline-colorvar()

        Default value

        "var(--smart-error)"

        Determines the color for the deadlines icons.

        --smart-gantt-chart-baseline-proportionvar()

        Default value

        "2"

        Determines the proportion of the baseline compared to the task height. For example, the default value 2 means that the baseline will be taskHeight / 2.

        --smart-gantt-chart-baseline-backgroundvar()

        Default value

        "rgba(166, 205, 87, .5)"

        Determines the background of the baseline.

        --smart-gantt-chart-progress-label-widthvar()

        Default value

        "60px"

        Determines the width of the progress label.

        --smart-gantt-chart-current-time-indicator-sizevar()

        Default value

        "1px"

        Determines the current time indicator width.

        --smart-gantt-chart-current-time-indicator-backgroundvar()

        Default value

        "var(--smart-primary)"

        Determines the current time indicator background.

        --smart-gantt-chart-current-time-indicator-arrow-sizevar()

        Default value

        "7px"

        Determines the arrow size of the curernt time indicator.

        --smart-gantt-chart-current-time-indicator-header-sizevar()

        Default value

        "2px"

        Determines the current time indicator size inside the timeline header cell.

        --smart-gantt-chart-shader-backgroundvar()

        Default value

        "rgba(var(--smart-border-rgb), .5)"

        Determines the current time shader background color.