Components / Gantt / API / GanttComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

GanttComponent

Represents the Kendo UI Gantt component for Angular.

@Component({
   selector: 'my-app',
   template: `
       <kendo-gantt
           [style.height.px]="500"
           [kendoGanttHierarchyBinding]="data"
           childrenField="subtasks"
           [dependencies]="dependencies">
           <kendo-gantt-column
               field="title"
               title="Task"
               [width]="200"
               [expandable]="true"></kendo-gantt-column>
           <kendo-gantt-column
               field="start"
               title="Start"
               format="dd-MMM-yyyy"
               [width]="120"></kendo-gantt-column>
           <kendo-gantt-column
               field="end"
               title="End"
               format="dd-MMM-yyyy"
               [width]="120"></kendo-gantt-column>
           <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>
           <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>
           <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>
       </kendo-gantt>
   `
})
class AppComponent {
    public data: Task[] = [{
        id: 7, title: 'Validation and R&D', start: new Date('2014-06-02T00:00:00.000Z'),
        end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.45708333333333334,
        subtasks: [
            { id: 18, title: 'Project Kickoff', start: new Date('2014-06-02T00:00:00.000Z'),
                end: new Date('2014-06-02T00:00:00.000Z'), completionRatio: 0.23 },
            { id: 11, title: 'Research', start: new Date('2014-06-02T00:00:00.000Z'),
                end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.5766666666666667,
                subtasks: [
                    { id: 19, title: 'Validation', start: new Date('2014-06-02T00:00:00.000Z'),
                        end: new Date('2014-06-04T00:00:00.000Z'), completionRatio: 0.25 },
                    { id: 39, title: 'Specification', start: new Date('2014-06-04T00:00:00.000Z'),
                        end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.66 }]
            }, { id: 13, title: 'Implementation', start: new Date('2014-06-08T00:00:00.000Z'),
                end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.77,
                subtasks: [
                    { id: 24, title: 'Prototype', start: new Date('2014-06-08T00:00:00.000Z'),
                        end: new Date('2014-06-14T00:00:00.000Z'), completionRatio: 0.77 },
                    { id: 29, title: 'UI and Interaction', start: new Date('2014-06-14T00:00:00.000Z'),
                        end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.6 }]
            }, { id: 17, title: 'Release', start: new Date('2014-06-19T00:00:00.000Z'),
                end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0 }]
    }];

    public dependencies: GanttDependency[] = [
        { id: 528, fromId: 18, toId: 19, type: DependencyType.FS },
        { id: 529, fromId: 19, toId: 39, type: DependencyType.FS },
        { id: 535, fromId: 24, toId: 29, type: DependencyType.FS },
        { id: 551, fromId: 13, toId: 29, type: DependencyType.FF },
        { id: 777, fromId: 7, toId: 11, type: DependencyType.SF },
        { id: 556, fromId: 39, toId: 24, type: DependencyType.FS },
        { id: 546, fromId: 29, toId: 17, type: DependencyType.FS },
    ];
}

Selector

kendo-gantt

Export Name

Accessible in templates as #kendoGanttInstance="kendoGantt"

Inputs

NameTypeDefaultDescription

activeView

TimelineViewType

'week'

The active timeline view.

columnMenu

boolean | ColumnMenuSettings

false

Specifies if the column menu of the columns will be displayed.

columnsAutoSize

boolean

false

Indicates whether the Gantt columns will be resized during initialization so that they fit their headers and row content. Columns with autoSize set to false are excluded.

columnsReorderable

boolean

false

If set to true, the user can reorder columns by dragging their header cells.

columnsResizable

boolean

false

If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.

currentTimeMarker

boolean | CurrentTimeSettings

true

Specifies the Gantt current time marker settings. The settings will be applied for all views. If the currentTimeMarker is set for a view then it takes precedence.

data

any[]

Gets or sets the data of the Gantt.

The task data items should either conform to the GanttTask interface, or a taskModelFields object has to be provided.

dependencies

any[]

Defines the dependencies that will be drawn between the rendered tasks.

The dependency data items should either conform to the GanttDependency interface, or a dependencyModelFields object has to be provided.

dependencyModelFields

GanttDependencyModelFields

Sets the fields which will be used to extract the dependency data from the provided dependencies array items.

If no object is provided, the Gantt dependency data items will have to conform to the GanttDependency interface.

dragScrollSettings

DragScrollSettings

Specifies the settings for auto-scrolling during dragging when the pointer moves outside of the container bounderies see example.

