GanttComponent
Represents the Kendo UI Gantt component for Angular.
Use the Gantt component to display and manage project tasks and dependencies in a timeline view.
Definition
Package:@progress/kendo-angular-gantt
Selector:kendo-gantt
Export Name:Accessible in templates as #kendoGanttInstance="kendoGantt"
Syntax:
import { Component } from '@angular/core';
import { GanttComponent, DependencyType } from '@progress/kendo-angular-gantt';
@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>
`
})
export class AppComponent {
public data: Task[] = [
{
id: 1,
title: 'Planning',
start: new Date('2024-01-01'),
end: new Date('2024-01-05'),
subtasks: []
}
];
public dependencies = [
{ id: 1, fromId: 1, toId: 2, type: DependencyType.FS }
];
}Inputs
Sets the active timeline view.
'week'
columnMenu
boolean | ColumnMenuSettings
Enables the column menu for all columns.
false
columnsAutoSize
boolean
Enables automatic resizing of columns to fit their content.
false
columnsReorderable
boolean
Enables reordering of the columns by dragging their header cells.
false
columnsResizable
boolean
Enables resizing of the columns by dragging the header cell edges (resize handles).
false
currentTimeMarker
boolean | CurrentTimeSettings
Sets the current time marker settings for the Gantt. Applies to all views unless overridden by the settings of a particular view.
true
data
any[]
Gets or sets the Gantt data.
The task data items must match the GanttTask interface or use taskModelFields.
dependencies
any[]
Sets the dependencies to display between tasks.
Dependency data items must match the GanttDependency interface or use dependencyModelFields.
[]
Sets the fields used to extract dependency data from the dependencies array items.
If not set, dependency data items must match the GanttDependency interface.
Defines the settings for auto-scrolling during dragging when the pointer moves outside the container (see example).
fetchChildren
(dataItem: any) => object[] | Observable<object[]>
Sets the callback function to retrieve child items for a data item.
Sets the descriptor for filtering the data.
filterable
boolean
Enables filtering for columns with a field option.
false
hasChildren
(dataItem: any) => boolean
Sets the callback function to indicate if a data item has child items.
Sets a callback function to indicate if a data item is expanded. If not set, all items are expanded and no expand icons are shown.
boolean
Specifies a callback to determine if a task is selected (see example).
Set selectable to true to use this callback.
boolean
isSelected
navigable
boolean
Enables keyboard navigation for the Gantt. By default, navigation is enabled for the TreeList and Timeline parts of the component (see example).
true
Sets a function to apply custom CSS classes to each data row. The function receives the row data item.
selectable
boolean
Enables or disables selection in the Gantt (see example).
Set to true to allow selection.
When set to
true, theisSelectedcallback has to be provided. When applied, theSelectableDirectivesetsselectabletotrueinternally.
false
sort
SortDescriptor[]
Sets the descriptors for sorting the data.
[]
Enables sorting for columns with a field option.
false
Sets a function to apply custom CSS classes to each task. The function receives the task data item.
Sets the fields used to extract task data from the data array items.
The id field is also used as a unique identifier for TreeList data items.
If not set, task data items must match the GanttTask interface.
Sets the options for the task tooltip, such as position, callout, and showAfter.
Sets the options for the timeline splitter pane.
By default, the pane is collapsible, resizable, not collapsed, and its size is '50%'.
toolbarAriaLabel
string
Sets the aria-label attribute value for the toolbar.
Use this to improve accessibility.
'Toolbar'
Configures the toolbar position and content.
Set position, addTaskTool, and viewSelectorTool as needed.
Sets the options for the treelist splitter pane. By default the pane is collapsible and not collapsed.
Specifies a callback to validate new dependencies. Use this callback to control the valid dependencies that users can create (see example).
boolean
workDayEnd
string
Sets the end time of the work day in HH:mm format.
'17:00'
workDayStart
string
Sets the start time of the work day in HH:mm format.
'08:00'
Sets the end day of the work week (index based).
5
Sets the start day of the work week (index based).
1
Fields
A query list of all declared columns.
taskIdField
any
Gets the name of the field that contains the unique identifier for task data items.
"id"
Events
Fires when the user selects a different view type. The event data contains the type of the new view.
Fires when the user cancels editing a task.
Fires when a cell is clicked.
Fires when an edited cell is closed.
Fires when a cell is double-clicked.
Fires when the user completes reordering a column.
Fires when the user completes resizing a column.
Fires when the user changes column visibility from the column menu or chooser.
Fires when the filter or sort state changes.
Fires when the user adds a dependency by dragging see example.
Fires when there are changes in the Gantt filtering. Handle this event to filter the data.
Fires when the user confirms deleting a task.
Fires when a row is collapsed.
Fires when a row is expanded.
Fires when the user saves an edited task.
Fires when the Gantt selection changes through user interaction. The event data contains the affected items and the action type.
sortChange
EventEmitter<SortDescriptor[]>
Fires when there are changes in the Gantt sorting. Handle this event to sort the data.
Fires when the user adds a task.
Fires when a task is clicked.
Fires when a Gantt task in the timeline pane is double-clicked. The event data contains the clicked task. Use this event to open a task editing dialog if needed.
Fires when the user clicks the Delete button in the task editing dialog,
the task delete icon, or presses the Delete key on a focused task.
Use this event to open a confirmation dialog if needed.
timelinePaneCollapsedChange
EventEmitter<boolean>
Fires when the collapsed state of the timeline pane changes.
timelinePaneSizeChange
EventEmitter<string>
Fires when the user resizes the timeline pane.
treeListPaneCollapsedChange
EventEmitter<boolean>
Fires when the collapsed state of the treelist pane changes.
Methods
Sets the minimum width for the specified column so that its content fits. The Gantt must be resizable.
The column to auto-fit.
Adjusts the width of the specified columns to fit their content. If no columns are specified, fits all columns. The Gantt must be resizable to use this method.
The columns to auto-fit.
Closes the currently edited cell.
Closes the task editing dialog.
Opens a cell for editing.
The data item.
columnanyThe column index, name, or object.
formGroup?FormGroup<any>The form group for editing.
Opens the task editing dialog for the specified data item.
The task data item.
formGroupFormGroup<any>The form group for editing.
Focuses the last active cell or task in the Gantt. If no item was previously focused, focuses the first TreeList cell (see example).
Focuses the specified cell in the TreeList (see example).
The row index.
colIndexnumberThe column index.
Focuses the specified task in the Timeline (see example).
The index of the task.
Opens the delete task confirmation dialog.
Clears loaded children for the data item so the Gantt fetches them again.
The data item to reload.
reloadChildren?booleanWhether to reload children.
Changes the position of the specified column. The source column must be visible.
The column to move.
destIndexnumberThe new position index.
optionsColumnReorderConfigAdditional options.
Forces the Gantt to re-evaluate data items and re-render the rows and Timeline period, if needed. Also redraws dependencies and executes row-related callbacks.