@progress/kendo-angular-gantt 0.2.1-dev.202112081924 → 0.3.0-dev.202112141015

package/dist/es2015/editing/add-task.component.d.ts

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgZone } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PreventableEvent } from '@progress/kendo-angular-treelist';
+import { GanttAddTaskActionItem } from '../models/events/task-add-event.interface';
+import { EditService } from './edit.service';
+/**
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
+ */
+export declare class GanttAddTaskComponent {
+    private localizationService;
+    private editService;
+    private ngZone;
+    /**
+     * Sets the data of the DropDownButton.
+     * > The data has to be provided in an array-like list.
+     */
+    data: GanttAddTaskActionItem[];
+    /**
+     * Defines the name of an existing icon in a Kendo UI theme.
+     * @default 'plus'
+     */
+    icon: string;
+    constructor(localizationService: LocalizationService, editService: EditService, ngZone: NgZone);
+    /**
+     * @hidden
+     */
+    getText(message: string): string;
+    /**
+     * @hidden
+     */
+    handleOpen(e: PreventableEvent): void;
+    /**
+     * @hidden
+     */
+    handleMouseClick(): void;
+    /**
+     * @hidden
+     */
+    handleItemClick(e: any): void;
+}

package/dist/es2015/editing/add-task.component.js

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, Input, NgZone } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { EditService } from './edit.service';
+/**
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
+ */
+let GanttAddTaskComponent = class GanttAddTaskComponent {
+    constructor(localizationService, editService, ngZone) {
+        this.localizationService = localizationService;
+        this.editService = editService;
+        this.ngZone = ngZone;
+        /**
+         * Sets the data of the DropDownButton.
+         * > The data has to be provided in an array-like list.
+         */
+        this.data = [{
+                text: this.getText('addChildText'),
+                type: 'addChild'
+            }, {
+                text: this.getText('addAboveText'),
+                type: 'addAbove'
+            }, {
+                text: this.getText('addBelowText'),
+                type: 'addBelow'
+            }];
+        /**
+         * Defines the name of an existing icon in a Kendo UI theme.
+         * @default 'plus'
+         */
+        this.icon = 'plus';
+    }
+    /**
+     * @hidden
+     */
+    getText(message) {
+        return this.localizationService.get(message);
+    }
+    /**
+     * @hidden
+     */
+    handleOpen(e) {
+        if (!this.editService.getSelectedItem()) {
+            e.preventDefault();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleMouseClick() {
+        if (!this.editService.getSelectedItem()) {
+            this.ngZone.run(() => {
+                this.editService.addEvent.next({
+                    selectedItem: null,
+                    actionType: 'addTask'
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleItemClick(e) {
+        this.editService.addEvent.next({
+            actionType: e.type,
+            selectedItem: null
+        });
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], GanttAddTaskComponent.prototype, "data", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], GanttAddTaskComponent.prototype, "icon", void 0);
+GanttAddTaskComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-gantt-add-task',
+        template: `
+        <kendo-dropdownbutton
+            [data]="data"
+            [icon]="icon"
+            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
+            [scope]="this"
+            (itemClick)="handleItemClick($event)"
+            (open)="handleOpen($event)">
+            {{ getText('addTaskText') }}
+        </kendo-dropdownbutton>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService,
+        EditService,
+        NgZone])
+], GanttAddTaskComponent);
+export { GanttAddTaskComponent };

package/dist/es2015/editing/edit.service.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { FormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
+import { TaskAddEvent } from '../models/events/task-add-event.interface';
 import { EditEvent, EditResultType } from '../models/events/task-edit-event.interface';
 /**
  * @hidden
@@ -12,8 +13,10 @@ export declare class EditService {
     showEditingDialog: Subject<boolean>;
     showConfirmationDialog: Subject<any>;
     editEvent: Subject<EditEvent>;
+    addEvent: Subject<TaskAddEvent>;
     formGroup: FormGroup;
     dataItem: any;
+    getSelectedItem: () => any;
     createEditDialog(dataItem: any, formGroup: FormGroup): void;
     closeEditDialog(): void;
     triggerEditEvent(editResultType: EditResultType): void;

package/dist/es2015/editing/edit.service.js

@@ -16,6 +16,7 @@ let EditService = class EditService {
         this.showEditingDialog = new Subject();
         this.showConfirmationDialog = new Subject();
         this.editEvent = new Subject();
+        this.addEvent = new Subject();
     }
     createEditDialog(dataItem, formGroup) {
         this.dataItem = dataItem;

package/dist/es2015/expanded-state/expandable.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ExpandableDirective, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
+import { ExpandableDirective } from '@progress/kendo-angular-treelist';
 /**
  * A directive which controls the expanded state of the items.
  */
@@ -14,5 +14,4 @@ export declare class GanttExpandableDirective extends ExpandableDirective {
      *
      */
     expandBy: string | ((dataItem: any) => any);
-    constructor(gantt: ExpandableTreeComponent);
 }

package/dist/es2015/expanded-state/expandable.directive.js

@@ -4,15 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Directive, Input } from '@angular/core';
-import { ExpandableDirective, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
+import { ExpandableDirective } from '@progress/kendo-angular-treelist';
 /**
  * A directive which controls the expanded state of the items.
  */
 let GanttExpandableDirective = class GanttExpandableDirective extends ExpandableDirective {
-    // fixes an injection error in some builds/ng-versions (e.g. StackBlitz)
-    constructor(gantt) {
-        super(gantt);
-    }
 };
 tslib_1.__decorate([
     Input(),
@@ -22,7 +18,6 @@ GanttExpandableDirective = tslib_1.__decorate([
     Directive({
         exportAs: 'kendoGanttExpandable',
         selector: '[kendoGanttExpandable]'
-    }),
-    tslib_1.__metadata("design:paramtypes", [ExpandableTreeComponent])
+    })
 ], GanttExpandableDirective);
 export { GanttExpandableDirective };

package/dist/es2015/gantt.component.d.ts

@@ -24,12 +24,13 @@ import { GanttTaskTemplateDirective } from './template-directives/task-template.
 import { GanttSummaryTaskTemplateDirective } from './template-directives/summary-task-template.directive';
 import { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
-import { ToolbarPosition } from './models/toolbar-position';
+import { ToolbarSettings } from './models/toolbar-settings';
 import { ExpandEvent } from './expanded-state/expand-event';
 import { ViewBase } from './timeline/view-base';
 import { SelectionChangeEvent } from './selection/selection-change-event';
 import { TaskEditEvent } from './models/events/task-edit-event.interface';
 import { CellCloseEvent } from './models/events/cell-close-event.interface';
+import { TaskAddEvent } from './models/events/task-add-event.interface';
 /**
  * Represents the Kendo UI Gantt component for Angular.
  *
@@ -109,7 +110,7 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private optionChangesService;
     private dependencyDomService;
     private editService;
-    localizationService: LocalizationService;
+    private localizationService;
     private hostElement;
     private zone;
     treeList: TreeListComponent;
@@ -164,7 +165,7 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     /**
      * Provides a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection))
      *
-     * > The [`selectable`]({% slug gantt_api_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
+     * > The [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
      */
     isSelected: (dataItem: object) => boolean;
     /**
@@ -178,21 +179,24 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     /**
      * Enables or disables the Gantt selection mechanism ([see example]({% slug selection_gantt %}#toc-custom-selection)).
      *
-     * > When set to `true`, the [`isSelected`]({% slug gantt_api_ganttcomponent %}#toc-isselected) callback has to be provided.
+     * > When set to `true`, the [`isSelected`]({% slug api_gantt_ganttcomponent %}#toc-isselected) callback has to be provided.
      * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
      */
     selectable: boolean;
     /**
-     * The position of the toolbar.
+     * 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 are:
-     * - `top`—Positions the toolbar above the Gantt panes.
-     * - `bottom`—Positions the toolbar below the Gantt panes.
+     * 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.
-     * - `none`—No toolbar is rendered.
+     * 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`.
      */
-    toolbarPosition: ToolbarPosition;
+    toolbarSettings: ToolbarSettings;
     /**
      * Gets or sets the callback function that retrieves the child items for a particular item.
      */
@@ -335,6 +339,10 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * Fires when the user saves an edited task.
      */
     save: EventEmitter<TaskEditEvent>;
+    /**
+     * Fires when the user adds a task.
+     */
+    taskAdd: EventEmitter<TaskAddEvent>;
     /**
      * Fires when the sorting of the Gantt is changed.
      * You have to handle the event yourself and sort the data.
@@ -460,6 +468,7 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private _rowClass;
     private _taskClass;
     private _activeView;
+    private _toolbarSettings;
     private lastTreeListCellClick;
     private direction;
     private rtl;
@@ -503,7 +512,10 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      */
     reorderColumn(source: GanttColumnBase, destIndex: number, options?: ColumnReorderConfig): void;
     /**
-     * Updates the data of the Gantt and forces row-related callbacks to be called anew.
+     * 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.
      */
     updateView(): void;
     /**
@@ -600,4 +612,5 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private getActiveViewOptions;
     private isSameSelection;
     private getSelectionAction;
+    private getFirstSelectedItem;
 }

package/dist/es2015/gantt.component.js

@@ -120,7 +120,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         /**
          * Provides a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection))
          *
-         * > The [`selectable`]({% slug gantt_api_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
+         * > The [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
          */
         this.isSelected = isSelected;
         /**
@@ -134,21 +134,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         /**
          * Enables or disables the Gantt selection mechanism ([see example]({% slug selection_gantt %}#toc-custom-selection)).
          *
-         * > When set to `true`, the [`isSelected`]({% slug gantt_api_ganttcomponent %}#toc-isselected) callback has to be provided.
+         * > When set to `true`, the [`isSelected`]({% slug api_gantt_ganttcomponent %}#toc-isselected) callback has to be provided.
          * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
          */
         this.selectable = false;
-        /**
-         * The position of the toolbar.
-         *
-         * The possible values are:
-         * - `top`—Positions the toolbar above the Gantt panes.
-         * - `bottom`—Positions the toolbar below the Gantt panes.
-         * - `both`—Displays two toolbar instances. Positions the first one above,
-         * and the second one - below the Gantt panes.
-         * - `none`—No toolbar is rendered.
-         */
-        this.toolbarPosition = 'top';
         /**
          * Gets or sets the callback function that retrieves the child items for a particular item.
          */
@@ -258,6 +247,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * Fires when the user saves an edited task.
          */
         this.save = new EventEmitter();
+        /**
+         * Fires when the user adds a task.
+         */
+        this.taskAdd = new EventEmitter();
         /**
          * Fires when the sorting of the Gantt is changed.
          * You have to handle the event yourself and sort the data.
@@ -335,6 +328,11 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this._rowClass = rowClassCallback;
         this._taskClass = taskClassCallback;
         this._activeView = DEFAULT_VIEW;
+        this._toolbarSettings = {
+            position: 'top',
+            addTaskTool: 'none',
+            viewSelectorTool: 'top'
+        };
         this.rtl = false;
         this.optionChangesSubscriptions = new Subscription();
         this.editServiceSubscription = new Subscription();
@@ -345,6 +343,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
             this.treeList.columns.notifyOnChanges();
         }));
+        this.editService.getSelectedItem = this.getFirstSelectedItem.bind(this);
         this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(show => this.showEditingDialog = show));
         this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(() => this.taskDelete.emit()));
         this.editServiceSubscription.add(this.editService.editEvent.subscribe(args => {
@@ -356,7 +355,14 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             this.showConfirmationDialog = this.showEditingDialog = false;
             this.editService.dataItem = this.editService.formGroup = null;
             this.updateView();
-            this.dependencyDomService.notifyChanges();
+        }));
+        this.editServiceSubscription.add(this.editService.addEvent.subscribe(args => {
+            const selectedItem = this.getFirstSelectedItem();
+            this.taskAdd.emit({
+                actionType: args.actionType,
+                selectedItem: selectedItem ? getEditItem(selectedItem, this.treeList.view.data, this.mapper) : null
+            });
+            this.updateView();
         }));
         this.localizationSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
@@ -431,6 +437,29 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get data() {
         return this._data;
     }
+    /**
+     * 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`.
+     */
+    set toolbarSettings(value) {
+        this._toolbarSettings = {
+            position: value.position || 'top',
+            addTaskTool: value.addTaskTool || 'none',
+            viewSelectorTool: value.viewSelectorTool || 'top'
+        };
+    }
+    get toolbarSettings() {
+        return this._toolbarSettings;
+    }
     /**
      * The options of the timeline splitter pane. By default the pane is `collapsible`,
      * `resizable`, not `collapsed`, and its `size` is `'50%'`.
@@ -615,12 +644,17 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
     }
     /**
-     * Updates the data of the Gantt and forces row-related callbacks to be called anew.
+     * 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.
      */
     updateView() {
         if (isPresent(this.treeList)) {
             this.treeList.updateView();
         }
+        this.loadTimelineData();
+        this.dependencyDomService.notifyChanges();
     }
     /**
      * Opens the task editing dialog.
@@ -700,7 +734,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      * @hidden
      */
     showToolbar(position) {
-        return this.toolbarPosition !== 'none' && ([position, 'both'].indexOf(this.toolbarPosition) > -1);
+        return this.toolbarSettings.position !== 'none' && ([position, 'both'].indexOf(this.toolbarSettings.position) > -1);
     }
     /**
      * @hidden
@@ -864,7 +898,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             items: [dataItem],
             sender: this
         });
-        this.updateView();
+        this.treeList.updateView();
     }
     updateTreeListGroupClass(columns = this.columns) {
         if (!isPresent(this.treeList)) {
@@ -899,6 +933,11 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         const shouldToggleSelection = ctrlKey || metaKey;
         return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
     }
+    getFirstSelectedItem() {
+        const isSelectedCallback = this.isSelected || isSelected;
+        const loadedItems = this.renderedTreeListItems || [];
+        return loadedItems.find(isSelectedCallback);
+    }
 };
 tslib_1.__decorate([
     ViewChild(TreeListComponent, { static: true }),
@@ -972,8 +1011,9 @@ tslib_1.__decorate([
 ], GanttComponent.prototype, "selectable", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", String)
-], GanttComponent.prototype, "toolbarPosition", void 0);
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], GanttComponent.prototype, "toolbarSettings", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
@@ -1094,6 +1134,10 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], GanttComponent.prototype, "save", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "taskAdd", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1172,6 +1216,27 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
         ],
         template: `
         <ng-container kendoGanttLocalizedMessages
+            i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
+            taskEditingGeneralTabTitle="General"
+
+            i18n-taskEditingPredecessorsTabTitle="kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip"
+            taskEditingPredecessorsTabTitle="Predecessors"
+
+            i18n-taskEditingSuccessorsTabTitle="kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip"
+            taskEditingSuccessorsTabTitle="Successors"
+
+            i18n-taskEditingDependenciesAddButtonText="kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesAddButtonText="Add"
+
+            i18n-taskEditingDependenciesRemoveButtonText="kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesRemoveButtonText="Remove"
+
+            i18n-taskEditingDependenciesGridNameColumnTitle="kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridNameColumnTitle="Task Title"
+
+            i18n-taskEditingDependenciesGridTypeColumnTitle="kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridTypeColumnTitle="Type"
+
             i18n-taskDeleteLabel="kendo.gantt.taskDeleteLabel|The label of the task delete icon"
             taskDeleteLabel="Delete"
 
@@ -1223,6 +1288,18 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
             i18n-yearViewText-disabled="kendo.gantt.yearViewText|The text of the year view in the ViewSelector component"
             yearViewText="Year"
 
+            i18n-addTaskText="kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component"
+            addTaskText="Add Task"
+
+            i18n-addChildText="kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component"
+            addChildText="Add Child"
+
+            i18n-addAboveText="kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component"
+            addAboveText="Add Above"
+
+            i18n-addBelowText="kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component"
+            addBelowText="Add Below"
+
             i18n-noRecords="kendo.gantt.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
@@ -1344,6 +1421,8 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
             columnsReset="Reset"></ng-container>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('top')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
             class="k-gantt-header k-toolbar k-gantt-toolbar"
             position="top"></kendo-gantt-toolbar>
         <div class="k-gantt-content">
@@ -1393,7 +1472,47 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
                         }"
                         [scope]="this"
                     >
-                        <kendo-treelist-messages [kendoGanttTreeListMessages]="localizationService"></kendo-treelist-messages>
+                        <kendo-treelist-messages
+                            [noRecords]="getText('noRecords')"
+                            [filter]="getText('filter')"
+                            [filterEqOperator]="getText('filterEqOperator')"
+                            [filterNotEqOperator]="getText('filterNotEqOperator')"
+                            [filterIsNullOperator]="getText('filterIsNullOperator')"
+                            [filterIsNotNullOperator]="getText('filterIsNotNullOperator')"
+                            [filterIsEmptyOperator]="getText('filterIsEmptyOperator')"
+                            [filterIsNotEmptyOperator]="getText('filterIsNotEmptyOperator')"
+                            [filterStartsWithOperator]="getText('filterStartsWithOperator')"
+                            [filterContainsOperator]="getText('filterContainsOperator')"
+                            [filterNotContainsOperator]="getText('filterNotContainsOperator')"
+                            [filterEndsWithOperator]="getText('filterEndsWithOperator')"
+                            [filterGteOperator]="getText('filterGteOperator')"
+                            [filterGtOperator]="getText('filterGtOperator')"
+                            [filterLteOperator]="getText('filterLteOperator')"
+                            [filterLtOperator]="getText('filterLtOperator')"
+                            [filterIsTrue]="getText('filterIsTrue')"
+                            [filterIsFalse]="getText('filterIsFalse')"
+                            [filterBooleanAll]="getText('filterBooleanAll')"
+                            [filterAfterOrEqualOperator]="getText('filterAfterOrEqualOperator')"
+                            [filterAfterOperator]="getText('filterAfterOperator')"
+                            [filterBeforeOperator]="getText('filterBeforeOperator')"
+                            [filterBeforeOrEqualOperator]="getText('filterBeforeOrEqualOperator')"
+                            [filterFilterButton]="getText('filterFilterButton')"
+                            [filterClearButton]="getText('filterClearButton')"
+                            [filterAndLogic]="getText('filterAndLogic')"
+                            [filterOrLogic]="getText('filterOrLogic')"
+                            [loading]="getText('loading')"
+                            [columnMenu]="getText('columnMenu')"
+                            [columns]="getText('columns')"
+                            [sortable]="getText('sortable')"
+                            [sortAscending]="getText('sortAscending')"
+                            [sortDescending]="getText('sortDescending')"
+                            [sortedAscending]="getText('sortedAscending')"
+                            [sortedDescending]="getText('sortedDescending')"
+                            [sortedDefault]="getText('sortedDefault')"
+                            [columnsApply]="getText('columnsApply')"
+                            [columnsReset]="getText('columnsReset')"
+                        >
+                        </kendo-treelist-messages>
                     </kendo-treelist>
                 </kendo-splitter-pane>
                 <kendo-splitter-pane
@@ -1433,6 +1552,8 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
         </div>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('bottom')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
             class="k-gantt-footer k-toolbar k-gantt-toolbar"
             position="bottom"></kendo-gantt-toolbar>
         <kendo-gantt-edit-dialog *ngIf="showEditingDialog" [formGroup]="editDialogFormGroup"></kendo-gantt-edit-dialog>

package/dist/es2015/gantt.module.js

@@ -40,7 +40,7 @@ import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { CustomMessagesComponent } from './localization/custom-messages.component';
 import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
-import { GanttTreeListMessagesDirective } from './localization/treelist-messages.directive';
+import { GanttAddTaskComponent } from './editing/add-task.component';
 const IMPORTED_MODULES = [
     CommonModule,
     ReactiveFormsModule,
@@ -89,7 +89,7 @@ const DECLARATIONS = [
     EditDialogComponent,
     CustomMessagesComponent,
     LocalizedMessagesDirective,
-    GanttTreeListMessagesDirective
+    GanttAddTaskComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})

package/dist/es2015/index.d.ts

@@ -10,12 +10,13 @@ export { MappingService } from './common/mapping.service';
 export { OptionChangesService } from './common/option-changes.service';
 export { DependencyDomService } from './dependencies/dependency-dom.service';
 export { GanttDependencyDirective } from './dependencies/gantt-dependency.directive';
+export { GanttAddTaskComponent } from './editing/add-task.component';
 export { EditDialogComponent } from './editing/edit-dialog.component';
 export { EditService } from './editing/edit.service';
 export { CustomMessagesComponent } from './localization/custom-messages.component';
 export { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 export { Messages } from './localization/messages';
-export { GanttTreeListMessagesDirective } from './localization/treelist-messages.directive';
+export { PreventableEvent } from './models/events/preventable-event';
 export { GanttHeaderTableBodyComponent } from './rendering/gantt-header-table-body.component';
 export { GanttMilestoneTaskComponent } from './rendering/gantt-milestone-task.component';
 export { GanttSummaryTaskComponent } from './rendering/gantt-summary-task.component';