fetchChildren

(dataItem: any) => object[] | Observable<object[]>

Gets or sets the callback function that retrieves the child items for a particular item.

filter

CompositeFilterDescriptor

The descriptor by which the data will be filtered.

filterable

boolean

false

Enables the filtering of the Gantt columns that have their field option set.

hasChildren

(dataItem: any) => boolean

Gets or sets the callback function that indicates if a particular item has child items.

isExpanded

(item: object) => boolean

Sets the callback function that indicates if a particular item is expanded. If no callback is set, all items will be expanded and no expand icons will be rendered.

isSelected

(dataItem: object) => boolean

Specifies a callback that determines if the given task is selected (see example).

The selectable prop has to be set to true in order for this callback to be executed.

navigable

boolean

If set to true, the user can use dedicated shortcuts to interact with the Gantt. By default, navigation is disabled for the TreeList and Timeline parts of the component, (see example).

rowClass

RowClassFn

Defines a function that is executed for every data row in the component.

selectable

boolean

Enables or disables the Gantt selection mechanism (see example).

When set to true, the isSelected callback has to be provided. When applied, the SelectableDirective sets selectable to true internally.

sort

SortDescriptor[]

The descriptors by which the data will be sorted.

sortable

SortSettings

Enables the sorting of the Gantt columns that have their field option set.

taskClass

TaskClassFn

Defines a function that is executed for every task in the component. The classes returned from the function are applied to the task wrapper element.

taskModelFields

GanttTaskModelFields

Sets the fields which will be used to extract the task data from the provided data array items. The id field is also used as a TreeList data item unique identifier (defaults to 'id').

If no object is provided, the Gantt task data items will have to conform to the GanttTask interface.

timelinePaneOptions

TimelinePaneOptions

The options of the timeline splitter pane. By default the pane is collapsible, resizable, not collapsed, and its size is '50%'.

toolbarAriaLabel

string

Allows setting the toolbar(s) aria-label attribute value as necessary to comply with accessibility requirements. Typically, toolbars need an aria-label when there is more than one toolbar in the application.

toolbarSettings

ToolbarSettings

The toolbar configuration. Defines the position and content of the toolbar(s). The available properties are position, addTaskTool, and viewSelectorTool. All are optional and default to top.

The possible values for each option are:

  • top—Positions the toolbar above the Gantt panes. Renders the respective tool in the top toolbar.
  • bottom—Positions the toolbar below the Gantt panes. Renders the respective tool in the bottom toolbar.
  • both—Displays two toolbar instances. Positions the first one above,

and the second one - below the Gantt panes. Renders the respective tool in the both toolbars.

  • none—No toolbar is rendered when used for setting position.

No add task or view selector tool is rendered when used for setting addTaskTool or viewSelectorTool.

treeListPaneOptions

TreeListPaneOptions

The options of the treelist splitter pane. By default the pane is collapsible and not collapsed.

validateNewDependency

(dependency: object) => boolean

Specifies a callback that determines if a new dependency is valid. Used when evaluating if an attempt to create a new dependency will result in a valid link between the two tasks see example.

By defalut, dependencies are deemed invalid when:

  • The two tasks are in a parent-child relationship.
  • The two tasks are already dependent on one another. Only one dependency is allowed per pair.
  • The start or end times of the two tasks are incompatible with the attempted dependency type.

workDayEnd

string

The end time of the work day. Accepts string values in the HH:mm format.

workDayStart

string

The start time of the work day. Accepts string values in the HH:mm format.

workWeekEnd

Day

The end of the work week (index based).

workWeekStart

Day

The start of the work week (index based).

Fields

NameTypeDefaultDescription

columns

QueryList<GanttColumnBase>

A query list of all declared columns.

taskIdField

any

The name of the field which contains the unique identifier of the task data item. Defaults to 'id'.

views

QueryList<ViewBase>

A query list of all declared views.

Events

NameTypeDescription

activeViewChange

EventEmitter<TimelineViewType>

Fires each time the user selects a different view type. The event data contains the type of the newly selected view.

cancel

EventEmitter<TaskEditEvent>

Fires when the user cancels editing a task.

cellClick

EventEmitter<CellClickEvent>

Fires when a cell is clicked.

cellClose

EventEmitter<CellCloseEvent>

Fires when the user leaves an edited cell.

cellDblClick

EventEmitter<CellClickEvent>

Fires when the user double clicks a cell.

columnReorder

EventEmitter<ColumnReorderEvent>

