GanttComponent

Represents the Kendo UI Gantt component for Angular.

ts

@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

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

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

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<any>

editTask
Opens the task editing dialog.
Parameters dataItem any formGroup FormGroup<any>

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.