@syncfusion/ej2-gantt 22.2.11 → 23.1.36

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

@@ -11,6 +11,7 @@ var GanttChart = /** @class */ (function () {
     function GanttChart(parent) {
         this.isExpandCollapseFromChart = false;
         this.isExpandAll = false;
+        this.isCollapseAll = false;
         this.isGanttElement = false;
         this.parent = parent;
         this.chartTimelineContainer = null;
@@ -356,6 +357,42 @@ var GanttChart = /** @class */ (function () {
         if (this.parent.editSettings.allowTaskbarEditing) {
             this.parent.notify('chartMouseUp', e);
         }
+        if (!this.parent.editSettings.allowEditing) {
+            var isTaskbarEdited = false;
+            if (this.parent.editSettings.allowTaskbarEditing &&
+                getValue('editModule.taskbarEditModule.isMouseDragged', this.parent) &&
+                getValue('editModule.taskbarEditModule.taskBarEditAction', this.parent)) {
+                isTaskbarEdited = true;
+            }
+            if (!isTaskbarEdited) {
+                /** Expand/collapse action */
+                var target = e.target;
+                var isOnTaskbarElement = e.target.classList.contains(cls.taskBarMainContainer)
+                    || closest(e.target, '.' + cls.taskBarMainContainer);
+                if (closest(target, '.e-gantt-parent-taskbar') && !this.parent.editSettings.allowEditing) {
+                    this.chartExpandCollapseRequest(e);
+                }
+                else if (!isOnTaskbarElement && this.parent.autoFocusTasks) {
+                    this.scrollToTarget(e); /** Scroll to task */
+                }
+            }
+        }
+        if (e.type === "touchend") {
+            var resizeCheck = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-taskbar-resize-div');
+            if (!isNullOrUndefined(resizeCheck)) {
+                resizeCheck.remove();
+            }
+            var Check = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-clone-taskbar');
+            if (!isNullOrUndefined(Check)) {
+                var clonetbody = Check.parentElement;
+                var cloneTable = clonetbody.parentElement;
+                cloneTable.remove();
+            }
+            var falseline = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-gantt-false-line');
+            if (!isNullOrUndefined(falseline)) {
+                this.parent.editModule.taskbarEditModule.removeFalseLine(true);
+            }
+        }
     };
     /**
      *
@@ -747,13 +784,27 @@ var GanttChart = /** @class */ (function () {
      * @private
      */
     GanttChart.prototype.collapsedGanttRow = function (args) {
+        var _this = this;
         if ((isNullOrUndefined(args['gridRow']) && this.parent.enableVirtualization) || isNullOrUndefined(args['chartRow'])) {
             return;
         }
-        var record = getValue('data', args);
+        var record;
+        if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            record = this.parent.currentViewData.filter(function (item) { return item.ganttProperties[_this.parent.taskFields.id] === args['data'][_this.parent.taskFields.id]; })[0];
+        }
+        else {
+            record = getValue('data', args);
+        }
         if (this.isExpandCollapseFromChart) {
             this.expandCollapseChartRows('collapse', getValue('chartRow', args), record, null);
-            this.parent.treeGrid.collapseRow(getValue('gridRow', args), record);
+            var idField_1 = this.parent.taskFields.id;
+            if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+                var gridRec = this.parent.treeGrid.getCurrentViewRecords().filter(function (item) { return item[idField_1] == args['data'][idField_1]; })[0];
+                this.parent.treeGrid.collapseRow(getValue('gridRow', args), gridRec);
+            }
+            else {
+                this.parent.treeGrid.collapseRow(getValue('gridRow', args), record);
+            }
             this.isExpandCollapseFromChart = false;
         }
         else {
@@ -798,13 +849,27 @@ var GanttChart = /** @class */ (function () {
      * @private
      */
     GanttChart.prototype.expandedGanttRow = function (args) {
+        var _this = this;
         if ((isNullOrUndefined(args['gridRow']) && this.parent.enableVirtualization) || isNullOrUndefined(args['chartRow'])) {
             return;
         }
-        var record = getValue('data', args);
+        var record;
+        if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            record = this.parent.currentViewData.filter(function (item) { return item.ganttProperties.taskId == args['data'][_this.parent.taskFields.id]; })[0];
+        }
+        else {
+            record = getValue('data', args);
+        }
         if (this.isExpandCollapseFromChart) {
             this.expandCollapseChartRows('expand', getValue('chartRow', args), record, null);
-            this.parent.treeGrid.expandRow(getValue('gridRow', args), record);
+            var idField_2 = this.parent.taskFields.id;
+            if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+                var gridRec = this.parent.treeGrid.getCurrentViewRecords().filter(function (item) { return item[idField_2] == args['data'][idField_2]; })[0];
+                this.parent.treeGrid.expandRow(getValue('gridRow', args), gridRec);
+            }
+            else {
+                this.parent.treeGrid.expandRow(getValue('gridRow', args), record);
+            }
             this.isExpandCollapseFromChart = false;
         }
         else {
@@ -903,9 +968,11 @@ var GanttChart = /** @class */ (function () {
             this.parent.treeGrid.expandAll();
         }
         else {
+            this.isCollapseAll = true;
             this.parent.treeGrid.collapseAll();
         }
         this.isExpandAll = false;
+        this.isCollapseAll = false;
     };
     /**
      * Public method to expand particular level of rows.
@@ -1388,7 +1455,7 @@ var GanttChart = /** @class */ (function () {
                     childElement = element;
                 }
             }
-            if (element.classList.contains('e-right-label-temp-container') || element.classList.contains('e-left-label-temp-container') || element.classList.contains('e-indicator-span')) {
+            if (element.classList.contains('e-right-label-temp-container') || element.classList.contains('e-left-label-temp-container') || element.classList.contains('e-indicator-span') || element.classList.contains("e-timeline-header-container")) {
                 if (focus === 'add') {
                     element.setAttribute('tabIndex', '0');
                     addClass([element], 'e-active-container');
@@ -1452,7 +1519,13 @@ var GanttChart = /** @class */ (function () {
                 recordIndex = this.parent.flatData.indexOf(record);
             }
             else {
-                recordIndex = this.parent.currentViewData.indexOf(record);
+                if (this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings &&
+                    this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth && this.parent.pdfExportModule.isPdfExport) {
+                    recordIndex = this.parent.ids.indexOf(record.ganttProperties.taskId.toString());
+                }
+                else {
+                    recordIndex = this.parent.currentViewData.indexOf(record);
+                }
             }
         }
         return recordIndex;

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

@@ -57,6 +57,13 @@ export interface GanttModel extends ComponentModel{
      */
     enableVirtualMaskRow?: boolean;
 
+    /**
+     * Gets or sets whether to load child record on demand in remote data binding. Initially parent records are rendered in collapsed state.  
+     *
+     * @default false
+     */
+    loadChildOnDemand?: boolean;
+
     /**
      * Specifies whether to update offset value on a task for all the predecessor edit actions.
      *

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

@@ -350,6 +350,12 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * @default true
      */
     enableVirtualMaskRow: boolean;
+    /**
+     * Gets or sets whether to load child record on demand in remote data binding. Initially parent records are rendered in collapsed state.
+     *
+     * @default false
+     */
+    loadChildOnDemand: boolean;
     /**
      * Specifies whether to update offset value on a task for all the predecessor edit actions.
      *

package/src/gantt/base/gantt.js

@@ -344,6 +344,7 @@ var Gantt = /** @class */ (function (_super) {
         createSpinner({ target: this.element }, this.createElement);
         this.trigger('load', {});
         this.element.classList.add(cls.root);
+        this.rowHeight = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? (this.rowHeight === 36) ? 46 : this.rowHeight : this.rowHeight;
         if (this.isAdaptive) {
             this.element.classList.add(cls.adaptive);
         }
@@ -779,7 +780,9 @@ var Gantt = /** @class */ (function (_super) {
             this.wireEvents();
             this.notify('initPredessorDialog', {});
         }
-        this.splitterModule.updateSplitterPosition();
+        if (!this.isFromOnPropertyChange) {
+            this.splitterModule.updateSplitterPosition();
+        }
         // if (this.gridLines === 'Vertical' || this.gridLines === 'Both') {
         //     this.renderChartVerticalLines();
         // }
@@ -791,6 +794,8 @@ var Gantt = /** @class */ (function (_super) {
         removeClass(ganttChartElement.querySelectorAll('.e-critical-milestone'), cls.criticalMilestone);
         removeClass(this.element.querySelectorAll('.e-connector-line'), cls.criticalConnectorLineSVG);
         removeClass(this.element.querySelectorAll('.e-connector-line-arrow'), cls.criticalConnectorArrowSVG);
+        var innerDivs = document.querySelector('.e-gantt-child-taskbar-inner-div');
+        innerDivs.style.outlineColor = "";
     };
     Gantt.prototype.wireEvents = function () {
         if (this.allowKeyboard) {
@@ -882,7 +887,39 @@ var Gantt = /** @class */ (function (_super) {
         this.treeGridModule.renderTreeGrid();
     };
     Gantt.prototype.updateCurrentViewData = function () {
+        var _this = this;
         this.currentViewData = this.treeGrid.getCurrentViewRecords().slice();
+        if (!this.loadChildOnDemand && this.taskFields.hasChildMapping && this.currentViewData.length > 0) {
+            this.autoCalculateDateScheduling = false;
+            this.flatData = [];
+            this.dataOperation.taskIds = [];
+            this.ids = [];
+            this.dataOperation.recordIndex = 0;
+            this.dataOperation.dataArray = this.currentViewData;
+            this.dataOperation.cloneDataSource();
+            if (this.predecessorModule && this.taskFields.dependency) {
+                this.predecessorModule['parentIds'] = [];
+                this.predecessorModule['parentRecord'] = [];
+                this.predecessorModule.updatePredecessors();
+            }
+            var gridData = this.treeGrid.grid.contentModule['rows'];
+            var data = gridData.filter(function (x) {
+                if (x['data'][_this.taskFields.id] === _this.flatData[0].ganttProperties.taskId) {
+                    return x;
+                }
+            })[0];
+            var index = data['index'];
+            for (var i = 0; i < this.flatData.length; i++) {
+                this.flatData[i].index = index;
+                index++;
+            }
+            this.currentViewData = this.flatData;
+            this.treeGrid.grid.currentViewData = this.flatData;
+            if (!isNullOrUndefined(this.treeGrid['virtualScrollModule'])) {
+                this.treeGrid['virtualScrollModule'].visualData = this.flatData;
+                this.updatedRecords = this.flatData;
+            }
+        }
     };
     /**
      * @param {IGanttData} records -Defines the delete record collections.
@@ -902,7 +939,7 @@ var Gantt = /** @class */ (function (_super) {
      * @private
      */
     Gantt.prototype.updateContentHeight = function (args) {
-        if (!this.allowTaskbarOverlap && this.viewType === 'ResourceView' && !this.isLoad) {
+        if ((!this.allowTaskbarOverlap && !this.ganttChartModule.isCollapseAll && !this.ganttChartModule.isExpandAll) && this.viewType === 'ResourceView' && !this.isLoad) {
             return;
         }
         else {
@@ -1268,6 +1305,9 @@ var Gantt = /** @class */ (function (_super) {
         else {
             this.getCurrentRecords(args);
         }
+        if (!this.loadChildOnDemand && this.taskFields.hasChildMapping) {
+            this.updateContentHeight();
+        }
         if (this.enableCriticalPath && this.criticalPathModule) {
             this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
         }
@@ -1283,6 +1323,9 @@ var Gantt = /** @class */ (function (_super) {
         }
         this.initialChartRowElements = this.ganttChartModule.getChartRows();
         this.isLoad = false;
+        if (!this.loadChildOnDemand && this.taskFields.hasChildMapping) {
+            this.autoCalculateDateScheduling = true;
+        }
         this.trigger('dataBound', args);
     };
     /**
@@ -1503,6 +1546,7 @@ var Gantt = /** @class */ (function (_super) {
                     break;
                 case 'projectStartDate':
                 case 'projectEndDate':
+                    this.timelineModule.isZoomToFit = false;
                     this.dataOperation.calculateProjectDates();
                     this.updateProjectDates(this.cloneProjectStartDate, this.cloneProjectEndDate, this.isTimelineRoundOff);
                     break;
@@ -1546,7 +1590,14 @@ var Gantt = /** @class */ (function (_super) {
                     if (prop === 'locale') {
                         this.isLocaleChanged = true;
                     }
-                    isRefresh = true;
+                    if (prop === 'taskFields') {
+                        if (!isNullOrUndefined(newProp.taskFields.child)) {
+                            return;
+                        }
+                    }
+                    if (prop !== 'allowTaskbarDragAndDrop') {
+                        isRefresh = true;
+                    }
                     break;
                 case 'validateManualTasksOnLinking':
                     this.validateManualTasksOnLinking = newProp.validateManualTasksOnLinking;
@@ -2226,6 +2277,9 @@ var Gantt = /** @class */ (function (_super) {
      * @returns {Promise<any>} .
      */
     Gantt.prototype.pdfExport = function (pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {
+        if (pdfExportProperties && pdfExportProperties.fitToWidthSettings && pdfExportProperties.fitToWidthSettings.isFitToWidth) {
+            pdfExportProperties.pageOrientation == 'Landscape';
+        }
         return this.pdfExportModule ? this.pdfExportModule.export(pdfExportProperties, isMultipleExport, pdfDoc, isBlob)
             : null;
     };
@@ -2314,14 +2368,17 @@ var Gantt = /** @class */ (function (_super) {
         this.isTimelineRoundOff = isTimelineRoundOff;
         this.timelineModule.refreshTimelineByTimeSpan();
         this.dataOperation.reUpdateGanttDataPosition();
-        this.timelineModule.updateChartByNewTimeline();
-        this.ganttChartModule.chartBodyContent.style.width = formatUnit(this.timelineModule.totalTimelineWidth);
-        this.ganttChartModule.updateLastRowBottomWidth();
-        if (this.taskFields.dependency) {
-            this.ganttChartModule.reRenderConnectorLines();
-        }
-        if (isFrom !== 'beforeAdd') {
-            this.notify('selectRowByIndex', {});
+        if (!this.pdfExportModule || (this.pdfExportModule && !this.pdfExportModule.isPdfExport) || (this.pdfExportModule && this.pdfExportModule.isPdfExport && this.pdfExportModule.helper.exportProps &&
+            this.pdfExportModule.helper.exportProps.fitToWidthSettings && !this.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
+            this.timelineModule.updateChartByNewTimeline();
+            this.ganttChartModule.chartBodyContent.style.width = formatUnit(this.timelineModule.totalTimelineWidth);
+            this.ganttChartModule.updateLastRowBottomWidth();
+            if (this.taskFields.dependency) {
+                this.ganttChartModule.reRenderConnectorLines();
+            }
+            if (isFrom !== 'beforeAdd') {
+                this.notify('selectRowByIndex', {});
+            }
         }
     };
     /**
@@ -2627,8 +2684,11 @@ var Gantt = /** @class */ (function (_super) {
             }
             else {
                 this.editModule.addRecord(data, rowPosition, rowIndex);
+                if (rowPosition === 'Bottom') {
+                    this.selectedRowIndex = rowIndex;
+                }
                 if (rowPosition === 'Above' || rowPosition === 'Below' || rowPosition === 'Child') {
-                    this.currentSelection = data;
+                    this.currentSelection = !isNullOrUndefined(data) ? data : this.currentSelection;
                 }
             }
         }
@@ -2896,8 +2956,15 @@ var Gantt = /** @class */ (function (_super) {
      * @returns {HTMLElement} .
      */
     Gantt.prototype.getRowByID = function (id) {
+        var _this = this;
         var record = this.getRecordByID(id.toString());
-        var index = this.updatedRecords.indexOf(record);
+        var index;
+        if (!this.loadChildOnDemand && this.taskFields.hasChildMapping) {
+            index = this.updatedRecords.map(function (item) { return item[_this.taskFields.id]; }).indexOf(record.ganttProperties.taskId);
+        }
+        else {
+            index = this.updatedRecords.indexOf(record);
+        }
         if (index !== -1) {
             return this.getRowByIndex(index);
         }
@@ -3358,6 +3425,9 @@ var Gantt = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Gantt.prototype, "enableVirtualMaskRow", void 0);
+    __decorate([
+        Property(false)
+    ], Gantt.prototype, "loadChildOnDemand", void 0);
     __decorate([
         Property(true)
     ], Gantt.prototype, "UpdateOffsetOnTaskbarEdit", void 0);

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

@@ -802,6 +802,8 @@ export interface PdfExportProperties {
     exportType?: ExportType;
     /** Indicates whether to show the predecessors in exported Pdf */
     showPredecessorLines?: boolean;
+    /** Defines the export options in rendering each row fit to the PDF page width */
+    fitToWidthSettings?: FitToWidthSettings;
 }
 export interface PdfQueryCellInfoEventArgs {
     /** Defines the column of the current cell. */
@@ -886,6 +888,18 @@ export interface ITaskbarStyle {
     criticalProgressColor?: PdfColor;
     /** Defines the child taskbar border color */
     criticalTaskBorderColor?: PdfColor;
+    /** Defines the baseline  color */
+    baselineColor?: PdfColor;
+    /** Defines the baseline border color */
+    baselineBorderColor?: PdfColor;
+}
+export interface FitToWidthSettings {
+    /** Specifies whether to export gantt data where each row is adjusted and rendered to fit the PDF document page size. */
+    isFitToWidth?: boolean;
+    /** Specifies the grid width in percentage while exporting. */
+    gridWidth?: string;
+    /** Specifies the chart width in percentage while exporting. */
+    chartWidth?: string;
 }
 export interface IGanttStyle {
     /** Defines the columnHeader style. */

package/src/gantt/base/task-processor.d.ts

@@ -5,9 +5,9 @@ import { DateProcessor } from './date-processor';
  * To calculate and update task related values
  */
 export declare class TaskProcessor extends DateProcessor {
-    private recordIndex;
-    private dataArray;
-    private taskIds;
+    recordIndex: number;
+    dataArray: Object[];
+    taskIds: Object[];
     private segmentCollection;
     private hierarchyData;
     constructor(parent: Gantt);
@@ -21,7 +21,7 @@ export declare class TaskProcessor extends DateProcessor {
     private processTimeline;
     private initDataSource;
     private constructDataSource;
-    private cloneDataSource;
+    cloneDataSource(): void;
     /**
      * @param {object[]} resources .
      * @param {object[]} data .