GanttComponent

Represents the Kendo UI Gantt component for Angular.

Copy Code@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

(default: false) Specifies if the column menu of the columns will be displayed.

columnsAutoSize

(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

(default: false) If set to true, the user can reorder columns by dragging their header cells.

columnsResizable

(default: false) If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.

dependencies

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.

filter

The descriptor by which the data will be filtered.

filterable

(default: false) Enables the filtering of the Gantt columns that have their field option set.

isExpanded

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

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

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

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

The descriptors by which the data will be sorted.

sortable

Enables the sorting of the Gantt columns that have their field option set.

validateNewDependency

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

The end time of the work day. Accepts string values in the HH:mm format.

workDayStart

The start time of the work day. Accepts string values in the HH:mm format.

workWeekEnd

The end of the work week (index based).

workWeekStart

The start of the work week (index based).

activeView

(default: 'week') The active timeline view.

data

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.

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

Gets or sets the callback function that retrieves the child items for a particular item.

hasChildren

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 setting position. No add task or view selector tool is rendered when used for setting addTaskTool or viewSelectorTool.

treeListPaneOptions

The options of the treelist splitter pane. By default the pane is collapsible and not collapsed.

Fields

views

A query list of all declared views.

columns

A query list of all declared columns.

taskIdField

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

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 on click or ctrl + click on deselected items.
• remove - Triggered on ctrl + click on selected items.

sortChange

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

Fires when the collapsed state of the timeline pane is changed.

timelinePaneSizeChange

Fires each time the user resizes the timeline pane.

treeListPaneCollapsedChange

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

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

closeCell

Closes an edited cell.

closeTaskDialog

Closes the task editing dialog.

editCell

Opens a cell for editing.

Parameters

dataItem

column

formGroup?

editTask

Opens the task editing dialog.

Parameters

dataItem

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

colIndex

focusTask

Focuses the targeted task in the Timeline part of the component, (see example).

Parameters

taskIndex

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

reloadChildren?

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

The column whose position will be changed.

destIndex

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.