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 },
    ];
}

Export Name

Accessible in templates as #kendoGanttInstance="kendoGantt"

Inputs

Name	Type	Default	Description
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.
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

Name	Type	Description
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

Name	Type	Description
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.

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

GanttComponent

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!