@syncfusion/ej2-gantt 23.2.7 → 24.1.43

package/src/gantt/actions/toolbar.js

@@ -80,7 +80,7 @@ var Toolbar = /** @class */ (function () {
                         // eslint-disable-next-line
                         'placeholder= \"' + searchLocalText + '\"/>' +
                         '<span id="' + this.id + '_searchbutton" class="e-input-group-icon e-search-icon e-icons"' +
-                        'tabindex="-1" title="' + searchLocalText + '" aria-label= "search"></span>' +
+                        'tabindex="-1" title="' + searchLocalText + '" aria-label= "search" role="button"></span>' +
                         '</div>',
                     tooltipText: searchLocalText,
                     align: 'Right', cssClass: 'e-search-wrapper'
@@ -363,6 +363,7 @@ var Toolbar = /** @class */ (function () {
      */
     Toolbar.prototype.zoomIn = function () {
         this.parent.timelineModule.processZooming(true);
+        this.parent.timelineModule.isZooming = false;
     };
     /**
      *
@@ -375,6 +376,7 @@ var Toolbar = /** @class */ (function () {
         }
         this.parent.timelineModule.processZoomToFit();
         this.parent.ganttChartModule.updateScrollLeft(0);
+        this.parent.timelineModule.isZoomToFit = false;
     };
     /**
      *
@@ -383,6 +385,7 @@ var Toolbar = /** @class */ (function () {
      */
     Toolbar.prototype.zoomOut = function () {
         this.parent.timelineModule.processZooming(false);
+        this.parent.timelineModule.isZooming = false;
     };
     /**
      * To refresh toolbar items bases current state of tasks

package/src/gantt/base/css-constants.d.ts

@@ -24,6 +24,8 @@ export declare const timelineHeaderCellLabel: string;
 export declare const weekendHeaderCell: string;
 export declare const timelineSingleHeaderCell: string;
 export declare const timelineSingleHeaderOuterDiv: string;
+export declare const virtualTable: string;
+export declare const virtualTrack: string;
 export declare const leftLabelContainer: string;
 export declare const leftLabelTempContainer: string;
 export declare const leftLabelInnerDiv: string;

package/src/gantt/base/css-constants.js

@@ -25,6 +25,8 @@ export var timelineHeaderCellLabel = 'e-header-cell-label';
 export var weekendHeaderCell = 'e-weekend-header-cell';
 export var timelineSingleHeaderCell = 'e-timeline-single-header-cell';
 export var timelineSingleHeaderOuterDiv = 'e-timeline-single-header-outer-div';
+export var virtualTable = 'e-virtualtable';
+export var virtualTrack = 'e-virtualtrack';
 // Chart Rows-Class
 export var leftLabelContainer = 'e-left-label-container';
 export var leftLabelTempContainer = 'e-left-label-container e-left-label-temp-container';

package/src/gantt/base/enum.d.ts

@@ -294,3 +294,25 @@ export declare type CObject = {
  */
 export declare type ScheduleMode = 'Auto' | 'Manual' | 'Custom';
 export declare type ViewType = 'ProjectView' | 'ResourceView';
+/**
+* Defines PDF ContentType.
+* ```props
+* * Image :- PDF content is Image type
+* * Line :- PDF content is Line type
+* * PageNumber :- PDF content is PageNumber type
+* * Text :- PDF content is Text type
+* ```
+*/
+export declare type ContentType = 'Image' | 'Line' | 'PageNumber' | 'Text';
+/**
+ * Defines PDF PageNumber Type.
+ * ```props
+ * * LowerLatin :- LowerCase Latin pageNumber
+ * * LowerRoman :- LowerCase Roman pageNumber
+ * * UpperLatin :- UpperCase Latin pageNumber
+ * * UpperRoman :- UpperCase Roman pageNumber
+ * * Numeric :- Numeric pageNumber
+ * * Arabic :- Arabic pageNumber
+ * ```
+ */
+export declare type PdfPageNumberType = 'LowerLatin' | 'LowerRoman' | 'UpperLatin' | 'UpperRoman' | 'Numeric' | 'Arabic';

package/src/gantt/base/gantt-chart.js

@@ -17,7 +17,8 @@ var GanttChart = /** @class */ (function () {
         this.chartTimelineContainer = null;
         this.rangeViewContainer =
             createElement('div', { className: cls.rangeContainer });
-        this.rangeViewContainer.setAttribute("role", "RangeContainer");
+        this.rangeViewContainer.setAttribute("role", "button");
+        this.rangeViewContainer.setAttribute("aria-label", "RangeContainer");
         this.virtualRender = new VirtualContentRenderer(this.parent);
         this.addEventListener();
     }
@@ -232,7 +233,7 @@ var GanttChart = /** @class */ (function () {
         });
         this.chartBodyContainer.appendChild(this.scrollElement);
         this.chartBodyContent = createElement('div', { className: cls.chartBodyContent, styles: 'position:relative; overflow:hidden ' });
-        if (this.parent.virtualScrollModule && this.parent.enableVirtualization) {
+        if (this.parent.virtualScrollModule && this.parent.enableVirtualization || this.parent.enableTimelineVirtualization) {
             this.parent.ganttChartModule.virtualRender.renderWrapper();
         }
         else {
@@ -257,7 +258,7 @@ var GanttChart = /** @class */ (function () {
         var emptydivHeight = 36;
         var emptyHeight = this.parent.contentHeight === 0 ? this.parent.flatData.length > 1 ? emptydivHeight : 0 : this.parent.contentHeight;
         var contentElement = this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0];
-        if (emptyHeight >= contentElement['offsetHeight'] || this.parent.height === 'auto') {
+        if (emptyHeight >= contentElement['offsetHeight'] || this.parent.height === 'auto' || (contentElement['offsetHeight'] - emptyHeight) < emptydivHeight) {
             this.chartBodyContent.style.height = formatUnit(emptyHeight);
         }
         else {
@@ -269,7 +270,8 @@ var GanttChart = /** @class */ (function () {
                 this.chartBodyContent.style.height = contentElement['offsetHeight'] + 'px';
             }
         } //let element: HTMLElement = this.chartTimelineContainer.querySelector('.' + cls.timelineHeaderTableContainer);
-        this.chartBodyContent.style.width = formatUnit(this.parent.timelineModule.totalTimelineWidth);
+        this.chartBodyContent.style.width = (this.parent.enableTimelineVirtualization && (this.parent.timelineModule.totalTimelineWidth > this.parent.element.offsetWidth * 3)) ? formatUnit(this.parent.element.offsetWidth * 3)
+            : formatUnit(this.parent.timelineModule.totalTimelineWidth);
         this.setVirtualHeight();
         this.parent.notify('updateHeight', {});
         this.parent.updateGridLineContainerHeight();
@@ -281,7 +283,15 @@ var GanttChart = /** @class */ (function () {
             wrapper.style.height = this.parent.treeGrid.element.getElementsByClassName('e-virtualtrack')[0].style.height;
             var wrapper1 = getValue('wrapper', this.parent.ganttChartModule.virtualRender);
             var treegridVirtualHeight = this.parent.treeGrid.element.getElementsByClassName('e-virtualtable')[0].style.transform;
-            wrapper1.style.transform = treegridVirtualHeight;
+            var virtualTable = document.getElementsByClassName('e-virtualtable')[1].style.transform;
+            if (this.parent.enableTimelineVirtualization && virtualTable !== "") {
+                var translateXValue = virtualTable.match(/translate.*\((.+)\)/)[1].split(', ')[0];
+                var translateYValue = treegridVirtualHeight.match(/translate.*\((.+)\)/)[1].split(', ')[1];
+                wrapper1.style.transform = "translate(" + translateXValue + ", " + translateYValue + ")";
+            }
+            else {
+                wrapper1.style.transform = treegridVirtualHeight;
+            }
         }
     };
     /**
@@ -306,7 +316,7 @@ var GanttChart = /** @class */ (function () {
                     var emptydivHeight = 36;
                     var emptyHeight = this.parent.contentHeight === 0 ? this.parent.flatData.length > 1 ? emptydivHeight : 0 : this.parent.contentHeight;
                     var contentElement = this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0];
-                    if (emptyHeight >= contentElement['offsetHeight']) {
+                    if (emptyHeight >= contentElement['offsetHeight'] || (contentElement['offsetHeight'] - emptyHeight) < emptydivHeight) {
                         this.chartBodyContent.style.height = formatUnit(emptyHeight);
                     }
                     else {
@@ -339,17 +349,33 @@ var GanttChart = /** @class */ (function () {
      * @returns {void} .
      */
     GanttChart.prototype.ganttChartMouseDown = function (e) {
-        if (e.which !== 3 && this.parent.editSettings.allowTaskbarEditing) {
-            this.parent.notify('chartMouseDown', e);
-            this.parent.element.tabIndex = 0;
-        }
-        var isTaskbarEdited = false;
-        if (this.parent.editSettings.allowTaskbarEditing && this.parent.element.querySelector('.e-left-resize-gripper')) {
-            isTaskbarEdited = true;
-        }
-        if (!isTaskbarEdited || e.button == 2) {
-            if (this.parent.editSettings.allowEditing && this.parent.treeGrid.element.getElementsByClassName('e-editedbatchcell').length > 0) {
-                this.parent.treeGrid.endEdit();
+        var cancel = false;
+        if (this.parent.allowTaskbarDragAndDrop && this.parent.editModule && this.parent.editSettings.allowTaskbarEditing) {
+            var editAction = this.parent.editModule.taskbarEditModule['getTaskBarAction'](e);
+            if (editAction === 'ChildDrag' || editAction === 'ParentDrag' || editAction === 'MilestoneDrag' || editAction === 'ManualParentDrag') {
+                var args = {
+                    cancel: cancel,
+                    data: this.getRecordByTaskBar(e.target),
+                    target: e.target,
+                    chartRow: closest(e.target, 'tr')
+                };
+                this.parent.trigger('rowDragStartHelper', args);
+                cancel = args['cancel'];
+            }
+        }
+        if (!cancel) {
+            if (e.which !== 3 && this.parent.editSettings.allowTaskbarEditing) {
+                this.parent.notify('chartMouseDown', e);
+                this.parent.element.tabIndex = 0;
+            }
+            var isTaskbarEdited = false;
+            if (this.parent.editSettings.allowTaskbarEditing && (this.parent.element.querySelector('.e-left-resize-gripper') || this.parent.element.querySelector('.e-left-connectorpoint-outer-div'))) {
+                isTaskbarEdited = true;
+            }
+            if (!isTaskbarEdited || e.button == 2) {
+                if (this.parent.editSettings.allowEditing && this.parent.treeGrid.element.getElementsByClassName('e-editedbatchcell').length > 0) {
+                    this.parent.treeGrid.endEdit();
+                }
             }
         }
     };
@@ -413,10 +439,11 @@ var GanttChart = /** @class */ (function () {
             this.parent.currentViewData.length > 0) {
             var rowIndex = getValue('rowIndex', closest(e.target, 'tr'));
             var dateObject = this.parent.currentViewData[rowIndex].ganttProperties.startDate;
+            var dateObjLeft = this.parent.currentViewData[rowIndex].ganttProperties.left;
             if (!isNullOrUndefined(dateObject)) {
-                var left = this.parent.dataOperation.getTaskLeft(dateObject, false);
+                var left = !this.parent.enableTimelineVirtualization ? this.parent.dataOperation.getTaskLeft(dateObject, false) : {};
                 if (this.parent.autoFocusTasks) {
-                    this.updateScrollLeft(left);
+                    this.parent.enableTimelineVirtualization ? this.updateScrollLeft(dateObjLeft) : this.updateScrollLeft(left);
                 }
             }
         }
@@ -494,7 +521,7 @@ var GanttChart = /** @class */ (function () {
         if (!isNullOrUndefined(resizeCheck)) {
             resizeCheck.remove();
         }
-        var Check = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-clone-taskbar');
+        var Check = this.parent.element.getElementsByClassName('e-clone-taskbar')[0];
         if (!isNullOrUndefined(Check)) {
             var clonetbody = Check.parentElement;
             var cloneTable = clonetbody.parentElement;
@@ -584,6 +611,18 @@ var GanttChart = /** @class */ (function () {
      */
     GanttChart.prototype.ganttChartMove = function (e) {
         if (this.parent.editSettings.allowTaskbarEditing) {
+            if (this.parent.element.getElementsByClassName('e-clone-taskbar').length > 0) {
+                var xValue = void 0;
+                if (e.type === 'touchmove' || e.type === 'touchstart' || e.type === 'touchend') {
+                    xValue = e['changedTouches'][0].pageX;
+                }
+                else {
+                    xValue = e.pageX;
+                }
+                if (xValue <= this.parent.getOffsetRect(this.parent.ganttChartModule.chartElement).left) {
+                    return;
+                }
+            }
             this.parent.notify('chartMouseMove', e);
             if (!isNullOrUndefined(this.parent.taskFields.dependency) && this.parent.connectorLineEditModule) {
                 this.parent.connectorLineEditModule.updateConnectorLineEditElement(e);
@@ -674,11 +713,14 @@ var GanttChart = /** @class */ (function () {
      * @returns {void} .
      */
     GanttChart.prototype.doubleClickHandler = function (e) {
-        this.parent.notify('chartDblClick', e);
         var target = e.target;
         var row = closest(target, 'tr');
         var rowIndex = getValue('rowIndex', row);
         var rowData = this.parent.ganttChartModule.getRecordByTarget(e);
+        if (this.parent.editSettings.allowEditing && this.parent.treeGrid.element.getElementsByClassName('e-editedbatchcell').length > 0) {
+            this.parent.treeGrid.endEdit();
+        }
+        this.parent.notify('chartDblClick', e);
         var args = {
             row: row,
             rowData: rowData,

package/src/gantt/base/gantt-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, createElement, Complex, addClass, removeClass, Event, EmitType, formatUnit, Browser, closest } from '@syncfusion/ej2-base';import { Internationalization, extend, getValue, isObjectArray, isObject, setValue, isUndefined } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, L10n, ModuleDeclaration, EventHandler } from '@syncfusion/ej2-base';import { isNullOrUndefined, KeyboardEvents, KeyboardEventArgs, Collection, append, remove } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner, Dialog } from '@syncfusion/ej2-popups';import { RowDragEventArgs, GridColumn} from '@syncfusion/ej2-grids';import { TaskProcessor } from './task-processor';import { GanttChart } from './gantt-chart';import { Timeline } from '../renderer/timeline';import { GanttTreeGrid } from './tree-grid';import { Toolbar } from '../actions/toolbar';import { CriticalPath } from '../actions/critical-path';import { IGanttData, IWorkingTimeRange, IQueryTaskbarInfoEventArgs, BeforeTooltipRenderEventArgs, IDependencyEventArgs } from './interface';import { DataStateChangeEventArgs } from '@syncfusion/ej2-treegrid';import { ITaskbarEditedEventArgs, IParent, ITaskData, PdfColumnHeaderQueryCellInfoEventArgs } from './interface';import { ICollapsingEventArgs, CellEditArgs, PdfQueryTimelineCellInfoEventArgs } from './interface';import { IConnectorLineObject, IValidateArgs, IValidateMode, ITaskAddedEventArgs, IKeyPressedEventArgs } from './interface';import { PdfExportProperties, ISplitterResizedEventArgs } from './interface';import { ZoomEventArgs, IActionBeginEventArgs, CellSelectingEventArgs, RowDeselectEventArgs, PdfQueryCellInfoEventArgs } from './interface';import { ITimeSpanEventArgs, ZoomTimelineSettings, QueryCellInfoEventArgs, RowDataBoundEventArgs, RowSelectEventArgs } from './interface';import { TaskFieldsModel, TimelineSettingsModel, SplitterSettingsModel, SortSettings, SortSettingsModel } from '../models/models';import { EventMarkerModel, AddDialogFieldSettingsModel, EditDialogFieldSettingsModel, EditSettingsModel } from '../models/models';import { HolidayModel, DayWorkingTimeModel, FilterSettingsModel, SelectionSettingsModel,LoadingIndicatorModel, LoadingIndicator } from '../models/models';import { TaskFields, TimelineSettings, Holiday, EventMarker, DayWorkingTime, EditSettings, SelectionSettings } from '../models/models';import { FilterSettings, SplitterSettings, TooltipSettings, LabelSettings, LabelSettingsModel } from '../models/models';import { SearchSettingsModel, SearchSettings, ResourceFields, ResourceFieldsModel } from '../models/models';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { DateProcessor } from './date-processor';import { ChartRows } from '../renderer/chart-rows';import { Dependency } from '../actions/dependency';import * as cls from './css-constants';import { Query, DataManager } from '@syncfusion/ej2-data';import { Column, ColumnModel } from '../models/column';import { TreeGrid, FilterSettingsModel as TreeGridFilterSettingModel } from '@syncfusion/ej2-treegrid';import { Sort } from '../actions/sort';import { CellSelectEventArgs, ISelectedCell, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { CellDeselectEventArgs, IIndex, FailureEventArgs } from '@syncfusion/ej2-grids';import { HeaderCellInfoEventArgs, ColumnMenuClickEventArgs, ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuItemModel, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { RowDD } from '../actions/rowdragdrop';import { Filter } from '../actions/filter';import { PageEventArgs, FilterEventArgs, SortEventArgs, ResizeArgs, ColumnDragEventArgs, getActualProperties } from '@syncfusion/ej2-grids';import { RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';import { ConnectorLine } from '../renderer/connector-line';import { ConnectorLineEdit } from '../actions/connector-line-edit';import { Edit } from '../actions/edit';import { Splitter } from './splitter';import { ResizeEventArgs, ResizingEventArgs } from '@syncfusion/ej2-layouts';import { TooltipSettingsModel } from '../models/tooltip-settings-model';import { Tooltip } from '../renderer/tooltip';import { ToolbarItem, ColumnMenuItem, RowPosition, DurationUnit, SortDirection } from './enum';import { GridLine, ContextMenuItem, ScheduleMode, ViewType } from './enum';import { Selection } from '../actions/selection';import { ExcelExport } from '../actions/excel-export';import { DayMarkers } from '../actions/day-markers';import { ContextMenu } from './../actions/context-menu';import { RowSelectingEventArgs } from './interface';import { ContextMenuOpenEventArgs as CMenuOpenEventArgs, ContextMenuClickEventArgs as CMenuClickEventArgs } from './interface';import { ColumnMenu } from '../actions/column-menu';import { ITaskbarClickEventArgs, RecordDoubleClickEventArgs, IMouseMoveEventArgs } from './interface';import { PdfExport } from '../actions/pdf-export';import { WorkUnit, TaskType } from './enum';import { FocusModule } from '../actions/keyboard';import { VirtualScroll } from '../actions/virtual-scroll';import { isCountRequired } from './utils';import { TaskbarEdit } from '../actions/taskbar-edit';
+import { Component, createElement, Complex, addClass, removeClass, Event, EmitType, formatUnit, Browser, closest } from '@syncfusion/ej2-base';import { Internationalization, extend, getValue, isObjectArray, isObject, setValue, isUndefined } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, L10n, ModuleDeclaration, EventHandler } from '@syncfusion/ej2-base';import { isNullOrUndefined, KeyboardEvents, KeyboardEventArgs, Collection, append, remove } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner, Dialog } from '@syncfusion/ej2-popups';import { RowDragEventArgs, GridColumn} from '@syncfusion/ej2-grids';import { TaskProcessor } from './task-processor';import { GanttChart } from './gantt-chart';import { Timeline } from '../renderer/timeline';import { GanttTreeGrid } from './tree-grid';import { Toolbar } from '../actions/toolbar';import { CriticalPath } from '../actions/critical-path';import { IGanttData, IWorkingTimeRange, IQueryTaskbarInfoEventArgs, BeforeTooltipRenderEventArgs, IDependencyEventArgs } from './interface';import { DataStateChangeEventArgs } from '@syncfusion/ej2-treegrid';import { ITaskbarEditedEventArgs, IParent, ITaskData, PdfColumnHeaderQueryCellInfoEventArgs } from './interface';import { ICollapsingEventArgs, CellEditArgs, PdfQueryTimelineCellInfoEventArgs } from './interface';import { IConnectorLineObject, IValidateArgs, IValidateMode, ITaskAddedEventArgs, IKeyPressedEventArgs, IEventMarkerInfo } from './interface';import { PdfExportProperties, ISplitterResizedEventArgs } from './interface';import { ZoomEventArgs, IActionBeginEventArgs, CellSelectingEventArgs, RowDeselectEventArgs, PdfQueryCellInfoEventArgs } from './interface';import { ITimeSpanEventArgs, ZoomTimelineSettings, QueryCellInfoEventArgs, RowDataBoundEventArgs, RowSelectEventArgs } from './interface';import { TaskFieldsModel, TimelineSettingsModel, SplitterSettingsModel, SortSettings, SortSettingsModel } from '../models/models';import { EventMarkerModel, AddDialogFieldSettingsModel, EditDialogFieldSettingsModel, EditSettingsModel } from '../models/models';import { HolidayModel, DayWorkingTimeModel, FilterSettingsModel, SelectionSettingsModel,LoadingIndicatorModel, LoadingIndicator } from '../models/models';import { TaskFields, TimelineSettings, Holiday, EventMarker, DayWorkingTime, EditSettings, SelectionSettings } from '../models/models';import { FilterSettings, SplitterSettings, TooltipSettings, LabelSettings, LabelSettingsModel } from '../models/models';import { SearchSettingsModel, SearchSettings, ResourceFields, ResourceFieldsModel } from '../models/models';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { DateProcessor } from './date-processor';import { ChartRows } from '../renderer/chart-rows';import { Dependency } from '../actions/dependency';import * as cls from './css-constants';import { Query, DataManager } from '@syncfusion/ej2-data';import { Column, ColumnModel } from '../models/column';import { TreeGrid, FilterSettingsModel as TreeGridFilterSettingModel } from '@syncfusion/ej2-treegrid';import { Sort } from '../actions/sort';import { CellSelectEventArgs, ISelectedCell, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { CellDeselectEventArgs, IIndex, FailureEventArgs } from '@syncfusion/ej2-grids';import { HeaderCellInfoEventArgs, ColumnMenuClickEventArgs, ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuItemModel, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { RowDD } from '../actions/rowdragdrop';import { Filter } from '../actions/filter';import { PageEventArgs, FilterEventArgs, SortEventArgs, ResizeArgs, ColumnDragEventArgs, getActualProperties } from '@syncfusion/ej2-grids';import { RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';import { ConnectorLine } from '../renderer/connector-line';import { ConnectorLineEdit } from '../actions/connector-line-edit';import { Edit } from '../actions/edit';import { Splitter } from './splitter';import { ResizeEventArgs, ResizingEventArgs } from '@syncfusion/ej2-layouts';import { TooltipSettingsModel } from '../models/tooltip-settings-model';import { Tooltip } from '../renderer/tooltip';import { ToolbarItem, ColumnMenuItem, RowPosition, DurationUnit, SortDirection } from './enum';import { GridLine, ContextMenuItem, ScheduleMode, ViewType } from './enum';import { Selection } from '../actions/selection';import { ExcelExport } from '../actions/excel-export';import { DayMarkers } from '../actions/day-markers';import { ContextMenu } from './../actions/context-menu';import { RowSelectingEventArgs } from './interface';import { ContextMenuOpenEventArgs as CMenuOpenEventArgs, ContextMenuClickEventArgs as CMenuClickEventArgs } from './interface';import { ColumnMenu } from '../actions/column-menu';import { ITaskbarClickEventArgs, RecordDoubleClickEventArgs, IMouseMoveEventArgs } from './interface';import { PdfExport } from '../actions/pdf-export';import { WorkUnit, TaskType } from './enum';import { FocusModule } from '../actions/keyboard';import { VirtualScroll } from '../actions/virtual-scroll';import { isCountRequired } from './utils';import { TaskbarEdit } from '../actions/taskbar-edit';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -277,6 +277,14 @@ export interface GanttModel extends ComponentModel{
      */
     enableVirtualization?: boolean;
 
+    /**
+    * Loads project with large time span with better performance by initially rendering the timeline cells that are 
+    * visible only within the current view and load subsequent timeline cells on horizontal scrolling.
+    *
+    * @default false
+    */
+    enableTimelineVirtualization?: boolean;
+
     /**
      * `toolbar` defines the toolbar items of the Gantt.
      * It contains built-in and custom toolbar items

package/src/gantt/base/gantt.d.ts

@@ -15,7 +15,7 @@ import { IGanttData, IWorkingTimeRange, IQueryTaskbarInfoEventArgs, BeforeToolti
 import { DataStateChangeEventArgs } from '@syncfusion/ej2-treegrid';
 import { ITaskbarEditedEventArgs, IParent, ITaskData, PdfColumnHeaderQueryCellInfoEventArgs } from './interface';
 import { ICollapsingEventArgs, CellEditArgs, PdfQueryTimelineCellInfoEventArgs } from './interface';
-import { IConnectorLineObject, IValidateArgs, IValidateMode, ITaskAddedEventArgs, IKeyPressedEventArgs } from './interface';
+import { IConnectorLineObject, IValidateArgs, IValidateMode, ITaskAddedEventArgs, IKeyPressedEventArgs, IEventMarkerInfo } from './interface';
 import { PdfExportProperties, ISplitterResizedEventArgs } from './interface';
 import { ZoomEventArgs, IActionBeginEventArgs, CellSelectingEventArgs, RowDeselectEventArgs, PdfQueryCellInfoEventArgs } from './interface';
 import { ITimeSpanEventArgs, ZoomTimelineSettings, QueryCellInfoEventArgs, RowDataBoundEventArgs, RowSelectEventArgs } from './interface';
@@ -89,6 +89,7 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
     private isProjectDateUpdated;
     currentSelection: any;
     columnLoop: any;
+    private isRowSelected;
     showIndicator: boolean;
     singleTier: number;
     isVirtualScroll: boolean;
@@ -541,6 +542,13 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * @default false
      */
     enableVirtualization: boolean;
+    /**
+    * Loads project with large time span with better performance by initially rendering the timeline cells that are
+    * visible only within the current view and load subsequent timeline cells on horizontal scrolling.
+    *
+    * @default false
+    */
+    enableTimelineVirtualization: boolean;
     /**
      * `toolbar` defines the toolbar items of the Gantt.
      * It contains built-in and custom toolbar items
@@ -1311,6 +1319,7 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * @returns {string} .
      * @private
      */
+    eventMarkerColloction: IEventMarkerInfo[];
     getModuleName(): string;
     /**
      * For internal use only - Initialize the event handler
@@ -1867,6 +1876,7 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * @param  {Object} data - Defines the data to modify.
      * @returns {void} .
      * @public
+     * > In order to update the custom columns using `updateRecordByID`, it is necessary to define the respective fieldName in the column settings.
      */
     updateRecordByID(data: Object): void;
     /**

package/src/gantt/base/gantt.js

@@ -59,6 +59,7 @@ var Gantt = /** @class */ (function (_super) {
     __extends(Gantt, _super);
     function Gantt(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.isRowSelected = false;
         _this.showIndicator = true;
         _this.singleTier = 0;
         _this.isLocaleChanged = false;
@@ -111,15 +112,16 @@ var Gantt = /** @class */ (function (_super) {
          * @private
          */
         _this.isEdit = false;
+        /**
+         * To get the module name
+         *
+         * @returns {string} .
+         * @private
+         */
+        _this.eventMarkerColloction = [];
         setValue('mergePersistData', _this.mergePersistGanttData, _this);
         return _this;
     }
-    /**
-     * To get the module name
-     *
-     * @returns {string} .
-     * @private
-     */
     Gantt.prototype.getModuleName = function () {
         return 'gantt';
     };
@@ -341,6 +343,7 @@ var Gantt = /** @class */ (function (_super) {
             this.treeGrid.vueInstance = this.vueInstance;
             this.treeGrid.grid.vueInstance = this.vueInstance;
         }
+        this.element.setAttribute('role', 'application');
         createSpinner({ target: this.element }, this.createElement);
         this.trigger('load', {});
         this.element.classList.add(cls.root);
@@ -506,7 +509,7 @@ var Gantt = /** @class */ (function (_super) {
         else {
             maskTable.style.height = element.getBoundingClientRect().height + 'px';
             var div = this.createElement('div', { className: 'e-temp-timeline' });
-            div.style.width = 614 + 'px';
+            div.style.width = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] + 'px';
             div.style.position = 'sticky';
             if (this.enableRtl) {
                 div.style['margin-right'] = Math.abs(this.scrollLeftValue) + 'px';
@@ -540,10 +543,13 @@ var Gantt = /** @class */ (function (_super) {
     };
     Gantt.prototype.applyTimelineMaskRow = function (row) {
         var maskRow = row;
-        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
-        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
-        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
-        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        var num = 4;
+        if (this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] / 166 > 4) {
+            num = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] / 166;
+        }
+        for (var i = 0; i < num; i++) {
+            maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        }
         for (var i = 0; i < maskRow.childNodes.length - 1; i++) {
             maskRow.childNodes[parseInt(i.toString(), 10)]['style']['width'] = 166 + 'px';
         }
@@ -631,8 +637,13 @@ var Gantt = /** @class */ (function (_super) {
     Gantt.prototype.applyMaskRow = function (row) {
         var maskRow = row;
         if (this.columnLoop < 4) {
-            maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
-            maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
+            var num = 2;
+            if (this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] / 300 > 2) {
+                num = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] / 300;
+            }
+            for (var i = 0; i < num; i++) {
+                maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
+            }
         }
         else {
             maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
@@ -783,9 +794,9 @@ var Gantt = /** @class */ (function (_super) {
         if (!this.isFromOnPropertyChange) {
             this.splitterModule.updateSplitterPosition();
         }
-        // if (this.gridLines === 'Vertical' || this.gridLines === 'Both') {
-        //     this.renderChartVerticalLines();
-        // }
+        if ((this.gridLines === 'Vertical' || this.gridLines === 'Both') && (!this.dayMarkersModule)) {
+            this.renderChartVerticalLines();
+        }
     };
     Gantt.prototype.removeCriticalPathStyles = function () {
         var ganttChartElement = this.ganttChartModule.chartElement;
@@ -849,7 +860,12 @@ var Gantt = /** @class */ (function (_super) {
         }
     };
     Gantt.prototype.keyActionHandler = function (e) {
-        this.focusModule.onKeyPress(e);
+        if (e.target && (e.action === 'downArrow' || e.action === 'upArrow') && e.target === this.element.querySelector('.e-rowcell')) {
+            this.treeGrid.grid.notify('key-pressed', e);
+        }
+        else {
+            this.focusModule.onKeyPress(e);
+        }
     };
     /**
      * Method for updating row height value in connector line collections
@@ -1257,10 +1273,17 @@ var Gantt = /** @class */ (function (_super) {
     Gantt.prototype.treeDataBound = function (args) {
         this.element.getElementsByClassName('e-chart-root-container')[0]['style'].height = '100%';
         var gridHeight = this.element.getElementsByClassName('e-gridcontent')[0]['style'].height;
+        var gridContent = this.element.getElementsByClassName('e-gridcontent')[0].childNodes[0];
+        gridContent.setAttribute('tabindex', '0');
+        var treeGridrole = this.element.getElementsByClassName('e-gridcontent')[0].childNodes[0].childNodes[0];
+        treeGridrole.setAttribute('role', 'treegrid');
         var timelineContainer = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'];
         gridHeight = 'calc(100% - ' + timelineContainer + 'px)';
         // eslint-disable-next-line
-        this.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+        // this.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+        var scrollContainer = this.element.getElementsByClassName('e-chart-scroll-container e-content')[0];
+        scrollContainer['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+        scrollContainer.setAttribute('tabindex', '0');
         if (!isNullOrUndefined(this.toolbarModule) && !isNullOrUndefined(this.toolbarModule.element)) {
             this.splitterElement.style.height = 'calc(100% - ' + this.toolbarModule.element.offsetHeight + 'px)';
         }
@@ -2566,6 +2589,7 @@ var Gantt = /** @class */ (function (_super) {
         this.splitterModule.splitterPreviousPositionGrid = pane1.scrollWidth + 1 + 'px';
         this.splitterModule.splitterPreviousPositionChart = pane2.scrollWidth + 1 + 'px';
         this.splitterModule.splitterObject.paneSettings[0].size = splitterPosition;
+        this.splitterModule.splitterObject.paneSettings[1].size = (parseFloat('99.75%') - parseFloat(splitterPosition)) + '%';
         this.splitterModule.triggerCustomResizedEvent();
     };
     /**
@@ -2700,6 +2724,7 @@ var Gantt = /** @class */ (function (_super) {
      * @param  {Object} data - Defines the data to modify.
      * @returns {void} .
      * @public
+     * > In order to update the custom columns using `updateRecordByID`, it is necessary to define the respective fieldName in the column settings.
      */
     Gantt.prototype.updateRecordByID = function (data) {
         if (this.editModule && this.editSettings.allowEditing) {
@@ -3513,6 +3538,9 @@ var Gantt = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Gantt.prototype, "enableVirtualization", void 0);
+    __decorate([
+        Property(false)
+    ], Gantt.prototype, "enableTimelineVirtualization", void 0);
     __decorate([
         Property()
     ], Gantt.prototype, "toolbar", void 0);