Fires when the user completes the reordering of the column.

columnResize

EventEmitter<ColumnResizeEvent[]>

Fires when the user completes the resizing of the column.

columnVisibilityChange

EventEmitter<ColumnVisibilityChangeEvent>

Fires when the user changes the visibility of the columns from the column menu or column chooser.

dataStateChange

EventEmitter<DataStateChangeEvent>

Fires when the filter or sort state of the Gantt is changed.

dependencyAdd

EventEmitter<DependencyAddEvent>

Fires when the user adds a dependency via dragging see example.

filterChange

EventEmitter<CompositeFilterDescriptor>

Fires when the Gantt filter is modified. You have to handle the event yourself and filter the data.

remove

EventEmitter<TaskEditEvent>

Fires when the user confirms deleting a task.

rowCollapse

EventEmitter<ExpandEvent>

Fires when an item is collapsed.

rowExpand

EventEmitter<ExpandEvent>

Fires when an item is expanded.

save

EventEmitter<TaskEditEvent>

Fires when the user saves an edited task.

selectionChange

EventEmitter<SelectionChangeEvent>

Fires when the Gantt selection is changed through user interaction.

Holds data about the affected items and the attempted action:

  • select - Triggered on click or ctrl + click on deselected items.
  • remove - Triggered on ctrl + click on selected items.

sortChange

EventEmitter<SortDescriptor[]>

Fires when the sorting of the Gantt is changed. You have to handle the event yourself and sort the data.

taskAdd

EventEmitter<TaskAddEvent>

Fires when the user adds a task.

taskClick

EventEmitter<TaskClickEvent>

Fires when a task is clicked.

taskDblClick

EventEmitter<TaskClickEvent>

Fires when a Gantt task in the timeline pane is double-clicked. The data item, associated with the clicked task, is available in the event data. Use the event handler to open a task editing dialog as necessary.

taskDelete

EventEmitter<TaskDeleteEvent>

Fires when the end user clicks the Delete button in the task editing dialog, the task delete icon, or presses the Delete key on the keyboard when a task in the timeline is focused. Use the event handler to open a confirmation dialog when necessary.

timelinePaneCollapsedChange

EventEmitter<boolean>

Fires when the collapsed state of the timeline pane is changed.

timelinePaneSizeChange

EventEmitter<string>

Fires each time the user resizes the timeline pane.

treeListPaneCollapsedChange

EventEmitter<boolean>

Fires when the collapsed state of the treelist pane is changed.

Methods

autoFitColumn

Applies the minimum possible width for the specified column, so that the whole text fits without wrapping. This method expects the Gantt to be resizable (set resizable to true). Makes sense to execute this method only after the Gantt is already populated with data.

Parameters

column

GanttColumnBase

autoFitColumns

Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping. If no columns are specified, autoFitColumns is applied to all columns.

This method requires the Gantt to be resizable (set resizable to true).

Parameters

columns

QueryList<GanttColumnBase> | GanttColumnBase[]

closeCell

Closes an edited cell.

closeTaskDialog

Closes the task editing dialog.

editCell

Opens a cell for editing.

Parameters

dataItem

any

column

any

formGroup?

FormGroup

editTask

Opens the task editing dialog.

Parameters

dataItem

any

formGroup

FormGroup

focus

Focuses the last active cell or task in the Gantt. If no item has previously been focused, the first cell of the TreeList part will receive focus, (see example).

focusCell

Focuses the targeted cell in the TreeList part of the component, (see example).

Parameters

rowIndex

number

colIndex

number

focusTask

Focuses the targeted task in the Timeline part of the component, (see example).

Parameters

taskIndex

number

openConfirmationDialog

Opens the delete task confirmation dialog.

reload

Clears the already loaded children for the dataItem so that the Gantt will fetch them again the next time it is rendered.

Parameters

dataItem

any

reloadChildren?

boolean

reorderColumn

Changes the position of the specified column. The reordering of columns operates only on the level which is inferred by the source column. For the reorderColumn method to work properly, the source column has to be visible.

Parameters

source

GanttColumnBase

The column whose position will be changed.

destIndex

number

The new position of the column.

options

ColumnReorderConfig

Additional options.

updateView

Forces the TreeList to evaluate if some data items have changed and re-renders the rows information, if needed. Recalculates and re-renders the Timeline period, if needed. Redraws changed dependencies, if needed. Executes all row-related callbacks anew.

In this article

Not finding the help you need?

Contact Support