@syncfusion/ej2-treegrid 21.2.10 → 22.1.34

package/src/treegrid/base/treegrid.d.ts

@@ -358,8 +358,9 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @hidden
      * It used to render pager template
      * @default null
+     * @aspType string
      */
-    pagerTemplate: string;
+    pagerTemplate: string | Function;
     /**
      * If `showColumnMenu` set to true, then it will enable the column menu options in each columns.
      *
@@ -421,8 +422,9 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * > It accepts either the [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
      * or the HTML element ID.
      *
+     * @aspType string
      */
-    detailTemplate: string;
+    detailTemplate: string | Function;
     /**
      * Configures the filter settings of the TreeGrid.
      *
@@ -457,8 +459,9 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @hidden
      * It used to render toolbar template
      * @default null
+     * @aspType string
      */
-    toolbarTemplate: string;
+    toolbarTemplate: string | Function;
     /**
      * Defines the mode of TreeGrid lines. The available modes are,
      * ```props
@@ -518,8 +521,10 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * > * The row template must be a table row.
      *
      * > Check the [`Row Template`](../../treegrid/row) customization.
+     *
+     * @aspType string
      */
-    rowTemplate: string;
+    rowTemplate: string | Function;
     /**
      * `copyHierarchyMode` Defines the copy clipboard types.
      * <br><br>
@@ -638,14 +643,14 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * This helps to load large dataset in TreeGrid.
      *
      * @default false
-     * @deprecated
+
      */
     enableInfiniteScrolling: boolean;
     /**
      * Configures the infinite scroll settings.
      *
      * @default { enableCache: false, maxBlocks: 5, initialBlocks: 5 }
-     * @deprecated
+
      */
     infiniteScrollSettings: InfiniteScrollSettingsModel;
     /**
@@ -772,7 +777,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Invoke the done method from the argument to start render after edit operation.
      *
      * @event dataSourceChanged
-     * @deprecated
+
      */
     dataSourceChanged: EmitType<DataSourceChangedEventArgs>;
     /**
@@ -780,7 +785,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * In this event,the current view data and total record count should be assigned to the `dataSource` based on the action performed.
      *
      * @event dataStateChange
-     * @deprecated
+
      */
     dataStateChange: EmitType<DataStateChangeEventArgs>;
     /**
@@ -832,7 +837,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Triggers before deselecting the selected row.
      *
      * @event rowSelected
-     * @deprecated
+
      */
     rowDeselecting: EmitType<RowDeselectEventArgs>;
     /**
@@ -857,7 +862,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Triggers before column menu opens.
      *
      * @event columnMenuOpen
-     * @deprecated
+
      */
     columnMenuOpen: EmitType<ColumnMenuOpenEventArgs>;
     /**
@@ -876,77 +881,77 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Triggers before the selected cell is deselecting.
      *
      * @event cellDeselecting
-     * @deprecated
+
      */
     cellDeselecting: EmitType<CellDeselectEventArgs>;
     /**
      * Triggers when a particular selected cell is deselected.
      *
      * @event cellDeselected
-     * @deprecated
+
      */
     cellDeselected: EmitType<CellDeselectEventArgs>;
     /**
      * Triggers when column resize starts.
      *
      * @event resizeStart
-     * @deprecated
+
      */
     resizeStart: EmitType<ResizeArgs>;
     /**
      * Triggers on column resizing.
      *
      * @event resizing
-     * @deprecated
+
      */
     resizing: EmitType<ResizeArgs>;
     /**
      * Triggers when column resize ends.
      *
      * @event resizeStop
-     * @deprecated
+
      */
     resizeStop: EmitType<ResizeArgs>;
     /**
      * Triggers when column header element drag (move) starts.
      *
      * @event columnDragStart
-     * @deprecated
+
      */
     columnDragStart: EmitType<ColumnDragEventArgs>;
     /**
      * Triggers when column header element is dragged (moved) continuously.
      *
      * @event columnDrag
-     * @deprecated
+
      */
     columnDrag: EmitType<ColumnDragEventArgs>;
     /**
      * Triggers when a column header element is dropped on the target column.
      *
      * @event columnDrop
-     * @deprecated
+
      */
     columnDrop: EmitType<ColumnDragEventArgs>;
     /**
      * Triggers when the check box state change in checkbox column.
      *
      * @event checkboxChange
-     * @deprecated
+
      */
     checkboxChange: EmitType<CheckBoxChangeEventArgs>;
     /**
      * Triggers after print action is completed.
      *
      * @event printComplete
-     * @deprecated
+
      */
     printComplete: EmitType<PrintEventArgs>;
     /**
      * Triggers before the print action starts.
      *
      * @event beforePrint
-     * @deprecated
+
      */
     beforePrint: EmitType<PrintEventArgs>;
     /**
@@ -965,7 +970,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Triggers before context menu opens.
      *
      * @event contextMenuOpen
-     * @deprecated
+
      */
     contextMenuOpen: EmitType<BeforeOpenCloseMenuEventArgs>;
     /**
@@ -978,42 +983,42 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Triggers before TreeGrid copy action.
      *
      * @event beforeCopy
-     * @deprecated
+
      */
     beforeCopy: EmitType<BeforeCopyEventArgs>;
     /**
      * Triggers before TreeGrid paste action.
      *
      * @event beforePaste
-     * @deprecated
+
      */
     beforePaste: EmitType<BeforePasteEventArgs>;
     /**
      * Triggers when row elements are dragged (moved) continuously.
      *
      * @event rowDrag
-     * @deprecated
+
      */
     rowDrag: EmitType<RowDragEventArgs>;
     /**
      * Triggers when row element’s drag(move) starts.
      *
      * @event rowDragStart
-     * @deprecated
+
      */
     rowDragStart: EmitType<RowDragEventArgs>;
     /**
      * Triggers when row element’s before drag(move).
      *
      * @event rowDragStartHelper
-     * @deprecated
+
      */
     rowDragStartHelper: EmitType<RowDragEventArgs>;
     /**
      * Triggers when row elements are dropped on the target row.
      *
      * @event rowDrop
-     * @deprecated
+
      */
     rowDrop: EmitType<RowDragEventArgs>;
     /**
@@ -1050,7 +1055,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * You can also customize the PDF cells.
      *
      * @event pdfQueryCellInfo
-     * @deprecated
+
      */
     pdfQueryCellInfo: EmitType<PdfQueryCellInfoEventArgs>;
     /**
@@ -1058,7 +1063,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * You can also customize the PDF cells.
      *
      * @event pdfHeaderQueryCellInfo
-     * @deprecated
+
      */
     pdfHeaderQueryCellInfo: EmitType<PdfHeaderQueryCellInfoEventArgs>;
     /**
@@ -1066,7 +1071,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * You can also customize the Excel cells.
      *
      * @event excelQueryCellInfo
-     * @deprecated
+
      */
     excelQueryCellInfo: EmitType<ExcelQueryCellInfoEventArgs>;
     /**
@@ -1074,7 +1079,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * You can also customize the Excel cells.
      *
      * @event excelHeaderQueryCellInfo
-     * @deprecated
+
      */
     excelHeaderQueryCellInfo: EmitType<ExcelHeaderQueryCellInfoEventArgs>;
     /**
@@ -1087,7 +1092,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Triggers after TreeGrid data is exported to Excel file.
      *
      * @event excelExportComplete
-     * @deprecated
+
      */
     excelExportComplete: EmitType<ExcelExportCompleteArgs>;
     /**
@@ -1100,7 +1105,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Triggers after TreeGrid data is exported to PDF document.
      *
      * @event pdfExportComplete
-     * @deprecated
+
      */
     pdfExportComplete: EmitType<PdfExportCompleteArgs>;
     /**

package/src/treegrid/base/treegrid.js

@@ -715,7 +715,9 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.query = this.query;
         this.grid.columnQueryMode = this.columnQueryMode;
         this.grid.allowPaging = this.allowPaging;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.pageSettings = getActualProperties(this.pageSettings);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.pagerTemplate = this.pagerTemplate;
         this.grid.showColumnMenu = this.showColumnMenu;
         this.grid.allowSorting = this.allowSorting;
@@ -742,12 +744,14 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.gridLines = this.gridLines;
         this.grid.allowSelection = this.allowSelection;
         this.grid.toolbar = getActualProperties(this.getGridToolbar());
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.toolbarTemplate = this.toolbarTemplate;
         this.grid.showColumnChooser = this.showColumnChooser;
         this.grid.filterSettings = getActualProperties(this.filterSettings);
         this.grid.selectionSettings = getActualProperties(this.selectionSettings);
         this.grid.sortSettings = getActualProperties(this.sortSettings);
         this.grid.searchSettings = getActualProperties(this.searchSettings);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.aggregates = getActualProperties(this.aggregates);
         this.grid.textWrapSettings = getActualProperties(this.textWrapSettings);
         this.grid.printMode = getActualProperties(this.printMode);
@@ -756,7 +760,9 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.contextMenuItems = getActualProperties(this.getContextMenu());
         this.grid.columnMenuItems = getActualProperties(this.columnMenuItems);
         this.grid.editSettings = this.getGridEditSettings();
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.rowTemplate = getActualProperties(this.rowTemplate);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.detailTemplate = getActualProperties(this.detailTemplate);
         this.grid.frozenRows = this.frozenRows;
         this.grid.frozenColumns = this.frozenColumns;
@@ -1086,10 +1092,8 @@ var TreeGrid = /** @class */ (function (_super) {
                         var currentData = _this.getCurrentViewRecords();
                         var rows = _this.getContentTable().rows;
                         for (var i = 0; i < rows.length; i++) {
-                            var args = {
-                                data: currentData[parseInt(i.toString(), 10)],
-                                row: rows[parseInt(i.toString(), 10)]
-                            };
+                            var args = { data: currentData[parseInt(i.toString(), 10)],
+                                row: rows[parseInt(i.toString(), 10)] };
                             _this.renderModule.RowModifier(args);
                         }
                     }
@@ -1548,6 +1552,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.allowPaging = this.allowPaging;
                     break;
                 case 'pageSettings':
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.grid.pageSettings = getActualProperties(this.pageSettings);
                     requireRefresh = true;
                     break;
@@ -1593,6 +1598,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.allowRowDragAndDrop = this.allowRowDragAndDrop;
                     break;
                 case 'aggregates':
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.grid.aggregates = getActualProperties(this.aggregates);
                     break;
                 case 'enableInfiniteScrolling':
@@ -1643,6 +1649,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.gridLines = this.gridLines;
                     break;
                 case 'rowTemplate':
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.grid.rowTemplate = getActualProperties(this.rowTemplate);
                     break;
                 case 'frozenRows':
@@ -1722,6 +1729,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.showColumnChooser = this.showColumnChooser;
                     break;
                 case 'detailTemplate':
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.grid.detailTemplate = getActualProperties(this.detailTemplate);
                     break;
                 case 'columnMenuItems':
@@ -2306,8 +2314,8 @@ var TreeGrid = /** @class */ (function (_super) {
                     }
                 }
                 else if (!isNullOrUndefined(this.columns[parseInt(i.toString(), 10)].field)) {
-                    var fieldName = this.columns[parseInt(i.toString(), 10)].field;
-                    var currentColumn = this.grid.getColumnByField(fieldName);
+                    var currentColumn = this.grid.getColumnByField(this.columns[parseInt(i.toString(), 10)]
+                        .field);
                     this.columns[parseInt(i.toString(), 10)].width = currentColumn.width;
                 }
             }

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

