Element: <oj-gantt-task>

Oracle® JavaScript Extension Toolkit (JET)
15.0.0
F75901-01

Since:
  • 5.2.0
Module:
  • ojgantt

QuickNav

Attributes


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
      task-id="[[$current.data.ID]]"
      start="[[$current.data.begin]]"
      end="[[$current.data.finish]]">
    </oj-gantt-task>
  </template>
</oj-gantt>


Usage

Signature:

interface GanttTaskElement<K2=any,D2=any> extends dvtTimeComponent<ojGanttTaskSettableProperties<K2,D2>

Generic Parameters
ParameterDescription
K2Type of key of the taskData dataprovider
D2Type of data from the taskData dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { GanttTaskElement } from "ojs/ojgantt";

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

For additional information visit:


Attributes

attribute :Object

Specifies the attribute of the task.

attribute.rendered :"on"|"off"

Specifies whether the attribute bar is rendered.

See the attribute attribute for usage examples.
Supported Values:
Value
off
on
Default Value:
  • "off"

(nullable) attribute.short-desc :(string | ((context: ojGantt.TaskShortDescContext<K2,D2) => string))

The description of the attribute. This is used for accessibility. If the top level shortDesc is also specified, then this one is not used.

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

attribute.svg-class-name :string

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

See the attribute attribute for usage examples.

(nullable) attribute.svg-style :Partial<CSSStyleDeclaration>

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

See the attribute attribute for usage examples. Only SVG CSS style properties are supported.

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.

(nullable) baseline.svg-style :Partial<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. Only SVG CSS style properties are supported.

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.

downtime :Object

Specifies the downtime of the task.

downtime.end :string

The end time of the downtime. Both the start and end has to be defined in order for the downtime to properly render. See Date and Time Formats for more details on the required string formats.

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

downtime.start :string

The start time of the downtime. Both the start and end has to be defined in order for the downtime to properly render. See Date and Time Formats for more details on the required string formats.

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

downtime.svg-class-name :string

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

See the downtime attribute for usage examples.

(nullable) downtime.svg-style :Partial<CSSStyleDeclaration>

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

See the downtime attribute for usage examples. Only SVG CSS style properties are supported.

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

(nullable) label-style :Partial<CSSStyleDeclaration>

The CSS style defining the style of the label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
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

overtime :Object

Specifies the overtime of the task.

overtime.end :string

The end time of the overtime. Both the start and end has to be defined in order for the overtime to properly render. See Date and Time Formats for more details on the required string formats.

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

overtime.start :string

The start time of the overtime. Both the start and end has to be defined in order for the overtime to properly render. See Date and Time Formats for more details on the required string formats.

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

overtime.svg-class-name :string

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

See the overtime attribute for usage examples.

(nullable) overtime.svg-style :Partial<CSSStyleDeclaration>

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

See the overtime attribute for usage examples. Only SVG CSS style properties are supported.

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.

(nullable) progress.svg-style :Partial<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. Only SVG CSS style properties are supported.

(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. This is required if data is set using task-data attribute.
Deprecated:
Since Description
12.0.0 Set the data using the row-data attribute instead of task-data, and specify task-id instead of this attribute.

(nullable) short-desc :(string | ((context: ojGantt.TaskShortDescContext<K2,D2>) => 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.

(nullable) svg-style :Partial<CSSStyleDeclaration>

The CSS style defining the style of the task. The default value comes from the gantt's task-defaults.svg-style. Only SVG CSS style properties are supported.

task-id :string

The id of the task. This is required if data is set using row-data attribute.

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