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
columnMenu
boolean | ColumnMenuSettings
(default: false) Specifies if the column menu of the columns will be displayed.
columnsAutoSize
boolean
(default: 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
(default: false) If set to true, the user can reorder columns by dragging their header cells.
columnsResizable
boolean
(default: false) If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.
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 adependencyModelFields
object has to be provided.
filter
CompositeFilterDescriptor
The descriptor by which the data will be filtered.
filterable
boolean
(default: false)
Enables the filtering of the Gantt columns that have their field
option set.
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 totrue
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).
selectable
boolean
Enables or disables the Gantt selection mechanism (see example).
When set to
true
, theisSelected
callback has to be provided. When applied, theSelectableDirective
setsselectable
totrue
internally.
sort
SortDescriptor[]
The descriptors by which the data will be sorted.
sortable
Enables the sorting of the Gantt columns that have their field
option set.
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).
activeView
(default: 'week') The active timeline view.
data
any[]
Gets or sets the data of the Gantt.
The task data items should either conform to the
GanttTask
interface, or ataskModelFields
object has to be provided.
dependencyModelFields
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
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.
hasChildren
(dataItem: any) => boolean
Gets or sets the callback function that indicates if a particular item has child items.
rowClass
Defines a function that is executed for every data row in the component.
taskClass
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
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
The options of the timeline splitter pane. By default the pane is collapsible
,
resizable
, not collapsed
, and its size
is '50%'
.
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 settingposition
. No add task or view selector tool is rendered when used for settingaddTaskTool
orviewSelectorTool
.
treeListPaneOptions
The options of the treelist splitter pane.
By default the pane is collapsible
and not collapsed
.
Fields
views
QueryList<ViewBase>
A query list of all declared views.
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'.
Events
activeViewChange
Fires each time the user selects a different view type. The event data contains the type of the newly selected view.
cancel
Fires when the user cancels editing a task.
cellClick
Fires when a cell is clicked.
cellClose
Fires when the user leaves an edited cell.
cellDblClick
Fires when the user double clicks a cell.
columnReorder
Fires when the user completes the reordering of the column.
columnResize
Fires when the user completes the resizing of the column.
columnVisibilityChange
Fires when the user changes the visibility of the columns from the column menu or column chooser.
dataStateChange
Fires when the filter or sort state of the Gantt is changed.
dependencyAdd
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
Fires when the user confirms deleting a task.
rowCollapse
Fires when an item is collapsed.
rowExpand
Fires when an item is expanded.
save
Fires when the user saves an edited task.
selectionChange
Fires when the Gantt selection is changed through user interaction.
Holds data about the affected items
and the attempted action
:
select
- Triggered onclick
orctrl + click
on deselected items.remove
- Triggered onctrl + 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
Fires when the user adds a task.
taskClick
Fires when a task is clicked.
taskDblClick
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
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
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.