@@ -58,8 +58,10 @@ export declare class Column {
      * @hidden
      * Defines the commands column template as string or HTML element ID which is used to add
      * customized command buttons in each cells of the column.
+     *
+     * @aspType string
      */
-    commandsTemplate: string;
+    commandsTemplate: string | Function;
     /**
      * `commands` provides an option to display command buttons in every cell.
      * The available built-in command buttons are
@@ -108,7 +110,7 @@ export declare class Column {
      * @default null
      * @aspIgnore
      */
-    editTemplate: string;
+    editTemplate: string | Function;
     /**
      * Defines the filter template/UI that used as filter for a particular column.
      * It accepts either template string or HTML element ID.
@@ -116,7 +118,7 @@ export declare class Column {
      * @default null
      * @aspIgnore
      */
-    filterTemplate: string;
+    filterTemplate: string | Function;
     /**
      * If `isIdentity` is set to true, then this column is considered as identity column.
      *
@@ -191,14 +193,16 @@ export declare class Column {
      * or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * 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;
     /**
      * You can use this property to freeze selected columns in treegrid
      *
@@ -490,8 +494,10 @@ export interface ColumnModel {
      * @hidden
      * Defines the commands column template as string or HTML element ID which is used to add
      * customized command buttons in each cells of the column.
+     *
+     * @aspType string
      */
-    commandsTemplate?: string;
+    commandsTemplate?: string | Function;
     /**
      * `commands` provides an option to display command buttons in every cell.
      * The available built-in command buttons are
@@ -529,14 +535,16 @@ export interface ColumnModel {
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
     /**
      * 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;
     /**
      * You can use this property to freeze selected columns in grid.
      *
@@ -666,14 +674,14 @@ export interface ColumnModel {
      *
      * @aspIgnore
      */
-    editTemplate?: string;
+    editTemplate?: string | Function;
     /**
      * Defines the filter template/UI that is used as filter for a particular column.
      * It accepts either template string or HTML element ID.
      *
      * @aspIgnore
      */
-    filterTemplate?: string;
+    filterTemplate?: string | Function;
     /**
      * If `isIdentity` is set to true, then this column is considered as identity column.
      *

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

@@ -80,8 +80,9 @@ export interface EditSettingsModel {
      * Defines the custom edit elements for the dialog template.
      *
      * @default ''
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Defines the dialog params to edit.

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

@@ -72,8 +72,9 @@ export declare class EditSettings extends ChildProperty<EditSettings> {
      * Defines the custom edit elements for the dialog template.
      *
      * @default ''
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Defines the dialog params to edit.
      *

package/src/treegrid/models/page-settings-model.d.ts

@@ -53,8 +53,9 @@ export interface PageSettingsModel {
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Specifies the mode of record count in a page. The options are,

package/src/treegrid/models/page-settings.d.ts

@@ -46,8 +46,9 @@ export declare class PageSettings extends ChildProperty<PageSettings> {
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Specifies the mode of record count in a page. The options are,
      * * `All`: Count all the records.

package/src/treegrid/models/summary-model.d.ts

@@ -31,8 +31,10 @@ export interface AggregateColumnModel {
      * {% codeBlock src="grid/footer-template-api/index.ts" %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType string
+     *
      */
-    footerTemplate?: string;
+    footerTemplate?: string | Function;
 
     /**
      * Defines the column name to perform aggregation.

package/src/treegrid/models/summary.d.ts

@@ -33,8 +33,10 @@ export declare class AggregateColumn extends ChildProperty<AggregateColumn> {
      * {% codeBlock src="grid/footer-template-api/index.ts" %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType string
+     *
      */
-    footerTemplate: string;
+    footerTemplate: string | Function;
     /**
      * Defines the column name to perform aggregation.
      *

package/src/treegrid/renderer/render.js

@@ -134,7 +134,12 @@ var Render = /** @class */ (function () {
             var iconRequired = !isNullOrUndefined(data.hasFilteredChildRecords)
                 ? data.hasFilteredChildRecords : data.hasChildRecords;
             if (iconRequired && !isNullOrUndefined(data.childRecords)) {
-                iconRequired = !(data.childRecords.length === 0);
+                if (this.parent['isFromGantt'] && !this.parent.loadChildOnDemand) {
+                    iconRequired = data.hasChildRecords;
+                }
+                else {
+                    iconRequired = !(data.childRecords.length === 0);
+                }
             }
             if (iconRequired) {
                 addClass([args.cell], 'e-treerowcell');
@@ -253,6 +258,7 @@ var Render = /** @class */ (function () {
             args.cell.setAttribute('data-colindex', colindex + '');
         }
         if (treeColumn.field === args.column.field && !isNullOrUndefined(treeColumn.template)) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             args.column.template = treeColumn.template;
             args.column["" + templateFn] = templateCompiler(args.column.template);
             args.cell.classList.add('e-templatecell');

package/src/treegrid/renderer/virtual-tree-content-render.js

@@ -443,9 +443,8 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             }
             this.startIndex = !isLastBlock ? lastIndex - this.parent.pageSettings.pageSize : nextSetResIndex;
             this.endIndex = lastIndex;
-            if ((nextSetResIndex + this.parent.pageSettings.pageSize) > this.totalRecords &&
-                (this.endIndex - this.startIndex) < (this.parent.pageSettings.pageSize / 2) &&
-                (this.endIndex - nextSetResIndex) < (this.parent.pageSettings.pageSize / 2)) {
+            if ((nextSetResIndex + this.parent.pageSettings.pageSize) > this.totalRecords && (this.endIndex - this.startIndex) <
+                (this.parent.pageSettings.pageSize / 2) && (this.endIndex - nextSetResIndex) < (this.parent.pageSettings.pageSize / 2)) {
                 this.startIndex = lastIndex - (this.parent.pageSettings.pageSize / 2);
             }
             if (currentViewData.length && this.startIndex > currentViewData[0]["" + indexValue] &&
@@ -460,7 +459,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     this.translateY = scrollArgs.offset.top - rowHeight * 2;
                 }
                 else {
-                    if (this.totalRecords == this.endIndex) {
+                    if (this.totalRecords === this.endIndex) {
                         this.translateY = (this.totalRecords * rowHeight) - ((this.endIndex - this.startIndex) * rowHeight);
                     }
                     else {
@@ -653,6 +652,8 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
             if (_this["" + options].axes.indexOf(current.axis) === -1) {
                 return;
             }
+            var containerRect = 'containerRect';
+            _this["" + containerRect] = _this["" + options].container.getBoundingClientRect();
             var check = _this.check(direction);
             if (current.entered && (current.axis === 'X' || instance.enableVirtualMaskRow)) {
                 if (_this["" + movableEle] && (direction === 'right' || direction === 'left')) {