@syncfusion/ej2-gantt 23.2.7 → 24.1.43

package/src/gantt/export/pdf-timeline.d.ts

@@ -21,6 +21,15 @@ export declare class PdfTimeline {
     private bottomTierIndex;
     private prevTopTierIndex;
     private prevBottomTierIndex;
+    holidayLabel: string;
+    holidayCompleted: boolean;
+    holidayNumberOfDays: number;
+    holidayWidth: number;
+    detailsTimeline: TimelineDetails;
+    fitHolidayCompleted: boolean;
+    fromDataHoliday: string | Date;
+    timelineWidth: number;
+    lastWidth: number;
     constructor(gantt?: PdfGantt);
     /**
      * @private

package/src/gantt/export/pdf-timeline.js

@@ -1,10 +1,14 @@
-import { PointF, PdfColor, PdfPen, PdfSolidBrush, PdfStandardFont, PdfStringFormat, PdfVerticalAlignment, PdfTextAlignment, PdfWordWrapType } from '@syncfusion/ej2-pdf-export';
+import { PointF, PdfColor, PdfPen, PdfSolidBrush, PdfStandardFont, PdfStringFormat, PdfVerticalAlignment, PdfTextAlignment, PdfWordWrapType, PdfFontFamily, PdfBrushes } from '@syncfusion/ej2-pdf-export';
 import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { pixelToPoint, pointToPixel } from '../base/utils';
 /**
  */
 var PdfTimeline = /** @class */ (function () {
     function PdfTimeline(gantt) {
+        this.holidayCompleted = false;
+        this.fitHolidayCompleted = false;
+        this.timelineWidth = 0;
+        this.lastWidth = 0;
         this.width = 0;
         this.gantt = gantt;
         this.parent = gantt.parent;
@@ -23,8 +27,8 @@ var PdfTimeline = /** @class */ (function () {
      * @returns {void}
      */
     PdfTimeline.prototype.drawTimeline = function (page, startPoint, detail) {
-        var remainWidth = (this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings &&
-            this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) ? pointToPixel(Math.floor(detail.totalWidth)) : Math.floor(detail.totalWidth);
+        this.detailsTimeline = detail;
+        var remainWidth = (this.parent.pdfExportModule.gantt.taskbar.isAutoFit()) ? pointToPixel(Math.floor(detail.totalWidth)) : Math.floor(detail.totalWidth);
         var renderWidth = 0;
         this.topTierPoint.x = startPoint.x;
         this.topTierPoint.y = startPoint.y;
@@ -51,9 +55,8 @@ var PdfTimeline = /** @class */ (function () {
                 }
                 //Primary header Event Arguments
                 /* eslint-disable-next-line */
-                this.triggerQueryTimelinecell(page, this.topTierPoint.x, this.topTierPoint.y, this.topTierHeight, renderWidth, pHeader.value, true);
-                this.topTierPoint.x += (this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings &&
-                    this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) ? renderWidth : pixelToPoint(renderWidth);
+                this.triggerQueryTimelinecell(page, this.topTierPoint.x, this.topTierPoint.y, this.topTierHeight, renderWidth, pHeader.value, true, this.parent.timelineModule.isSingleTier && this.parent.timelineSettings.topTier.unit === "Day" ? pHeader.startDate : null);
+                this.topTierPoint.x += (this.parent.pdfExportModule.gantt.taskbar.isAutoFit()) ? renderWidth : pixelToPoint(renderWidth);
                 remainWidth -= renderWidth;
                 if (isCompleted) {
                     this.topTierIndex++;
@@ -78,9 +81,14 @@ var PdfTimeline = /** @class */ (function () {
                 }
                 //Secondary header Event Arguments
                 /* eslint-disable-next-line */
-                this.triggerQueryTimelinecell(page, this.bottomTierPoint.x, this.bottomTierPoint.y, this.bottomTierHeight, width, secondHeader.value, false);
-                this.bottomTierPoint.x = (this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings &&
-                    this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) ? this.bottomTierPoint.x + width : this.bottomTierPoint.x + pixelToPoint(width);
+                if (!this.parent.pdfExportModule.gantt.taskbar.isAutoFit() && this.parent.timelineModule.bottomTier !== "Day") {
+                    var unit = this.parent.perDayWidth;
+                    if (width < unit || (width > unit)) {
+                        width = unit;
+                    }
+                }
+                this.triggerQueryTimelinecell(page, this.bottomTierPoint.x, this.bottomTierPoint.y, this.bottomTierHeight, width, secondHeader.value, false, secondHeader.startDate);
+                this.bottomTierPoint.x = (this.parent.pdfExportModule.gantt.taskbar.isAutoFit()) ? this.bottomTierPoint.x + width : this.bottomTierPoint.x + pixelToPoint(width);
                 remainWidth -= width;
                 secondHeader.completedWidth = width;
                 if (isCompleted) {
@@ -91,6 +99,7 @@ var PdfTimeline = /** @class */ (function () {
                 remainWidth = 0;
             }
         }
+        this.timelineWidth = this.lastWidth;
     };
     /**
      *
@@ -110,9 +119,8 @@ var PdfTimeline = /** @class */ (function () {
                 if (pHeader.completedWidth > 0) {
                     //Primary header Event Arguments
                     /* eslint-disable-next-line */
-                    this.triggerQueryTimelinecell(page, this.topTierPoint.x, this.topTierPoint.y, this.topTierHeight, pHeader.completedWidth, pHeader.value, true);
-                    this.topTierPoint.x += (this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings &&
-                        this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) ? pHeader.completedWidth : pixelToPoint(pHeader.completedWidth);
+                    this.triggerQueryTimelinecell(page, this.topTierPoint.x, this.topTierPoint.y, this.topTierHeight, pHeader.completedWidth, pHeader.value, true, this.parent.timelineModule.isSingleTier && this.parent.timelineSettings.topTier.unit === "Day" ? pHeader.startDate : null);
+                    this.topTierPoint.x += (this.parent.pdfExportModule.gantt.taskbar.isAutoFit()) ? pHeader.completedWidth : pixelToPoint(pHeader.completedWidth);
                 }
             }
         }
@@ -124,9 +132,8 @@ var PdfTimeline = /** @class */ (function () {
                 if (secondHeader.completedWidth > 0) {
                     //Secondary header Event Arguments
                     /* eslint-disable-next-line */
-                    this.triggerQueryTimelinecell(page, this.bottomTierPoint.x, this.bottomTierPoint.y, this.bottomTierHeight, secondHeader.width, secondHeader.value, false);
-                    this.bottomTierPoint.x = (this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings &&
-                        this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) ? this.bottomTierPoint.x + secondHeader.width : this.bottomTierPoint.x + pixelToPoint(secondHeader.width);
+                    this.triggerQueryTimelinecell(page, this.bottomTierPoint.x, this.bottomTierPoint.y, this.bottomTierHeight, secondHeader.width, secondHeader.value, false, secondHeader.startDate);
+                    this.bottomTierPoint.x = (this.parent.pdfExportModule.gantt.taskbar.isAutoFit()) ? this.bottomTierPoint.x + secondHeader.width : this.bottomTierPoint.x + pixelToPoint(secondHeader.width);
                 }
             }
         }
@@ -135,7 +142,9 @@ var PdfTimeline = /** @class */ (function () {
      * Method to trigger pdf query timelinecell event
      */
     /* eslint-disable-next-line */
-    PdfTimeline.prototype.triggerQueryTimelinecell = function (page, x, y, height, width, value, isTopTier) {
+    PdfTimeline.prototype.triggerQueryTimelinecell = function (page, x, y, height, width, value, isTopTier, currentDate) {
+        var _this = this;
+        var days = new Date(currentDate).getDay();
         var graphics = page.graphics;
         var timelineStyle = {};
         var ganttStyle = this.gantt.ganttStyle;
@@ -171,12 +180,81 @@ var PdfTimeline = /** @class */ (function () {
             this.parent.trigger('pdfQueryTimelineCellInfo', eventArgs);
         }
         var e = eventArgs.timelineCell;
-        var rectPen = new PdfPen(eventArgs.timelineCell.borderColor);
+        var rectPen;
         var rectBrush = new PdfSolidBrush(eventArgs.timelineCell.backgroundColor);
-        graphics.drawRectangle(rectPen, rectBrush, x, y, (this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings &&
-            this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) ? width : pixelToPoint(width), pixelToPoint(height));
+        var nonWorkingDays = this.parent.nonWorkingDayIndex;
+        if (this.parent.highlightWeekends && nonWorkingDays.indexOf(days) !== -1 && (this.parent.timelineModule.bottomTier === "Day" || this.parent.timelineModule.bottomTier === "None" && this.parent.timelineModule.topTier === "Day")) {
+            rectBrush = new PdfSolidBrush(new PdfColor(238, 238, 238));
+        }
+        this.parent.holidays.map(function (item) {
+            var fromDate = new Date(item.from);
+            var toDate = new Date(item.to);
+            var timelinedate = new Date(currentDate);
+            if (fromDate <= timelinedate && toDate >= timelinedate && (_this.parent.timelineModule.bottomTier === "Day" || (_this.parent.timelineModule.bottomTier === "None" && _this.parent.timelineModule.topTier === "Day"))) {
+                rectBrush = new PdfSolidBrush(new PdfColor(238, 238, 238));
+                if (fromDate.getTime() === timelinedate.getTime()) {
+                    _this.holidayWidth = x;
+                }
+                if (toDate.getTime() === timelinedate.getTime()) {
+                    _this.holidayLabel = item.label;
+                    var changeDate = new Date(item.to);
+                    changeDate.setDate(changeDate.getDate() + 1);
+                    var day = _this.parent.dataOperation.getTaskWidth(fromDate, changeDate);
+                    _this.holidayNumberOfDays = day / width;
+                    _this.holidayCompleted = true;
+                }
+            }
+            else if (_this.parent.timelineModule.bottomTier !== "Day") {
+                if (_this.detailsTimeline.startDate <= fromDate && _this.detailsTimeline.endDate >= fromDate) {
+                    _this.parent.timelineModule.bottomTierCollection.map(function (items, index) {
+                        if (items.startDate <= fromDate && items.endDate >= fromDate) {
+                            if (items.startDate === currentDate) {
+                                _this.fitHolidayCompleted = true;
+                                _this.fromDataHoliday = item.from;
+                                _this.holidayLabel = item.label;
+                            }
+                        }
+                    });
+                }
+            }
+        });
+        var rectPen1 = new PdfPen(eventArgs.timelineCell.borderColor);
+        if (!this.parent.pdfExportModule.gantt.taskbar.isAutoFit()) {
+            this.lastWidth = x + width;
+        }
+        graphics.drawRectangle(rectPen1, rectBrush, x, y, width, pixelToPoint(height));
         if (!isTopTier && (this.parent.gridLines == "Both" || this.parent.gridLines == "Vertical")) {
-            graphics.drawRectangle(rectPen, rectBrush, x, y + pixelToPoint(height), width, page.getClientSize().height);
+            rectPen = new PdfPen(eventArgs.timelineCell.borderColor);
+        }
+        else {
+            rectPen = null;
+        }
+        graphics.drawRectangle(rectPen, rectBrush, x, y + pixelToPoint(height), width, page.getClientSize().height);
+        if (this.holidayCompleted) {
+            var state = graphics.save();
+            var font1 = new PdfStandardFont(PdfFontFamily.Helvetica, 10);
+            var fontHieght = font1.height;
+            var fontSize = font1.size;
+            graphics.translateTransform(this.holidayWidth + width - ((fontSize / 2) * this.holidayNumberOfDays) - fontHieght + fontHieght / 2 + (width * this.holidayNumberOfDays) / 2, 40);
+            graphics.rotateTransform(-90);
+            graphics.translateTransform(-(page.getClientSize().height / 2), -40);
+            graphics.drawString(this.holidayLabel, font1, null, PdfBrushes.Black, 10, 10, null);
+            graphics.restore(state);
+            this.holidayCompleted = false;
+        }
+        if (this.fitHolidayCompleted) {
+            var holidayBrush = new PdfSolidBrush(new PdfColor(238, 238, 238));
+            var font1 = new PdfStandardFont(PdfFontFamily.Helvetica, 10);
+            var fontHieght = font1.height;
+            var fontSize = font1.size;
+            graphics.drawRectangle(null, holidayBrush, x + width / 2 - fontSize, y + pixelToPoint(height), fontSize, page.getClientSize().height);
+            var state = graphics.save();
+            graphics.translateTransform(x + width + width / 2 - fontSize, 40);
+            graphics.rotateTransform(-90);
+            graphics.translateTransform(-(page.getClientSize().height / 2), -40);
+            graphics.drawString(this.holidayLabel, font1, null, PdfBrushes.Black, 10, 10, null);
+            graphics.restore(state);
+            this.fitHolidayCompleted = false;
         }
         var font = new PdfStandardFont(ganttStyle.fontFamily, e.fontSize, e.fontStyle);
         if (ganttStyle.font) {

package/src/gantt/models/column.d.ts

@@ -89,6 +89,12 @@ export declare class Column {
      * @default 'stringedit'
      */
     editType: string;
+    /**
+     * Defines rules to validate data before creating and updating.
+     *
+     * @default null
+     */
+    validationRules: Object;
     /**
      * Defines the custom sort comparer function.
      */
@@ -246,6 +252,12 @@ export interface ColumnModel {
      * @default true
      */
     allowFiltering?: boolean;
+    /**
+     * Defines rules to validate data before creating and updating.
+     *
+     * @default null
+     */
+    validationRules?: Object;
     /**
      * It is used to customize the default filter options for a specific columns.
      * * ui - to render custom component for specific column it has following functions.

package/src/gantt/renderer/chart-rows.d.ts

@@ -228,7 +228,7 @@ export declare class ChartRows extends DateProcessor {
      */
     getGanttChartRow(i: number, tempTemplateData: IGanttData): Node;
     /**
-     * To set aria-rowindex for chart rows
+     * To set data-rowindex for chart rows
      *
      * @returns {void} .
      * @private

package/src/gantt/renderer/chart-rows.js

@@ -55,7 +55,7 @@ var ChartRows = /** @class */ (function (_super) {
         this.parent.on('destroy', this.destroy, this);
     };
     ChartRows.prototype.refreshChartByTimeline = function () {
-        this.taskTable.style.width = formatUnit(this.parent.timelineModule.totalTimelineWidth);
+        this.taskTable.style.width = formatUnit(this.parent.enableTimelineVirtualization ? this.parent.timelineModule.wholeTimelineWidth : this.parent.timelineModule.totalTimelineWidth);
         var prevDate = getValue('prevProjectStartDate', this.parent.dataOperation);
         var isUpdated = false;
         if (prevDate) {
@@ -75,7 +75,7 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.createChartTable = function () {
         this.taskTable = createElement('table', {
             className: cls.taskTable + ' ' + cls.zeroSpacing, id: 'GanttTaskTable' + this.parent.element.id,
-            styles: 'position: absolute;width:' + this.parent.timelineModule.totalTimelineWidth + 'px;',
+            styles: 'position: absolute;width:' + (this.parent.enableTimelineVirtualization ? this.parent.timelineModule.wholeTimelineWidth : this.parent.timelineModule.totalTimelineWidth) + 'px;',
             attrs: { cellspacing: '0.25px' }
         });
         var colgroup = createElement('colgroup');
@@ -89,7 +89,7 @@ var ChartRows = /** @class */ (function (_super) {
         this.parent.ganttChartModule.chartBodyContent.appendChild(this.taskTable);
     };
     ChartRows.prototype.initiateTemplates = function () {
-        this.taskTable.style.width = formatUnit(this.parent.timelineModule.totalTimelineWidth);
+        this.taskTable.style.width = formatUnit(this.parent.enableTimelineVirtualization ? this.parent.timelineModule.wholeTimelineWidth : this.parent.timelineModule.totalTimelineWidth);
         this.initChartHelperPrivateVariable();
         this.initializeChartTemplate();
     };
@@ -546,7 +546,14 @@ var ChartRows = /** @class */ (function (_super) {
     };
     ChartRows.prototype.splitSegmentedTaskbar = function (startDate, endDate, splitDate, segmentIndex, segments, ganttData, segmentDuration) {
         var ganttProp = ganttData.ganttProperties;
-        var checkClickState = this.parent.nonWorkingDayIndex.indexOf(splitDate.getDay());
+        var checkClickState;
+        var endDateState;
+        if (this.parent.includeWeekend) {
+            checkClickState = -1;
+        }
+        else {
+            checkClickState = this.parent.nonWorkingDayIndex.indexOf(splitDate.getDay());
+        }
         var increment = checkClickState === -1 ? 0 : checkClickState === 0 ? 1 : 2;
         startDate = this.parent.dataOperation.checkStartDate(startDate, ganttProp, false);
         var segmentEndDate = new Date(splitDate.getTime());
@@ -558,7 +565,12 @@ var ChartRows = /** @class */ (function (_super) {
                 duration: this.parent.dataOperation.getDuration(startDate, segmentEndDate, ganttProp.durationUnit, ganttProp.isAutoSchedule, ganttProp.isMilestone),
                 offsetDuration: 1
             };
-            var endDateState = this.parent.nonWorkingDayIndex.indexOf(segmentEndDate.getDay());
+            if (this.parent.includeWeekend) {
+                endDateState = -1;
+            }
+            else {
+                endDateState = this.parent.nonWorkingDayIndex.indexOf(segmentEndDate.getDay());
+            }
             if (segmentIndex !== -1) {
                 segments.splice(segmentIndex, 1);
                 segmentIndex = -1;
@@ -771,7 +783,7 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getManualTaskbar = function () {
         var data = this.templateData;
         var taskbarHeight = (this.taskBarHeight / 2 - 1);
-        var innerDiv = (data.ganttProperties.startDate && data.ganttProperties.endDate && data.ganttProperties.duration) ?
+        var innerDiv = (data.ganttProperties.startDate && data.ganttProperties.endDate && (data.ganttProperties.duration || data.hasChildRecords)) ?
             ('<div class="' + cls.manualParentTaskBar + '" style="width:' + data.ganttProperties.width + 'px;' + 'height:' +
                 taskbarHeight / 5 + 'px;border-left-width:' + taskbarHeight / 5 +
                 'px; border-bottom:' + taskbarHeight / 5 + 'px solid transparent;"></div>') :
@@ -787,8 +799,8 @@ var ChartRows = /** @class */ (function (_super) {
         var template = '<div class="' + cls.manualParentMainContainer + '"' +
             'style=' + (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.left - data.ganttProperties.autoLeft) + 'px;' +
             'width:' + data.ganttProperties.width + 'px;' +
-            'height:' + taskbarHeight + 'px;>' + innerDiv + ((data.ganttProperties.startDate && data.ganttProperties.endDate &&
-            data.ganttProperties.duration) || data.ganttProperties.duration ? '<div class="e-gantt-manualparenttaskbar-left" style=' +
+            'height:' + taskbarHeight + 'px;cursor:' + (this.parent.editSettings.allowTaskbarEditing ? 'move;' : 'default;') + '</div>' + innerDiv + ((data.ganttProperties.startDate && data.ganttProperties.endDate &&
+            (data.ganttProperties.duration || data.hasChildRecords)) || data.ganttProperties.duration ? '<div class="e-gantt-manualparenttaskbar-left" style=' +
             (this.parent.enableRtl ? 'margin-right:0px;' : '') + '"height:' + ((taskbarHeight / 5) + 8) + 'px;border-left-width:' + taskbarHeight / 5 +
             'px; border-bottom:' + taskbarHeight / 5 + 'px solid transparent;"></div>' +
             '<div class="e-gantt-manualparenttaskbar-right" style=' + (this.parent.enableRtl ? 'margin-right:-8px;' : '') +
@@ -797,7 +809,7 @@ var ChartRows = /** @class */ (function (_super) {
             taskbarHeight / 5 + 'px solid transparent;>' + '</div></div>' : '');
         var milestoneTemplate = '<div class="' + cls.manualParentMilestone + '" style="width:' + ((this.parent.renderBaseline ? this.taskBarHeight - 3 : this.taskBarHeight - 7)) + 'px;height:' +
             ((this.parent.renderBaseline ? this.taskBarHeight - 3 : this.taskBarHeight - 7)) + 'px;position:absolute;transform: rotate(45deg);top:' + (this.parent.rowHeight > 40 ? 0 : 2) + 'px;left:' + (this.parent.renderBaseline ? 2 : 1) + 'px;"> </div>';
-        return this.createDivElement(data.ganttProperties.duration !== 0 ? template : milestoneTemplate);
+        return this.createDivElement((data.ganttProperties.duration !== 0 || data.hasChildRecords) ? template : milestoneTemplate);
     };
     /**
      * To get parent taskbar node.
@@ -1004,10 +1016,10 @@ var ChartRows = /** @class */ (function (_super) {
             ' tabindex="-1" role="term" style="' + ((data.ganttProperties.isMilestone && !manualParent && !(data.hasChildRecords && !data.ganttProperties.isAutoSchedule)) ?
             ('width:' + this.milestoneHeight + 'px;height:' +
                 this.milestoneHeight + 'px;margin-top:' + this.milestoneMarginTop + 'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.left -
-                (this.milestoneHeight / 2)) + 'px;') : ('width:' + data.ganttProperties.width +
+                (this.milestoneHeight / 2)) + 'px;cursor:' + (this.parent.editSettings.allowTaskbarEditing ? 'move;' : 'default;')) : ('width:' + data.ganttProperties.width +
             'px;margin-top:' + this.taskBarMarginTop + 'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + (!data.hasChildRecords || data.ganttProperties.isAutoSchedule ?
             data.ganttProperties.left : data.ganttProperties.autoLeft) + 'px;height:' +
-            this.taskBarHeight + 'px;cursor:' + (data.ganttProperties.isAutoSchedule ? 'move;' : 'auto;'))) + '"></div>';
+            this.taskBarHeight + 'px;cursor:' + (this.parent.editSettings.allowTaskbarEditing ? 'move;' : 'default;'))) + '"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.rightLabelContainer = function () {
@@ -1326,7 +1338,7 @@ var ChartRows = /** @class */ (function (_super) {
                 else {
                     this.ganttChartTableBody.appendChild(oldRowElements[oldIndex]);
                 }
-                this.ganttChartTableBody.querySelectorAll('tr')[index].setAttribute('aria-rowindex', index.toString());
+                this.ganttChartTableBody.querySelectorAll('tr')[index].setAttribute('data-rowindex', index.toString());
             }
         }
         else {
@@ -1352,7 +1364,7 @@ var ChartRows = /** @class */ (function (_super) {
                 }
                 // To maintain selection when virtualization is enabled
                 if (this.parent.selectionModule && this.parent.allowSelection) {
-                    this.parent.selectionModule.maintainSelectedRecords(parseInt(tRow.getAttribute('aria-rowindex'), 10));
+                    this.parent.selectionModule.maintainSelectedRecords(parseInt(tRow.getAttribute('data-rowindex'), 10));
                 }
             }
             (_a = this.ganttChartTableBody).replaceChildren.apply(_a, dupChartBody.childNodes);
@@ -1549,7 +1561,7 @@ var ChartRows = /** @class */ (function (_super) {
         return tRow;
     };
     /**
-     * To set aria-rowindex for chart rows
+     * To set data-rowindex for chart rows
      *
      * @returns {void} .
      * @private
@@ -1567,11 +1579,12 @@ var ChartRows = /** @class */ (function (_super) {
                     return x;
                 }
             })[0];
-            tRow.setAttribute('aria-rowindex', data['index'].toString());
+            tRow.setAttribute('data-rowindex', data['index'].toString());
         }
         else {
             index = visualData.indexOf(tempTemplateData);
-            tRow.setAttribute('aria-rowindex', index.toString());
+            tRow.setAttribute('aria-rowindex', (index + 1).toString());
+            tRow.setAttribute('data-rowindex', index.toString());
         }
     };
     /**

package/src/gantt/renderer/connector-line.js

@@ -29,7 +29,9 @@ var ConnectorLine = /** @class */ (function () {
             id: this.parent.element.id + '_svg'
         });
         this.svgObject.setAttribute('height', '100%');
-        this.svgObject.setAttribute('width', '100%');
+        if (!this.parent.enableTimelineVirtualization) {
+            this.svgObject.setAttribute('width', '100%');
+        }
     }
     /**
      * To get connector line gap.
@@ -169,6 +171,7 @@ var ConnectorLine = /** @class */ (function () {
             for (var j = 0; j < innerChild.length; j++) {
                 var ariaString = 'Connector Line ' + this.parent.connectorLineModule.generateAriaLabel(ariaConnector[i]);
                 innerChild[j].setAttribute('aria-label', ariaString);
+                innerChild[j].setAttribute('role', 'img');
             }
         }
         this.parent.ganttChartModule.chartBodyContent.insertBefore(this.dependencyViewContainer, this.parent.ganttChartModule.chartBodyContent.lastChild);
@@ -538,7 +541,7 @@ var ConnectorLine = /** @class */ (function () {
         }
         if (this.getParentPosition(data)) {
             // Create the group element
-            this.transform = this.parent.enableRtl ? "translate(" + this.parent.timelineModule.totalTimelineWidth + ", 0) scale(-1, 1)" : '';
+            this.transform = this.parent.enableRtl ? "translate(" + (this.parent.enableTimelineVirtualization ? this.parent.timelineModule.wholeTimelineWidth : this.parent.timelineModule.totalTimelineWidth) + ", 0) scale(-1, 1)" : '';
             this.connectorId = "ConnectorLine" + data.connectorLineId;
             this.groupObject = this.renderer.createGroup({
                 id: this.connectorId,
@@ -855,10 +858,10 @@ var ConnectorLine = /** @class */ (function () {
      * @private
      */
     ConnectorLine.prototype.getConnectorLineTooltipInnerTd = function (fromTaskName, fromPredecessorText, toTaskName, toPredecessorText) {
-        var innerTd = '<tr  id="fromPredecessor"><td style="padding: 4px;width: 30px;">' + this.parent.localeObj.getConstant('from') + '</td><td> ';
+        var innerTd = '<tr  id="fromPredecessor"><td style="padding: 2px;">' + this.parent.localeObj.getConstant('from') + '</td><td> ';
         innerTd = innerTd + fromTaskName + ' </td><td style="padding: 2px;"> ' + this.parent.localeObj.getConstant(fromPredecessorText) + ' </td> </tr>';
-        innerTd = innerTd + '<tr id="toPredecessor"><td style="padding: 4px;">' + this.parent.localeObj.getConstant('to') + '</td><td> ' + toTaskName;
-        innerTd = innerTd + ' </td><td style="padding: 2px;width: 30px;"> ' + this.parent.localeObj.getConstant(toPredecessorText) + ' </td></tr></tbody><table>';
+        innerTd = innerTd + '<tr id="toPredecessor"><td style="padding: 2px;">' + this.parent.localeObj.getConstant('to') + '</td><td> ' + toTaskName;
+        innerTd = innerTd + ' </td><td style="padding: 2px;"> ' + this.parent.localeObj.getConstant(toPredecessorText) + ' </td></tr></tbody><table>';
         return innerTd;
     };
     /**

package/src/gantt/renderer/edit-tooltip.js

@@ -114,6 +114,9 @@ var EditTooltip = /** @class */ (function () {
             else {
                 this.toolTipObj.content = this.getTooltipText(segmentIndex);
                 this.toolTipObj.refresh(this.taskbarEdit.taskBarEditElement);
+                if (this.parent.enableRtl && this.toolTipObj['tooltipEle']) {
+                    this.toolTipObj['tooltipEle'].style.left = this.parent.editModule.taskbarEditModule['tooltipValue'] + 10 + 'px';
+                }
                 if (this.taskbarEdit.taskBarEditAction === 'LeftResizing') {
                     if (this.parent.enableRtl) {
                         this.toolTipObj.offsetX = 0;

package/src/gantt/renderer/event-marker.js

@@ -46,8 +46,10 @@ var EventMarker = /** @class */ (function () {
         var eventMarkerElement;
         var spanElement;
         var rightArrow;
+        var eventMarkerCollection = [];
         for (var i = 0; i < this.parent.eventMarkers.length; i++) {
-            left = this.parent.dataOperation.getTaskLeft(this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true), false);
+            left = this.parent.dataOperation.getTaskLeft(this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true), false, true);
+            eventMarkerCollection.push({ id: i, left: left, label: this.parent.eventMarkers[i].label, date: this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true) });
             var align = void 0;
             if (this.parent.enableRtl) {
                 align = "right:" + left + "px;";
@@ -92,6 +94,7 @@ var EventMarker = /** @class */ (function () {
             }
             container.appendChild(eventMarkerElement);
         }
+        this.parent.eventMarkerColloction = eventMarkerCollection;
     };
     /**
      * @returns {void} .

package/src/gantt/renderer/nonworking-day.js

@@ -19,6 +19,7 @@ var NonWorkingDay = /** @class */ (function () {
             this.nonworkingContainer = createElement('div', {
                 className: cls.nonworkingContainer
             });
+            this.parent.enableTimelineVirtualization ? this.nonworkingContainer.style.height = "100%" : {};
             this.parent.ganttChartModule.chartBodyContent.insertBefore(this.nonworkingContainer, this.parent.ganttChartModule.chartBodyContent.lastChild);
         }
     };
@@ -35,6 +36,10 @@ var NonWorkingDay = /** @class */ (function () {
                 this.holidayContainer = createElement('div', {
                     className: cls.holidayContainer
                 });
+                if (this.parent.enableTimelineVirtualization) {
+                    this.holidayContainer.style.height = "100%";
+                    this.holidayContainer.style.zIndex = "-1";
+                }
                 this.nonworkingContainer.appendChild(this.holidayContainer);
             }
             this.holidayContainer.innerHTML = this.getHolidaysElement().innerHTML;
@@ -80,7 +85,7 @@ var NonWorkingDay = /** @class */ (function () {
             }
             var width = (this.parent.holidays[i].from && this.parent.holidays[i].to) ?
                 this.parent.dataOperation.getTaskWidth(fromDate, toDate) : this.parent.perDayWidth;
-            var left = this.parent.dataOperation.getTaskLeft(fromDate, false);
+            var left = this.parent.dataOperation.getTaskLeft(fromDate, false, true);
             var align = this.parent.enableRtl ? "right:" + left + "px;" : "left:" + left + "px;";
             var holidayDiv = createElement('div', {
                 className: cls.holidayElement, styles: align + " width:" + width + "px; height:100%;"
@@ -113,6 +118,10 @@ var NonWorkingDay = /** @class */ (function () {
                 this.weekendContainer = createElement('div', {
                     className: cls.weekendContainer
                 });
+                if (this.parent.enableTimelineVirtualization) {
+                    this.weekendContainer.style.height = "100%";
+                    this.weekendContainer.style.zIndex = "-1";
+                }
                 this.nonworkingContainer.appendChild(this.weekendContainer);
             }
             this.weekendContainer.innerHTML = this.getWeekendElements().innerHTML;
@@ -131,13 +140,17 @@ var NonWorkingDay = /** @class */ (function () {
      */
     NonWorkingDay.prototype.getWeekendElements = function () {
         var container = createElement('div');
-        var startDate = new Date(this.parent.timelineModule.timelineStartDate.getTime());
-        var endDate = new Date(this.parent.timelineModule.timelineEndDate.getTime());
+        var leftValueForStartDate = (this.parent.enableTimelineVirtualization && this.parent.ganttChartModule.scrollObject.element.scrollLeft != 0)
+            ? this.parent.ganttChartModule.scrollObject.getTimelineLeft() : null;
+        var startDate = (this.parent.enableTimelineVirtualization && !isNullOrUndefined(leftValueForStartDate))
+            ? new Date((this.parent.timelineModule['dateByLeftValue'](leftValueForStartDate)).getTime()) : new Date(this.parent.timelineModule.timelineStartDate.getTime());
+        var endDate = this.parent.enableTimelineVirtualization ? new Date((this.parent.timelineModule.weekendEndDate).getTime()) :
+            new Date(this.parent.timelineModule.timelineEndDate.getTime());
         var nonWorkingIndex = this.parent.nonWorkingDayIndex;
         var isFirstCell = true;
         do {
             if (nonWorkingIndex.indexOf(startDate.getDay()) !== -1) {
-                var left = this.parent.dataOperation.getTaskLeft(startDate, false);
+                var left = this.parent.dataOperation.getTaskLeft(startDate, false, true);
                 var width = this.parent.perDayWidth;
                 if (isFirstCell) {
                     var start = new Date(startDate.getTime());
@@ -168,7 +181,7 @@ var NonWorkingDay = /** @class */ (function () {
     };
     NonWorkingDay.prototype.updateHolidayLabelHeight = function () {
         var height = this.parent.getContentHeight();
-        var gantttable = document.getElementById("ganttContainer");
+        var gantttable = document.getElementById(this.parent.element.id);
         // eslint-disable-next-line
         var toolbarHeight = 0;
         if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {

package/src/gantt/renderer/timeline.d.ts

@@ -24,6 +24,13 @@ export declare class Timeline {
     isZoomToFit: boolean;
     topTierCollection: TimelineFormat[];
     bottomTierCollection: TimelineFormat[];
+    pdfExportTopTierCollection: TimelineFormat[];
+    pdfExportBottomTierCollection: TimelineFormat[];
+    wholeTimelineWidth: number;
+    restrictRender: boolean;
+    weekendEndDate: Date;
+    private performedTimeSpanAction;
+    isZoomedToFit: boolean;
     constructor(ganttObj?: Gantt);
     /**
      * To initialize the public property.
@@ -139,6 +146,7 @@ export declare class Timeline {
      * @private
      */
     updateTimelineHeaderHeight(): void;
+    private dateByLeftValue;
     /**
      * To create timeline header template.
      *
@@ -146,6 +154,7 @@ export declare class Timeline {
      * @private
      */
     createTimelineSeries(): void;
+    timelineVirtualizationStyles(): void;
     /**
      * To validate timeline tier count.
      *