Element: <oj-gantt-task>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

Signature:

class ojGanttTask

QuickNav

Attributes


PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 7.1.0
Since:
  • 5.2.0
Module:
  • ojgantt

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojGanttTask} from "ojs/ojgantt";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojgantt";

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

JET Gantt Task

The oj-gantt-task element is used to declare properties for gantt tasks and is only valid as the child of a template element for the taskTemplate slot of oj-gantt.


<oj-gantt task-data="[[taskDataProvider]]">
  <template slot="taskTemplate">
    <oj-gantt-task
      row-id="[[$current.data.resource]]"
      start="[[$current.data.begin]]"
      end="[[$current.data.finish]]">
    </oj-gantt-task>
  </template>
</oj-gantt>

Attributes

baseline :Object

Specifies the baseline of the task. When only one of 'start' or 'end' value is specified, or when 'start' and 'end' values are equal, the baseline is considered a milestone baseline.

baseline.border-radius :string

The border radius of the baseline. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.baseline.border-radius.

See the baseline attribute for usage examples.

baseline.end :string

The end time of the baseline. Optional if baseline is a milestone. Either start or end has to be defined in order for the baseline to properly render. See Date and Time Formats for more details on the required string formats.

See the baseline attribute for usage examples.
Default Value:
  • ""

baseline.height :number

The height of the baseline in pixels. The default value comes from the gantt's task-defaults.baseline.height.

See the baseline attribute for usage examples.

baseline.start :string

The start time of the baseline. Optional if baseline is a milestone. Either start or end has to be defined in order for the baseline to properly render. See Date and Time Formats for more details on the required string formats.

See the baseline attribute for usage examples.
Default Value:
  • ""

baseline.svg-class-name :string

A space delimited list of CSS style classes defining the style of the baseline. The default value comes from the gantt's task-defaults.baseline.svg-class-name.

See the baseline attribute for usage examples.

baseline.svg-style :CSSStyleDeclaration

The CSS style defining the style of the baseline. The default value comes from the gantt's task-defaults.baseline.svg-style.

See the baseline attribute for usage examples.

border-radius :string

The border radius of the task. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.border-radius.

end :string

The end time of this task. Optional if task is a single date event like Milestone. Either start or end has to be defined in order for the task to properly render. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""

height :number

The height of the task in pixels. Since row heights can also be set via the gantt's row-defaults.height attribute, applications typically should make sure that their task heights are less than the row height. The default value comes from the gantt's task-defaults.height.

label :string

The label associated with the task.
Default Value:
  • ""

label-position :"start"|"innerCenter"|"innerStart"|"innerEnd"|"end"|"none"

The position of the label relative to the task. An array of values is also supported. If an array is specified, then the values are traversed until a position that can fully display the label is found. If 'max' is specified in the array, then of all the positions evaluated up to that point of the traversal, the one with the largest space is used (label is truncated to fit). Naturally, 'max' is ignored if it's specified as the first value of the array. If the last value of the array is reached, but the label cannot be fully displayed, then the label is placed at that position, truncated to fit. Due to space constraints in the milestone and task with progress cases, the inner positions will exhibit the following behaviors:
  • For milestones, specifying 'innerStart', 'innerEnd', or 'innerCenter' would be equivalent to specifying 'start', 'end', and 'end' respectively.
  • For tasks with progress, 'innerCenter' means the label will be aligned to the end of the progress bar, either placed inside or outside of the progress, whichever is the larger space. 'innerStart' and 'innerEnd' positions are honored when there is enough space to show the label at those positions. Otherwise, the aforementioned 'innerCenter' behavior is exhibited.
The default value comes from the gantt's task-defaults.label-position.
Supported Values:
Value
"end"
"innerCenter"
"innerEnd"
"innerStart"
"none"
"start"

label-style :CSSStyleDeclaration

The CSS style defining the style of the label. Only CSS style applicable to SVG elements can be used.
Default Value:
  • {}

overlap :Object

Configures the placement of this task relative to a task it overlaps with.

overlap.behavior :"stack"|"stagger"|"overlay"|"auto"

The behavior when this task (task2) overlaps a chronologically previous adjacent task (task1).
  • 'stack': task2 is placed above task1 if there is no chronological conflict with previous tasks. Otherwise, task2 is shifted down relative to task1 by the specified offset amount.
  • 'stagger': task2 is shifted up or down relative to its normal position by the specified offset amount, depending on whether task1 was shifted down or up respectively, such that the chain of overlapping tasks it participates in forms a zigzag pattern. If task1 is the first task of the chain, then task2 is shifted down.
  • 'overlay': task2 remains in its normal position (ignoring the specified offset amount), and is placed above all tasks it overlaps with.
  • 'auto': The behavior depends on the row-defaults.height value: the behavior is 'stack' if row height is not specified or null, and the behavior is 'stagger' otherwise.
The default value comes from the gantt's task-defaults.overlap.behavior.

See the overlap attribute for usage examples.
Supported Values:
Value
"auto"
"overlay"
"stack"
"stagger"

progress :Object

Specifies the progress of the task. This property is ignored if the task is a milestone.

progress.border-radius :string

The border radius of the progress bar. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.progress.border-radius.

See the progress attribute for usage examples.

progress.height :string

Specifies the height of the progress bar in pixels (e.g. '50px') or percent of the associated task bar (e.g. '15%'). The default value comes from the gantt's task-defaults.progress.height.

See the progress attribute for usage examples.

progress.svg-class-name :string

A space delimited list of CSS style classes to apply to the progress bar. Note that only CSS style applicable to SVG elements can be used. The default value comes from the gantt's task-defaults.progress.svg-class-name.

See the progress attribute for usage examples.

progress.svg-style :CSSStyleDeclaration

The CSS inline style to apply to the progress bar. Only CSS style applicable to SVG elements can be used. The default value comes from the gantt's task-defaults.progress.svg-style.

See the progress attribute for usage examples.

(nullable) progress.value :number

The value of the progress between 0 and 1 inclusive. If not specified or invalid, no progress will be shown.

See the progress attribute for usage examples.
Default Value:
  • null

row-id :any

The id for the row the task belongs to.

(nullable) short-desc :string

The description of the task. This is used for accessibility and for customizing the tooltip text.
Default Value:
  • null

start :string

The start time of this task. Optional if task is a single date event like Milestone. Either start or end has to be defined in order for the task to properly render. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""

svg-class-name :string

A space delimited list of CSS style classes defining the style of the task. The default value comes from the gantt's task-defaults.svg-class-name.

svg-style :CSSStyleDeclaration

The CSS style defining the style of the task. The default value comes from the gantt's task-defaults.svg-style.

type :"normal"|"milestone"|"summary"|"auto"

Defines the task type to be rendered.

If "milestone", and if 'start' and 'end' values are specified and unequal, the 'start' value is used to evaluate position.

If "auto", the type is inferred from the data:
  • If 'start' and 'end' values are specified and unequal, "normal" type is assumed.
  • Otherwise, "milestone" type is assumed.
The default value comes from the gantt's task-defaults.type.
Supported Values:
Value
"auto"
"milestone"
"normal"
"summary"