@syncfusion/ej2-gantt 21.2.10 → 22.1.34

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

@@ -56,12 +56,12 @@ var PdfGantt = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    PdfGantt.prototype.drawChart = function (result, pdfExportProperties) {
+    PdfGantt.prototype.drawChart = function (result) {
         this.result = result;
         this.totalPages = this.result.page.section.count;
         this.perColumnPages = this.totalPages / this.layouter.columnRanges.length;
         this.calculateRange();
-        this.drawGantttChart(pdfExportProperties);
+        this.drawGantttChart();
         this.drawPageBorder();
     };
     //Calcualte the header range for each pdf page based on schedule start and end date.
@@ -210,7 +210,7 @@ var PdfGantt = /** @class */ (function (_super) {
         }
     };
     //Draw the gantt chart side
-    PdfGantt.prototype.drawGantttChart = function (pdfExportProperties) {
+    PdfGantt.prototype.drawGantttChart = function () {
         var _this = this;
         var taskbarPoint = this.startPoint;
         var pagePoint = new PointF();
@@ -286,7 +286,7 @@ var PdfGantt = /** @class */ (function (_super) {
         // Draw predecessor line.
         for (var i = 0; i < this.predecessorCollection.length; i++) {
             var predecessor = this.predecessorCollection[i];
-            predecessor.drawPredecessor(this, pdfExportProperties);
+            predecessor.drawPredecessor(this);
         }
     };
     return PdfGantt;

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

@@ -122,8 +122,9 @@ export declare class Column {
      * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate: string;
+    headerTemplate: string | Function;
     /**
      * Defines the header text of column which is used to display in column header.
      * If `headerText` is not defined, then field name value will be assigned to header text.
@@ -163,8 +164,9 @@ export declare class Column {
      * It accepts either template string or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Defines the alignment of the column in both header and content cells.
      *
@@ -323,8 +325,9 @@ export interface ColumnModel {
      * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
     /**
      * Defines the header text of column which is used to display in column header.
      * If `headerText` is not defined, then field name value will be assigned to header text.
@@ -364,8 +367,9 @@ export interface ColumnModel {
      * It accepts either template string or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
     /**
      * Defines the alignment of the column in both header and content cells.
      *

package/src/gantt/models/edit-settings-model.d.ts

@@ -33,6 +33,7 @@ export interface EditSettingsModel {
      *
      * @default Auto
      * @isEnumeration true
+     * @asptype EditMode
      */
     mode?: EditMode;
 

package/src/gantt/models/edit-settings.d.ts

@@ -29,6 +29,7 @@ export declare class EditSettings extends ChildProperty<EditSettings> {
      *
      * @default Auto
      * @isEnumeration true
+     * @asptype EditMode
      */
     mode: EditMode;
     /**

package/src/gantt/models/filter-settings-model.d.ts

@@ -18,6 +18,8 @@ export interface FilterSettingsModel {
      * * `Menu` - Enables menu filters in Grid.
      *
      * @default Menu
+     * @isenumeration true
+     * @asptype FilterType
      */
     type?: FilterType;
 
@@ -45,6 +47,7 @@ export interface FilterSettingsModel {
      *
      * @default Parent
      * @isEnumeration true
+     * @asptype FilterHierarchyMode
      */
     hierarchyMode?: FilterHierarchyMode;
 

package/src/gantt/models/filter-settings.d.ts

@@ -17,6 +17,8 @@ export declare class FilterSettings extends ChildProperty<FilterSettings> {
      * * `Menu` - Enables menu filters in Grid.
      *
      * @default Menu
+     * @isenumeration true
+     * @asptype FilterType
      */
     type: FilterType;
     /**
@@ -41,6 +43,7 @@ export declare class FilterSettings extends ChildProperty<FilterSettings> {
      *
      * @default Parent
      * @isEnumeration true
+     * @asptype FilterHierarchyMode
      */
     hierarchyMode: FilterHierarchyMode;
 }

package/src/gantt/models/search-settings-model.d.ts

@@ -67,6 +67,7 @@ export interface SearchSettingsModel {
      *
      * @default Parent
      * @isEnumeration true
+     * @asptype SearchHierarchyMode
      */
     hierarchyMode?: SearchHierarchyMode;
 

package/src/gantt/models/search-settings.d.ts

@@ -62,6 +62,7 @@ export declare class SearchSettings extends ChildProperty<SearchSettings> {
      *
      * @default Parent
      * @isEnumeration true
+     * @asptype SearchHierarchyMode
      */
     hierarchyMode: SearchHierarchyMode;
 }

package/src/gantt/models/sort-settings-model.d.ts

@@ -17,6 +17,7 @@ export interface SortDescriptorModel {
      *
      * @default null
      * @isEnumeration true
+     * @asptype SortDirection
      *
      */
     direction?: SortDirection;

package/src/gantt/models/sort-settings.d.ts

@@ -16,6 +16,7 @@ export declare class SortDescriptor extends ChildProperty<SortDescriptor> {
      *
      * @default null
      * @isEnumeration true
+     * @asptype SortDirection
      *
      */
     direction: SortDirection;

package/src/gantt/models/tooltip-settings-model.d.ts

@@ -16,28 +16,32 @@ export interface TooltipSettingsModel {
      * Defines tooltip template for taskbar elements.
      *
      * @default null
+     * @aspType string
      */
-    taskbar?: string;
+    taskbar?: string | Function;
 
     /**
      * Defines template for baseline tooltip element.
      *
      * @default null
+     * @aspType string
      */
-    baseline?: string;
+    baseline?: string | Function;
 
     /**
      * Defines template for dependency line tooltip.
      *
      * @default null
+     * @aspType string
      */
-    connectorLine?: string;
+    connectorLine?: string | Function;
 
     /**
      * Defines tooltip template for taskbar editing action.
      *
      * @default null
+     * @aspType string
      */
-    editing?: string;
+    editing?: string | Function;
 
 }

package/src/gantt/models/tooltip-settings.d.ts

@@ -13,24 +13,28 @@ export declare class TooltipSettings extends ChildProperty<TooltipSettings> {
      * Defines tooltip template for taskbar elements.
      *
      * @default null
+     * @aspType string
      */
-    taskbar: string;
+    taskbar: string | Function;
     /**
      * Defines template for baseline tooltip element.
      *
      * @default null
+     * @aspType string
      */
-    baseline: string;
+    baseline: string | Function;
     /**
      * Defines template for dependency line tooltip.
      *
      * @default null
+     * @aspType string
      */
-    connectorLine: string;
+    connectorLine: string | Function;
     /**
      * Defines tooltip template for taskbar editing action.
      *
      * @default null
+     * @aspType string
      */
-    editing: string;
+    editing: string | Function;
 }

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

@@ -267,7 +267,7 @@ export declare class ChartRows extends DateProcessor {
      * @returns {Function} .
      * @private
      */
-    templateCompiler(template: string): Function;
+    templateCompiler(template: string | Function): Function;
     updateOverlapped(): void;
     updateDragDropRecords(data: IGanttData, tr?: Node): void;
     /**

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

@@ -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: 'z-index: 2;position: absolute;width:' + this.parent.timelineModule.totalTimelineWidth + 'px;',
+            styles: 'position: absolute;width:' + this.parent.timelineModule.totalTimelineWidth + 'px;',
             attrs: { cellspacing: '0.25px' }
         });
         var colgroup = createElement('colgroup');
@@ -159,7 +159,7 @@ var ChartRows = /** @class */ (function (_super) {
                 taskbarInnerDiv = this.createDivElement('<div class="' + cls.childTaskBarInnerDiv + ' ' + cls.traceChildTaskBar +
                     ' ' + (data.ganttProperties.isAutoSchedule ? '' : cls.manualChildTaskBar) + '"' +
                     'style="width:' + data.ganttProperties.width + 'px;height:' +
-                    (this.taskBarHeight) + 'px;"></div>');
+                    (this.taskBarHeight) + 'px; margin-top :-1px"></div>');
                 progressDiv = this.createDivElement('<div class="' + cls.childProgressBarInnerDiv + ' ' +
                     cls.traceChildProgressBar + ' ' + (data.ganttProperties.isAutoSchedule ?
                     '' : cls.manualChildProgressBar) + '"' +
@@ -638,15 +638,8 @@ var ChartRows = /** @class */ (function (_super) {
             milestoneNode = this.milestoneTemplateFunction(extend({ index: i }, data), this.parent, 'MilestoneTemplate', this.getTemplateID('MilestoneTemplate'), false, undefined, rootElement[0], this.parent.treeGrid['root']);
         }
         else {
-            var template = '<div class="' + cls.traceMilestone + '" style="position:absolute;">' +
-                '<div class="' + cls.milestoneTop + ' ' + ((!data.ganttProperties.startDate && !data.ganttProperties.endDate) ?
-                cls.unscheduledMilestoneTop : '') + '" style="border-right-width:' +
-                this.milesStoneRadius + 'px;border-left-width:' + this.milesStoneRadius + 'px;border-bottom-width:' +
-                this.milesStoneRadius + 'px;"></div>' +
-                '<div class="' + cls.milestoneBottom + ' ' + ((!data.ganttProperties.startDate && !data.ganttProperties.endDate) ?
-                cls.unscheduledMilestoneBottom : '') + '" style="top:' +
-                (this.milesStoneRadius) + 'px;border-right-width:' + this.milesStoneRadius + 'px; border-left-width:' +
-                this.milesStoneRadius + 'px; border-top-width:' + this.milesStoneRadius + 'px;"></div></div>';
+            var template = '<div class="' + cls.traceMilestone + '" 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>';
             milestoneNode = this.createDivElement(template);
         }
         return milestoneNode;
@@ -674,25 +667,9 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getMilestoneBaselineNode = function () {
         var data = this.templateData;
         var baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
-        var template = '<div class="' + cls.baselineMilestoneContainer + ' ' + '" style="' +
-            (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.baselineLeft - this.milesStoneRadius) + 'px;' +
-            'margin-top:' + (-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) +
-            'px">' + '<div class="' + cls.baselineMilestoneDiv + '">' + '<div class="' + cls.baselineMilestoneDiv +
-            ' ' + cls.baselineMilestoneTop + '"  ' +
-            'style="top:' + (-this.milestoneHeight) + 'px;border-right:' + this.milesStoneRadius +
-            'px solid transparent;border-left:' + this.milesStoneRadius +
-            'px solid transparent;border-top:0px' +
-            'solid transparent;border-bottom-width:' + this.milesStoneRadius + 'px;' +
-            'border-bottom-style: solid;' + (this.baselineColor ? 'border-bottom-color: ' + this.baselineColor + ';' : '') +
-            '"></div>' +
-            '<div class="' + cls.baselineMilestoneDiv + ' ' + cls.baselineMilestoneBottom + '"  ' +
-            'style="top:' + (this.milesStoneRadius - this.milestoneHeight) + 'px;border-right:' + this.milesStoneRadius +
-            'px solid transparent;border-left:' + this.milesStoneRadius +
-            'px solid transparent;border-bottom:0px' +
-            'solid transparent;border-top-width:' + this.milesStoneRadius + 'px;' +
-            'border-top-style: solid;' +
-            (this.baselineColor ? 'border-top-color: ' + this.baselineColor + ';' : '') + '"></div>' +
-            '</div></div>';
+        var template = '<div class="' + cls.baselineMilestoneContainer + '" style="width:' + ((this.parent.renderBaseline ? this.taskBarHeight - 5 : this.taskBarHeight - 10) + 2) + 'px;height:' +
+            ((this.parent.renderBaseline ? this.taskBarHeight - 5 : this.taskBarHeight - 10) + 2) + 'px;position:absolute;transform:rotate(45deg);' + (this.parent.enableRtl ? 'right:' : 'left:') + (this.parent.enableRtl ? (data.ganttProperties.left -
+            (this.milestoneHeight / 2) + 3) : (data.ganttProperties.left - (this.milestoneHeight / 2) + 2)) + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + 'margin-top:' + ((-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) + 3) + 'px"> </div>';
         return this.createDivElement(template);
     };
     /**
@@ -818,16 +795,8 @@ var ChartRows = /** @class */ (function (_super) {
             (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.width - Math.floor(((taskbarHeight / 5) + 8) / 5)) + 'px;height:' +
             ((taskbarHeight / 5) + 8) + 'px;border-right-width:' + taskbarHeight / 5 + 'px;border-bottom:' +
             taskbarHeight / 5 + 'px solid transparent;>' + '</div></div>' : '');
-        var milestoneTemplate = '<div class="' + cls.manualParentMilestone + '" style="position:absolute;' +
-            (this.parent.enableRtl ? 'right:' : 'left:') +
-            (data.ganttProperties.left - data.ganttProperties.autoLeft - (this.milestoneHeight / 2)) +
-            'px;width:' + (this.milesStoneRadius * 2) +
-            'px;">' + '<div class="' + cls.manualParentMilestoneTop + '" style="border-right-width:' +
-            this.milesStoneRadius + 'px;border-left-width:' + this.milesStoneRadius + 'px;border-bottom-width:' +
-            this.milesStoneRadius + 'px;"></div>' +
-            '<div class="' + cls.manualParentMilestoneBottom + '" style="top:' +
-            (this.milesStoneRadius) + 'px;border-right-width:' + this.milesStoneRadius + 'px; border-left-width:' +
-            this.milesStoneRadius + 'px; border-top-width:' + this.milesStoneRadius + 'px;"></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);
     };
     /**
@@ -852,8 +821,8 @@ var ChartRows = /** @class */ (function (_super) {
                 this.getExpandClass(data) + ' ' + cls.traceParentTaskBar + '"' +
                 ' style="width:' + (data.ganttProperties.isAutoSchedule ? data.ganttProperties.width :
                 data.ganttProperties.autoWidth) + 'px;height:' + (data.ganttProperties.isAutoSchedule ? this.taskBarHeight :
-                (tHeight * 3)) + 'px;margin-top:' + (data.ganttProperties.isAutoSchedule ? '' :
-                (tHeight * 2)) + 'px;">' +
+                (tHeight * 3)) + 'px;margin-top:' + (data.ganttProperties.isAutoSchedule ? -1 :
+                (tHeight * 2)) + 'px; ">' +
                 '</div>');
             var progressBarInnerDiv = this.createDivElement('<div class="' + cls.parentProgressBarInnerDiv + ' ' +
                 this.getExpandClass(data) + ' ' + cls.traceParentProgressBar + '"' +
@@ -918,13 +887,8 @@ var ChartRows = /** @class */ (function (_super) {
                     parentLabel && !parentLabel['elementRef'] && div.innerHTML !== '')
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].textContent = parentLabel;
             }
-            var milestoneTemplate = '<div class="' + cls.parentMilestone + '" style="position:absolute;">' +
-                '<div class="' + cls.parentMilestoneTop + '" style="border-right-width:' +
-                this.milesStoneRadius + 'px;border-left-width:' + this.milesStoneRadius + 'px;border-bottom-width:' +
-                this.milesStoneRadius + 'px;"></div>' +
-                '<div class="' + cls.parentMilestoneBottom + '" style="top:' +
-                (this.milesStoneRadius) + 'px;border-right-width:' + this.milesStoneRadius + 'px; border-left-width:' +
-                this.milesStoneRadius + 'px; border-top-width:' + this.milesStoneRadius + 'px;"></div></div>';
+            var milestoneTemplate = '<div class="' + cls.parentMilestone + '" 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>';
             template[0].appendChild([].slice.call(progressBarInnerDiv)[0]);
             parentTaskbarNode = data.ganttProperties.isMilestone ?
                 this.createDivElement(data.ganttProperties.isAutoSchedule ? milestoneTemplate : '') : template;
@@ -1301,8 +1265,8 @@ var ChartRows = /** @class */ (function (_super) {
         this.milestoneMarginTop = Math.floor((this.parent.rowHeight - this.milestoneHeight) / 2);
         this.milesStoneRadius = Math.floor((this.milestoneHeight) / 2);
         this.baselineTop = -(Math.floor((this.parent.rowHeight - (this.taskBarHeight + this.taskBarMarginTop))) - 4);
-        this.connectorPointWidth = this.parent.isAdaptive ? Math.round(this.taskBarHeight / 2) : 8;
-        this.connectorPointMargin = Math.floor((this.taskBarHeight / 2) - (this.connectorPointWidth / 2));
+        this.connectorPointWidth = this.parent.isAdaptive ? Math.round(this.taskBarHeight / 2) : 10;
+        this.connectorPointMargin = Math.floor((this.taskBarHeight / 2) - (this.connectorPointWidth / 2)) - 1;
     };
     /**
      * Function used to refresh Gantt rows.
@@ -1371,7 +1335,6 @@ var ChartRows = /** @class */ (function (_super) {
                 var tempTemplateData = this.parent.currentViewData[i];
                 if (this.parent.viewType === 'ResourceView') {
                     if (this.parent.editModule && this.parent.editModule.isResourceTaskDeleted || this.parent.isFromOnPropertyChange) {
-                        this.parent.initialChartRowElements = this.parent.ganttChartModule.getChartRows();
                         this.parent.editModule.isResourceTaskDeleted = false;
                     }
                     if (!tempTemplateData.expanded && this.parent.enableMultiTaskbar) {
@@ -1390,11 +1353,12 @@ var ChartRows = /** @class */ (function (_super) {
                 }
             }
             (_a = this.ganttChartTableBody).replaceChildren.apply(_a, dupChartBody.childNodes);
+            this.parent.initialChartRowElements = this.parent.ganttChartModule.getChartRows();
         }
         this.parent.renderTemplates();
         this.triggerQueryTaskbarInfo();
         this.parent.modifiedRecords = [];
-        if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation) {
+        if (this.parent.viewType == 'ResourceView' && this.parent.showOverAllocation) {
             this.updateOverlapped();
         }
         if (collapsedResourceRecord.length) {
@@ -1467,7 +1431,7 @@ var ChartRows = /** @class */ (function (_super) {
         else if (this.templateData.ganttProperties.isMilestone) {
             var milestoneTemplateNode = this.getMilestoneNode(i, taskbarContainerNode);
             if (milestoneTemplateNode && milestoneTemplateNode.length > 0) {
-                taskbarContainerNode[0].appendChild([].slice.call(milestoneTemplateNode)[0]);
+                append(milestoneTemplateNode, taskbarContainerNode[0]);
             }
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
@@ -1644,9 +1608,9 @@ var ChartRows = /** @class */ (function (_super) {
         var classCollections = this.getClassName(args);
         if (args.taskbarType === 'Milestone') {
             args.milestoneColor = taskbarElement.querySelector(classCollections[0]) ?
-                getComputedStyle(taskbarElement.querySelector(classCollections[0])).borderBottomColor : null;
+                getComputedStyle(taskbarElement.querySelector(classCollections[0])).backgroundColor : null;
             args.baselineColor = trElement.querySelector(classCollections[1]) ?
-                getComputedStyle(trElement.querySelector(classCollections[1])).borderBottomColor :
+                getComputedStyle(trElement.querySelector(classCollections[1])).backgroundColor :
                 (trElement.querySelector('.' + cls.baselineBar) ? getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).backgroundColor : null);
         }
         else if (taskbarElement) {
@@ -1714,14 +1678,12 @@ var ChartRows = /** @class */ (function (_super) {
         }
         if (args.taskbarType === 'Milestone') {
             if (taskbarElement.querySelector(classCollections[0]) &&
-                getComputedStyle(taskbarElement.querySelector(classCollections[0])).borderBottomColor !== args.milestoneColor) {
-                taskbarElement.querySelector(classCollections[0]).style.borderBottomColor = args.milestoneColor;
-                taskbarElement.querySelector('.' + cls.milestoneBottom).style.borderTopColor = args.milestoneColor;
+                getComputedStyle(taskbarElement.querySelector(classCollections[0])).backgroundColor !== args.milestoneColor) {
+                taskbarElement.querySelector(classCollections[0]).style.backgroundColor = args.milestoneColor;
             }
             if (trElement.querySelector(classCollections[1]) &&
-                getComputedStyle(trElement.querySelector(classCollections[1])).borderTopColor !== args.baselineColor) {
-                trElement.querySelector(classCollections[1]).style.borderBottomColor = args.baselineColor;
-                trElement.querySelector('.' + cls.baselineMilestoneBottom).style.borderTopColor = args.baselineColor;
+                getComputedStyle(trElement.querySelector(classCollections[1])).backgroundColor !== args.baselineColor) {
+                trElement.querySelector(classCollections[1]).style.backgroundColor = args.baselineColor;
             }
             if (trElement.querySelector('.' + cls.baselineBar) &&
                 getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).borderTopColor !== args.baselineColor) {
@@ -1802,9 +1764,9 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getClassName = function (args) {
         var classCollection = [];
         classCollection.push('.' + (args.taskbarType === 'ParentTask' ?
-            cls.traceParentTaskBar : args.taskbarType === 'ChildTask' ? cls.traceChildTaskBar : cls.milestoneTop));
+            cls.traceParentTaskBar : args.taskbarType === 'ChildTask' ? cls.traceChildTaskBar : cls.traceMilestone));
         classCollection.push('.' + (args.taskbarType === 'ParentTask' ?
-            cls.traceParentProgressBar : args.taskbarType === 'ChildTask' ? cls.traceChildProgressBar : cls.baselineMilestoneTop));
+            cls.traceParentProgressBar : args.taskbarType === 'ChildTask' ? cls.traceChildProgressBar : cls.baselineMilestoneContainer));
         return classCollection;
     };
     /**
@@ -1817,7 +1779,7 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.templateCompiler = function (template) {
         if (!isNullOrUndefined(template) && template !== '') {
             try {
-                if (document.querySelectorAll(template).length) {
+                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim(), this.parent);
                 }
                 else {

package/src/gantt/renderer/connector-line.d.ts

@@ -1,18 +1,41 @@
 import { Gantt } from '../base/gantt';
 import { IGanttData, IConnectorLineObject, IPredecessor } from '../base/interface';
+import { SvgRenderer } from '@syncfusion/ej2-svg-base';
 /**
  * To render the connector line in Gantt
  */
 export declare class ConnectorLine {
+    private transform;
+    private connectorLinePath;
+    private arrowPath;
+    private taskLineValue;
+    private x1;
+    private x2;
+    private x3;
+    private x4;
+    private y1;
+    private y2;
+    private y3;
+    private y4;
+    private manualParent;
+    private manualChild;
+    private point1;
+    private point2;
     private parent;
     dependencyViewContainer: HTMLElement;
     private lineColor;
     private lineStroke;
     tooltipTable: HTMLElement;
+    renderer: SvgRenderer;
+    private connectorId;
     /**
      * @hidden
      */
     expandedRecords: IGanttData[];
+    svgObject: Element;
+    private connectorPath;
+    private arrowlinePath;
+    private groupObject;
     constructor(ganttObj?: Gantt);
     /**
      * To get connector line gap.