@syncfusion/ej2-treegrid 31.2.15 → 32.1.21

package/src/treegrid/actions/summary.js

@@ -188,7 +188,7 @@ var Aggregate = /** @class */ (function () {
             var value_1 = types[parseInt(i.toString(), 10)] !== 'Custom' ? val["" + key] : val;
             single["" + disp] = single["" + disp] || {};
             single["" + disp]["" + key] = value_1;
-            single["" + disp][types[parseInt(i.toString(), 10)]] = !isNullOrUndefined(val) ? formatFn(value_1) : ' ';
+            single["" + disp][types[parseInt(i.toString(), 10)]] = (!isNullOrUndefined(val) && !isNullOrUndefined(value_1)) ? formatFn(value_1) : ' ';
         }
         helper.format = summaryColumn.getFormatter();
         var cellElement = createElement('td', {

package/src/treegrid/actions/virtual-scroll.js

@@ -129,9 +129,12 @@ var VirtualScroll = /** @class */ (function () {
         var dm = new DataManager(pageingDetails.result);
         var expanded = new Predicate('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
         var parents = dm.executeLocal(new Query().where(expanded));
-        var visualData = parents.filter(function (e) {
-            return getExpandStatus(_this.parent, e, parents);
-        });
+        var isFiltering = pageingDetails.actionArgs.requestType === 'filtering';
+        var isFlatHierarchy = this.parent.filterSettings.hierarchyMode === 'Child' ||
+            this.parent.filterSettings.hierarchyMode === 'None';
+        var visualData = isFiltering && isFlatHierarchy
+            ? parents
+            : parents.filter(function (e) { return getExpandStatus(_this.parent, e, parents); });
         this.visualData = visualData;
         pageingDetails.count = visualData.length;
         this.parent.grid.notify(events.dataListener, { data: visualData });

package/src/treegrid/base/data.js

@@ -56,6 +56,7 @@ var DataManipulation = /** @class */ (function () {
      */
     DataManipulation.prototype.destroy = function () {
         this.removeEventListener();
+        this.hierarchyData = null;
     };
     /**
      * @hidden
@@ -668,7 +669,7 @@ var DataManipulation = /** @class */ (function () {
                 this.parent.parentData.push(currentData);
             }
             currentData.uniqueID = getUid(this.parent.element.id + '_data_');
-            setValue('uniqueIDCollection.' + currentData.uniqueID, currentData, this.parent);
+            this.parent.uniqueIDCollection[currentData.uniqueID] = currentData;
             if (!isNullOrUndefined(parentRecords)) {
                 var parentData = extend({}, parentRecords);
                 delete parentData.childRecords;

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

@@ -643,6 +643,22 @@ export interface TreeGridModel extends ComponentModel{
      */
     allowPdfExport?: boolean;
 
+    /**
+     * Enables or disables column spanning for adjacent cells with similar data.
+     * When enabled, the treegrid merges adjacent cells with identical data between columns into a single cell, spanning multiple columns to enhance data presentation.
+     *
+     * @default false
+     */
+    enableColumnSpan?: boolean;
+
+    /**
+     * Enables or disables row spanning for adjacent cells with similar data.
+     * When enabled, the treegrid merges adjacent cells with identical data between rows into a single cell, spanning multiple rows to improve readability.
+     *
+     * @default false
+     */
+    enableRowSpan?: boolean;
+
     /**
      * Triggers when the component is created.
      *

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

@@ -77,8 +77,14 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private l10n;
     dataModule: DataManipulation;
     private registeredTemplate;
-    private uniqueIDCollection;
-    private uniqueIDFilterCollection;
+    /** @hidden */
+    uniqueIDCollection: {
+        [key: string]: ITreeData;
+    };
+    /** @hidden */
+    uniqueIDFilterCollection: {
+        [key: string]: ITreeData;
+    };
     private changedRecords;
     private deletedRecords;
     private addedRecords;
@@ -117,6 +123,8 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private treeColumnField;
     private stackedHeader;
     private freezeColumnRefresh;
+    private componentRefresh;
+    private isComponentRefresh;
     private isExcel;
     /** @hidden */
     initialRender: boolean;
@@ -759,6 +767,20 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @default false
      */
     allowPdfExport: boolean;
+    /**
+     * Enables or disables column spanning for adjacent cells with similar data.
+     * When enabled, the treegrid merges adjacent cells with identical data between columns into a single cell, spanning multiple columns to enhance data presentation.
+     *
+     * @default false
+     */
+    enableColumnSpan: boolean;
+    /**
+     * Enables or disables row spanning for adjacent cells with similar data.
+     * When enabled, the treegrid merges adjacent cells with identical data between rows into a single cell, spanning multiple rows to improve readability.
+     *
+     * @default false
+     */
+    enableRowSpan: boolean;
     /**
      * Triggers when the component is created.
      *
@@ -1246,6 +1268,22 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {string} Returns TreeGrid module name
      */
     protected getModuleName(): string;
+    /**
+     * Initiates a complete refresh of the TreeGrid's column and layout.
+     *
+     * This method forces a full re-render of the TreeGrid, ensuring that any dynamic
+     * changes to columns or layout are immediately reflected.
+     *
+     * @returns {void}
+     */
+    refreshLayout(): void;
+    /**
+     * @param {Object} prop - Defines the property
+     * @param {boolean} muteOnChange - Defines the mute on change
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange?: boolean): void;
     /**
      * For internal use only - Initialize the event handler;
      *
@@ -1469,7 +1507,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     /**
      * Adds a new record to the TreeGrid at the specified position or default location.
      *
-     * @param {Object} data - Object containing the data for the new record. If omitted, an empty row is added.
+     * @param {Object | Object[]} data - Object containing data for a single record, or an array of objects for creating multiple records. If omitted, an empty row is added.
      * @param {number} index - The index at which the new row should be added.
      * @param {RowPosition} position - Specifies the position of the new row (e.g., before, after or child).
      *
@@ -1477,7 +1515,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      *
      * @returns {void}
      */
-    addRecord(data?: Object, index?: number, position?: RowPosition): void;
+    addRecord(data?: Object | Object[], index?: number, position?: RowPosition): void;
     /**
      * Cancels the current edit operation on the TreeGrid.
      *
@@ -2100,6 +2138,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     private removeListener;
+    private getCellsByTableName;
     private partialFilterUpdate;
     /**
      * Filters the TreeGrid rows based on a specified column and filter criteria.
@@ -2421,6 +2460,13 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     outdent(record?: Object): void;
+    /**
+     * Calculates and returns the optimal page size that fits the current height of the TreeGrid's container.
+     *
+     * @param {number | string } containerHeight - (Optional) The height of the container - i.e. the complete TreeGrid height, which can be a number (in pixels) or a string.
+     * @returns {number} returns the page size
+     */
+    getPageSizeByHeight(containerHeight?: number | string): number;
     /**
      * `columnchooserModule` is used to dynamically show or hide the TreeGrid columns.
      *

package/src/treegrid/base/treegrid.js

@@ -67,7 +67,9 @@ var TreeGrid = /** @class */ (function (_super) {
     function TreeGrid(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.dataResults = {};
+        /** @hidden */
         _this.uniqueIDCollection = {};
+        /** @hidden */
         _this.uniqueIDFilterCollection = {};
         _this.changedRecords = 'changedRecords';
         _this.deletedRecords = 'deletedRecords';
@@ -77,6 +79,8 @@ var TreeGrid = /** @class */ (function (_super) {
         _this.modifiedRecords = [];
         _this.stackedHeader = false;
         _this.freezeColumnRefresh = true;
+        _this.componentRefresh = Component.prototype.refresh;
+        _this.isComponentRefresh = false;
         _this.objectEqualityChecker = function (old, current) {
             if (old) {
                 var keys = Object.keys(old);
@@ -127,7 +131,7 @@ var TreeGrid = /** @class */ (function (_super) {
     /* eslint-disable */
     TreeGrid.prototype.excelExport = function (excelExportProperties, isMultipleExport, workbook, isBlob) {
         /* eslint-enable */
-        return this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, false);
+        return this.allowExcelExport ? this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, false) : null;
     };
     /**
      * Exports the TreeGrid data to a CSV file.
@@ -141,7 +145,7 @@ var TreeGrid = /** @class */ (function (_super) {
     /* eslint-disable */
     TreeGrid.prototype.csvExport = function (excelExportProperties, isMultipleExport, workbook, isBlob) {
         /* eslint-enable */
-        return this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, true);
+        return this.allowExcelExport ? this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, true) : null;
     };
     /**
      * Exports the TreeGrid data to a PDF document.
@@ -153,7 +157,7 @@ var TreeGrid = /** @class */ (function (_super) {
      * @returns {Promise<any>} - Returns a promise that resolves with the result of the export action.
      */
     TreeGrid.prototype.pdfExport = function (pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {
-        return this.pdfExportModule.Map(pdfExportProperties, isMultipleExport, pdfDoc, isBlob);
+        return this.allowPdfExport ? this.pdfExportModule.Map(pdfExportProperties, isMultipleExport, pdfDoc, isBlob) : null;
     };
     /**
      * Sends a POST request to export the TreeGrid to an Excel file on the server side.
@@ -273,6 +277,26 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.getModuleName = function () {
         return 'treegrid';
     };
+    /**
+     * Initiates a complete refresh of the TreeGrid's column and layout.
+     *
+     * This method forces a full re-render of the TreeGrid, ensuring that any dynamic
+     * changes to columns or layout are immediately reflected.
+     *
+     * @returns {void}
+     */
+    TreeGrid.prototype.refreshLayout = function () {
+        this.componentRefresh();
+    };
+    /**
+     * @param {Object} prop - Defines the property
+     * @param {boolean} muteOnChange - Defines the mute on change
+     * @returns {void}
+     * @private
+     */
+    TreeGrid.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
     /**
      * For internal use only - Initialize the event handler;
      *
@@ -280,6 +304,9 @@ var TreeGrid = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeGrid.prototype.preRender = function () {
+        if (this.isComponentRefresh) {
+            this.grid = new Grid();
+        }
         this.TreeGridLocale();
         this.initProperties();
         this.defaultLocale = {
@@ -449,7 +476,10 @@ var TreeGrid = /** @class */ (function (_super) {
                                     }
                                 }
                                 else {
-                                    this.clearSelection();
+                                    var contentTableBody = this.grid.getContent().querySelector('.e-table tbody');
+                                    if (parentTarget && contentTableBody && parentTarget !== contentTableBody.lastElementChild) {
+                                        this.clearSelection();
+                                    }
                                 }
                             }
                         }
@@ -520,6 +550,8 @@ var TreeGrid = /** @class */ (function (_super) {
         this.isExpandAll = false;
         this.isCollapseAll = false;
         this.freezeColumnRefresh = true;
+        this.componentRefresh = Component.prototype.refresh;
+        this.isComponentRefresh = false;
         this.keyConfigs = {
             ctrlDownArrow: 'ctrl+downarrow',
             ctrlUpArrow: 'ctrl+uparrow',
@@ -875,7 +907,7 @@ var TreeGrid = /** @class */ (function (_super) {
         if (RecordsCount === 0 && this.columns.length === 0) {
             failureCases.push('Either of the Data source or columns should be given.');
         }
-        if (this.frozenColumns > 0 && this.columnModel.filter(function (col) { return col.isFrozen; })) {
+        if (this.frozenColumns > 0 && this.columnModel.filter(function (col) { return col.isFrozen; }).length > 0) {
             failureCases.push('Use only one attribute for Frozen either IsFrozen or FrozenColumns.');
         }
         if (this.enableVirtualization && !isNullOrUndefined(this.detailTemplate)) {
@@ -885,12 +917,21 @@ var TreeGrid = /** @class */ (function (_super) {
             && (!isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.rowTemplate))) {
             failureCases.push('Frozen rows and columns are not supported with the Detail template and row template.');
         }
-        if ((this.frozenColumns > 0 || this.columnModel.filter(function (col) { return col.isFrozen; }).length > 0 || this.frozenRows > 0) && this.editSettings.mode === 'Cell') {
+        if ((this.frozenColumns > 0 || this.columnModel.filter(function (col) { return col.isFrozen; }).length > 0 || this.frozenRows > 0) && this.editSettings.allowEditing && this.editSettings.mode === 'Cell') {
             failureCases.push('Frozen rows and columns are not supported with cell editing.');
         }
         if (this.allowSelection && !isNullOrUndefined(this.rowTemplate)) {
             failureCases.push('Selection is not supported in RowTemplate');
         }
+        if (!this.allowExcelExport && this.action === 'csvExport') {
+            failureCases.push('CSV export is not allowed when allowExcelExport is disabled.');
+        }
+        if (!this.allowPdfExport && this.action === 'pdfExport') {
+            failureCases.push('PDF export is not allowed when allowPdfExport is disabled');
+        }
+        if (!this.allowExcelExport && this.action === 'excelExport') {
+            failureCases.push('Excel export is not allowed when allowExcelExport is disabled.');
+        }
         if (this.treeColumnIndex >= this.columns.length) {
             failureCases.push('TreeColumnIndex value should not exceed the total column count.');
         }
@@ -1051,6 +1092,8 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.frozenRows = this.frozenRows;
         this.grid.frozenColumns = this.frozenColumns;
         this.grid.clipMode = getActualProperties(this.clipMode);
+        this.grid.enableColumnSpan = this.enableColumnSpan;
+        this.grid.enableRowSpan = this.enableRowSpan;
         var templateInstance = 'templateDotnetInstance';
         this.grid["" + templateInstance] = this["" + templateInstance];
         var isJsComponent = 'isJsComponent';
@@ -1531,12 +1574,12 @@ var TreeGrid = /** @class */ (function (_super) {
                 _this.grid.refresh();
             }
             if (args.action === 'filter') {
-                if (!args.isCollapseMaintain && _this.filterModule['currentFilterObject'] !== '' && _this.enableVirtualization && !_this.initialRender && !(isRemoteData(_this) && _this.enableVirtualization)) {
+                if (!args.isCollapseMaintain && _this.filterModule['currentFilterObject'] !== '' && _this.enableVirtualization && !_this.initialRender && !_this.expandStateMapping && !(isRemoteData(_this) && _this.enableVirtualization)) {
                     _this.expandAll();
                 }
             }
             if (args.requestType === 'searching') {
-                if (!args.isCollapseMaintain && _this.searchSettings.key !== '' && _this.enableVirtualization && !_this.initialRender && !(isRemoteData(_this) && _this.enableVirtualization)) {
+                if (!args.isCollapseMaintain && _this.searchSettings.key !== '' && _this.enableVirtualization && !_this.initialRender && !_this.expandStateMapping && !(isRemoteData(_this) && _this.enableVirtualization)) {
                     _this.expandAll();
                 }
             }
@@ -1876,12 +1919,15 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.onPropertyChanged = function (newProp) {
         var properties = Object.keys(newProp);
         var requireRefresh = false;
-        if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns)) {
-            this.refreshColumns();
-        }
         for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
             var prop = properties_1[_i];
             switch (prop) {
+                case 'columns':
+                    if (!isNullOrUndefined(newProp.columns)) {
+                        this.refreshColumns();
+                    }
+                    requireRefresh = true;
+                    break;
                 case 'treeColumnIndex':
                     this.grid.refreshColumns();
                     break;
@@ -2092,8 +2138,19 @@ var TreeGrid = /** @class */ (function (_super) {
                     }
                     this.grid.editSettings = this.getGridEditSettings();
                     break;
+                case 'enableRowSpan':
+                case 'enableColumnSpan':
+                    this.grid.enableRowSpan = this.enableRowSpan;
+                    this.grid.enableColumnSpan = this.enableColumnSpan;
+                    this.refreshColumns();
+                    break;
             }
-            if (requireRefresh) {
+        }
+        if (requireRefresh) {
+            if (this.isFrozenGrid()) {
+                this.refreshLayout();
+            }
+            else {
                 this.grid.refresh();
             }
         }
@@ -2114,6 +2171,7 @@ var TreeGrid = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeGrid.prototype.destroy = function () {
+        this.isComponentRefresh = true;
         var treeGridElement = this.element;
         if (!treeGridElement) {
             return;
@@ -2124,15 +2182,20 @@ var TreeGrid = /** @class */ (function (_super) {
             this.unwireEvents();
         }
         this.removeListener();
-        if (hasTreeGridChild) {
-            _super.prototype.destroy.call(this);
+        if (this.dataModule) {
+            this.dataModule.destroy();
         }
         if (this.grid) {
+            this.grid.dataSource = null;
             this.grid.destroy();
         }
-        if (this.dataModule) {
-            this.dataModule.destroy();
+        if (hasTreeGridChild) {
+            _super.prototype.destroy.call(this);
         }
+        this.infiniteScrollData = null;
+        this.remoteCollapsedData = null;
+        this.remoteExpandedData = null;
+        this.parentData = null;
         var modules = ['dataModule', 'sortModule', 'renderModule', 'filterModule', 'printModule', 'clipboardModule',
             'excelExportModule', 'pdfExportModule', 'toolbarModule', 'summaryModule', 'reorderModule', 'resizeModule',
             'pagerModule', 'keyboardModule', 'columnMenuModule', 'contextMenuModule', 'editModule', 'virtualScrollModule',
@@ -2142,6 +2205,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 this[modules[parseInt(i.toString(), 10)]] = null;
             }
         }
+        this.dataResults = null;
+        this.uniqueIDCollection = {};
+        this.uniqueIDFilterCollection = {};
         this.element.innerHTML = '';
         this.grid = null;
     };
@@ -2283,7 +2349,7 @@ var TreeGrid = /** @class */ (function (_super) {
     /**
      * Adds a new record to the TreeGrid at the specified position or default location.
      *
-     * @param {Object} data - Object containing the data for the new record. If omitted, an empty row is added.
+     * @param {Object | Object[]} data - Object containing data for a single record, or an array of objects for creating multiple records. If omitted, an empty row is added.
      * @param {number} index - The index at which the new row should be added.
      * @param {RowPosition} position - Specifies the position of the new row (e.g., before, after or child).
      *
@@ -3094,7 +3160,9 @@ var TreeGrid = /** @class */ (function (_super) {
         if (isNullOrUndefined(refreshUI) || refreshUI) {
             this.grid.columns = this.getGridColumns(this.columns);
             this.getTreeColumn();
-            this.grid.refreshColumns();
+            if (!this.isFrozenGrid()) {
+                this.grid.refreshColumns();
+            }
         }
         else {
             this.grid.setProperties({ columns: this.getGridColumns(this.columns) }, true);
@@ -3636,7 +3704,8 @@ var TreeGrid = /** @class */ (function (_super) {
             if (rows.length) {
                 for (var i = 0; i < rows.length; i++) {
                     if (action === 'collapse') {
-                        if (!isNullOrUndefined(this.getCurrentViewRecords()[rows[parseInt(i.toString(), 10)].rowIndex])) {
+                        var currentRecordIndx = this.frozenRows ? this.getCurrentViewRecords()[parseInt(rows[parseInt(i.toString(), 10)].getAttribute('aria-rowindex'), 10) - 1] : this.getCurrentViewRecords()[rows[parseInt(i.toString(), 10)].rowIndex];
+                        if (!isNullOrUndefined(currentRecordIndx)) {
                             this.collapseRow(rows[parseInt(i.toString(), 10)]);
                         }
                     }
@@ -3763,8 +3832,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 }
                 var lastrowIdx = this.getVisibleRecords()[this.getVisibleRecords().length - 1]['index'];
                 var lastRow = this.getRowByIndex(lastrowIdx);
-                if (this.grid.getContentTable().clientHeight <= this.grid.getContent().clientHeight && !isNullOrUndefined(lastRow) && !lastRow.cells[0].classList.contains('e-lastrowcell')) {
-                    this.lastRowBorder(lastRow, true);
+                var borderElement = lastRow ? lastRow.nextElementSibling ? lastRow.nextElementSibling.classList.contains('e-detailrow') ? lastRow.nextElementSibling : lastRow : lastRow : null;
+                if (this.grid.getContentTable().clientHeight <= this.grid.getContent().clientHeight && !isNullOrUndefined(borderElement) && !borderElement.cells[0].classList.contains('e-lastrowcell')) {
+                    this.lastRowBorder(borderElement, true);
                 }
             }
             if (isCountRequired(this) && action === 'expand') {
@@ -3928,12 +3998,16 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.localExpand = function (action, row, record) {
         var rows;
+        var detailRow = row.nextElementSibling ? row.nextElementSibling.classList.contains('e-detailrow') ? row.nextElementSibling : null : null;
         var childRecords = this.grid.currentViewData.filter(function (e) {
             return e.parentUniqueID === record.uniqueID;
         });
         if (this.isPixelHeight() && row.cells[0].classList.contains('e-lastrowcell')) {
             this.lastRowBorder(row, false);
         }
+        else if (this.isPixelHeight() && detailRow && detailRow.cells[0].classList.contains('e-lastrowcell')) {
+            this.lastRowBorder(row.nextElementSibling, false);
+        }
         var movableRows;
         var freezeRightRows;
         var gridRows = this.getRows();
@@ -4148,6 +4222,7 @@ var TreeGrid = /** @class */ (function (_super) {
         this.on('updateResults', this.updateResultModel, this);
         this.grid.on('initial-end', this.afterGridRender, this);
         this.grid.on('partial-filter-update', this.partialFilterUpdate, this);
+        this.grid.on('get-row-cells', this.getCellsByTableName, this);
     };
     TreeGrid.prototype.updateResultModel = function (returnResult) {
         this.dataResults = returnResult;
@@ -4164,6 +4239,16 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.off('initial-end', this.afterGridRender);
         this.grid.off('last-rowcell-border-updated', this.lastRowCellBorderUpdated);
         this.grid.off('partial-filter-update', this.partialFilterUpdate);
+        this.grid.off('get-row-cells', this.getCellsByTableName);
+    };
+    TreeGrid.prototype.getCellsByTableName = function (args) {
+        if (!Array.isArray(args.elements)) {
+            args.elements = [];
+        }
+        if (args.rowIndex < this.grid.getDataRows().length) {
+            var cells = [].slice.call(this.grid.getDataRows()[parseInt(args.rowIndex.toString(), 10)].getElementsByClassName('e-rowcell'));
+            Array.prototype.push.apply(args.elements, cells);
+        }
     };
     TreeGrid.prototype.partialFilterUpdate = function (args) {
         var gridFiltered = args.gridFiltered;
@@ -4588,6 +4673,53 @@ var TreeGrid = /** @class */ (function (_super) {
             this.rowDragAndDropModule[this.indentOutdentAction](record, 'outdent');
         }
     };
+    /**
+     * Calculates and returns the optimal page size that fits the current height of the TreeGrid's container.
+     *
+     * @param {number | string } containerHeight - (Optional) The height of the container - i.e. the complete TreeGrid height, which can be a number (in pixels) or a string.
+     * @returns {number} returns the page size
+     */
+    TreeGrid.prototype.getPageSizeByHeight = function (containerHeight) {
+        if (isNullOrUndefined(containerHeight)) {
+            var treegridControlElement = document.getElementById(this.element.id);
+            if (treegridControlElement) {
+                containerHeight = treegridControlElement.clientHeight;
+            }
+            else {
+                var root = this.element;
+                containerHeight = root ? (root.offsetHeight || root.clientHeight || 0) : 0;
+            }
+        }
+        if ((this.allowTextWrap && this.textWrapSettings.wrapMode === 'Header') || (!this.allowTextWrap)) {
+            var pagesize = 0;
+            if (typeof containerHeight === 'string' && containerHeight.indexOf('%') !== -1) {
+                containerHeight = parseInt(containerHeight, 10) / 100 * this.element.clientHeight;
+            }
+            var nonContentHeight = this.grid['getNoncontentHeight']() + this.grid.getRowHeight();
+            if (containerHeight > nonContentHeight) {
+                var contentHeight = 0;
+                var calcNonContentHeight = this.grid['getNoncontentHeight']();
+                var pagerMsg = document.getElementsByClassName('e-pagerexternalmsg')[0];
+                if (pagerMsg) {
+                    calcNonContentHeight += pagerMsg.clientHeight;
+                }
+                contentHeight = containerHeight - calcNonContentHeight;
+                pagesize = (contentHeight / this.grid.getRowHeight());
+            }
+            if (this.frozenRows > 0) {
+                pagesize = pagesize + this.frozenRows;
+            }
+            if (pagesize > 0) {
+                return Math.floor(pagesize);
+            }
+            else {
+                return 0;
+            }
+        }
+        else {
+            return 0;
+        }
+    };
     var TreeGrid_1;
     __decorate([
         Property(0)
@@ -4802,6 +4934,12 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "allowPdfExport", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "enableColumnSpan", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "enableRowSpan", void 0);
     __decorate([
         Event()
     ], TreeGrid.prototype, "created", void 0);

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

@@ -293,6 +293,18 @@ export declare class Column {
      * @default false
      */
     lockColumn: boolean;
+    /**
+     * Allows treegrid to perform row spanning on the specified column.
+     *
+     * @default true
+     */
+    enableRowSpan: boolean;
+    /**
+     * Allows treegrid to perform column spanning on the specified column.
+     *
+     * @default true
+     */
+    enableColumnSpan: boolean;
     /**
      * Dictates the column freeze position. Options include:
      * * `Left` - Freeze the column on the left.
@@ -654,6 +666,18 @@ export interface ColumnModel {
      * @default false
      */
     lockColumn?: boolean;
+    /**
+     * Allows treegrid to perform row spanning on the specified column.
+     *
+     * @default true
+     */
+    enableRowSpan?: boolean;
+    /**
+     * Allows treegrid to perform column spanning on the specified column.
+     *
+     * @default true
+     */
+    enableColumnSpan?: boolean;
     /**
      * Determines which side (left, right, or center) the column should be frozen on.
      *

package/src/treegrid/models/column.js

@@ -78,6 +78,18 @@ var Column = /** @class */ (function () {
          * @default null
          */
         this.filter = {};
+        /**
+         * Allows treegrid to perform row spanning on the specified column.
+         *
+         * @default true
+         */
+        this.enableRowSpan = true;
+        /**
+         * Allows treegrid to perform column spanning on the specified column.
+         *
+         * @default true
+         */
+        this.enableColumnSpan = true;
         merge(this, options);
     }
     /**

package/src/treegrid/renderer/virtual-tree-content-render.d.ts

@@ -323,6 +323,10 @@ export declare class TreeInterSectionObserver extends InterSectionObserver {
     private newPos;
     private lastPos;
     private timer;
+    private containerEl;
+    private movableContainerEl;
+    private containerScrollHandler;
+    private movableScrollHandler;
     /**
      * Sets up observers to monitor scroll events on a given container
      * and its movable companion within a virtual grid setup.
@@ -333,6 +337,7 @@ export declare class TreeInterSectionObserver extends InterSectionObserver {
      * @returns {void}
      */
     observes(callback: Function, onEnterCallback: Function, instance: IGrid): void;
+    disconnect(): void;
     /**
      * Clears the last known position.
      *