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.

ts

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

Selector

kendo-gantt

Export Name

Accessible in templates as #kendoGanttInstance="kendoGantt"

Inputs

Name	Type	Default	Description
activeView	TimelineViewType	'week'	Sets the active timeline view.
columnMenu	boolean | ColumnMenuSettings	false	Enables the column menu for all columns.
columnsAutoSize	boolean	false	Enables automatic resizing of columns to fit their content.
columnsReorderable	boolean	false	Enables reordering of the columns by dragging their header cells.
columnsResizable	boolean	false	Enables resizing of the columns by dragging the header cell edges (resize handles).
currentTimeMarker	boolean | CurrentTimeSettings	true	Sets the current time marker settings for the Gantt. Applies to all views unless overridden by the settings of a particular view.
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.
dependencyModelFields	GanttDependencyModelFields		Sets the fields used to extract dependency data from the dependencies array items. If not set, dependency data items must match the GanttDependency interface.
dragScrollSettings	DragScrollSettings		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.
filter	CompositeFilterDescriptor		Sets the descriptor for filtering the data.
filterable	boolean	false	Enables filtering for columns with a field option.
hasChildren	(dataItem: any) => boolean		Sets the callback function to indicate if a data item has child items.
isExpanded	(item: object) => boolean		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.
isSelected	(dataItem: object) => boolean		Specifies a callback to determine if a task is selected (see example). Set selectable to true to use this callback.
navigable	boolean	true	Enables keyboard navigation for the Gantt. By default, navigation is enabled for the TreeList and Timeline parts of the component (see example).
rowClass	RowClassFn		Sets a function to apply custom CSS classes to each data row. The function receives the row data item.
selectable	boolean	false	Enables or disables selection in the Gantt (see example). Set to true to allow selection. When set to true, the isSelected callback has to be provided. When applied, the SelectableDirective sets selectable to true internally.
sort	SortDescriptor[]		Sets the descriptors for sorting the data.
sortable	SortSettings		Enables sorting for columns with a field option.
taskClass	TaskClassFn		Sets a function to apply custom CSS classes to each task. The function receives the task data item.
taskModelFields	GanttTaskModelFields		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.
taskTooltipOptions	TaskTooltipOptions	{ position: 'top', callout: true, showAfter: 100 }	Sets the options for the task tooltip, such as position, callout, and showAfter.
timelinePaneOptions	TimelinePaneOptions		Sets the options for the timeline splitter pane. By default, the pane is collapsible, resizable, not collapsed, and its size is '50%'.
toolbarAriaLabel	string	"Toolbar"	Sets the aria-label attribute value for the toolbar. Use this to improve accessibility.
toolbarSettings	ToolbarSettings		Configures the toolbar position and content. Set position, addTaskTool, and viewSelectorTool as needed.
treeListPaneOptions	TreeListPaneOptions		Sets the options for the treelist splitter pane. By default the pane is collapsible and not collapsed.
validateNewDependency	(dependency: object) => boolean		Specifies a callback to validate new dependencies. Use this callback to control the valid dependencies that users can create (see example).
workDayEnd	string	"17:00"	Sets the end time of the work day in HH:mm format.
workDayStart	string	"08:00"	Sets the start time of the work day in HH:mm format.
workWeekEnd	Day	5	Sets the end day of the work week (index based).
workWeekStart	Day	1	Sets the start day of the work week (index based).

Fields

Name	Type	Default	Description
columns	QueryList<GanttColumnBase>		A query list of all declared columns.
taskIdField	any	"id"	Gets the name of the field that contains the unique identifier for task data items.
views	QueryList<ViewBase>		A query list of all declared views.

Events

Name	Type	Description
activeViewChange	EventEmitter<TimelineViewType>	Fires when the user selects a different view type. The event data contains the type of the new 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 an edited cell is closed.
cellDblClick	EventEmitter<CellClickEvent>	Fires when a cell is double-clicked.
columnReorder	EventEmitter<ColumnReorderEvent>	Fires when the user completes reordering a column.
columnResize	EventEmitter<ColumnResizeEvent[]>	Fires when the user completes resizing a column.
columnVisibilityChange	EventEmitter<ColumnVisibilityChangeEvent>	Fires when the user changes column visibility from the column menu or chooser.
dataStateChange	EventEmitter<DataStateChangeEvent>	Fires when the filter or sort state changes.
dependencyAdd	EventEmitter<DependencyAddEvent>	Fires when the user adds a dependency by dragging see example.
filterChange	EventEmitter<CompositeFilterDescriptor>	Fires when there are changes in the Gantt filtering. Handle this event to filter the data.
remove	EventEmitter<TaskEditEvent>	Fires when the user confirms deleting a task.
rowCollapse	EventEmitter<ExpandEvent>	Fires when a row is collapsed.
rowExpand	EventEmitter<ExpandEvent>	Fires when a row is expanded.
save	EventEmitter<TaskEditEvent>	Fires when the user saves an edited task.
selectionChange	EventEmitter<SelectionChangeEvent>	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.
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 event data contains the clicked task. Use this event to open a task editing dialog if needed.
taskDelete	EventEmitter<TaskDeleteEvent>	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

autoFitColumn
Sets the minimum width for the specified column so that its content fits. The Gantt must be resizable.
Parameters column GanttColumnBase The column to auto-fit.

autoFitColumns
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.
Parameters columns QueryList<GanttColumnBase> | GanttColumnBase[] The columns to auto-fit.

closeCell
Closes the currently edited cell.

closeTaskDialog
Closes the task editing dialog.

editCell
Opens a cell for editing.
Parameters dataItem any The data item. column any The column index, name, or object. formGroup? FormGroup<any> The form group for editing.

editTask
Opens the task editing dialog for the specified data item.
Parameters dataItem any The task data item. formGroup FormGroup<any> The form group for editing.

focus
Focuses the last active cell or task in the Gantt. If no item was previously focused, focuses the first TreeList cell (see example).

focusCell
Focuses the specified cell in the TreeList (see example).
Parameters rowIndex number The row index. colIndex number The column index.

focusTask
Focuses the specified task in the Timeline (see example).
Parameters taskIndex number The index of the task.

openConfirmationDialog
Opens the delete task confirmation dialog.

reload
Clears loaded children for the data item so the Gantt fetches them again.
Parameters dataItem any The data item to reload. reloadChildren? boolean Whether to reload children.

reorderColumn
Changes the position of the specified column. The source column must be visible.
Parameters source GanttColumnBase The column to move. destIndex number The new position index. options ColumnReorderConfig Additional options.

updateView
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.