@syncfusion/ej2-treegrid 32.2.9 → 33.1.44

package/dist/es6/ej2-treegrid.es5.js

@@ -1,5 +1,5 @@
 import { Property, merge, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, Component, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, closest, setStyleAttribute, select, classList, debounce, remove } from '@syncfusion/ej2-base';
-import { Grid, Logger as Logger$1, detailLists, Clipboard, getObject, parentsUntil, Print as Print$1, templateCompiler, appendChildren, extend, CellRenderer, getUid, CellType, Freeze as Freeze$1, getNumberFormat, getActualProperties, iterateArrayOrObject, RowDropSettings as RowDropSettings$1, Reorder as Reorder$1, Resize as Resize$1, Scroll, RowDD as RowDD$1, VirtualRowModelGenerator, Filter as Filter$1, Data, ExportHelper, ExcelExport as ExcelExport$1, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, calculateAggregate, Aggregate as Aggregate$1, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, resetRowIndex, Edit as Edit$1, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, Cell, getVisiblePage, VirtualContentRenderer, InterSectionObserver, getTransformValues, RenderType, VirtualHeaderRenderer, VirtualScroll as VirtualScroll$1, ColumnChooser as ColumnChooser$1, getRowIndexFromElement, RowRenderer, InfiniteScroll as InfiniteScroll$1 } from '@syncfusion/ej2-grids';
+import { Grid, Logger as Logger$1, detailLists, Clipboard, getObject, parentsUntil, Print as Print$1, templateCompiler, appendChildren, extend, CellRenderer, getUid, CellType, Freeze as Freeze$1, getNumberFormat, setEnableSeamlessScrolling, getActualProperties, iterateArrayOrObject, RowDropSettings as RowDropSettings$1, Reorder as Reorder$1, Resize as Resize$1, Scroll, RowDD as RowDD$1, VirtualRowModelGenerator, Filter as Filter$1, Data, ExportHelper, ExcelExport as ExcelExport$1, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, calculateAggregate, Aggregate as Aggregate$1, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, resetRowIndex, Edit as Edit$1, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, Cell, getVisiblePage, VirtualContentRenderer, InterSectionObserver, getTransformValues, RenderType, VirtualHeaderRenderer, VirtualScroll as VirtualScroll$1, ColumnChooser as ColumnChooser$1, getRowIndexFromElement, RowRenderer, InfiniteScroll as InfiniteScroll$1 } from '@syncfusion/ej2-grids';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { DataManager, ODataAdaptor, WebApiAdaptor, WebMethodAdaptor, CacheAdaptor, UrlAdaptor, Query, DataUtil, RemoteSaveAdaptor, Deferred, JsonAdaptor, Predicate as Predicate$1 } from '@syncfusion/ej2-data';
 import { showSpinner, hideSpinner, createSpinner } from '@syncfusion/ej2-popups';
@@ -3311,7 +3311,6 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
         var results = dataObj instanceof DataManager ? dataObj.dataSource.json : dataObj;
         var count = isCountRequired(this.parent) ? getValue('count', this.parent.dataSource)
             : results.length;
-        var qry = new Query();
         var gridQuery = getObject('query', args);
         var filterQuery;
         var searchQuery;
@@ -3327,11 +3326,7 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                 gridQuery = getValue('grid.renderModule.data', this.parent).filterQuery(gridQuery);
                 gridQuery = getValue('grid.renderModule.data', this.parent).searchQuery(gridQuery);
             }
-            var fltrQuery = gridQuery.queries.filter(function (q) { return q.fn === 'onWhere'; });
-            var srchQuery = gridQuery.queries.filter(function (q) { return q.fn === 'onSearch'; });
-            qry.queries = fltrQuery.concat(srchQuery);
-            var filteredData = new DataManager(results).executeLocal(qry);
-            this.parent.notify('updateFilterRecs', { data: filteredData });
+            this.parent.getData({ query: gridQuery, isFilter: true });
             results = this.dataResults.result;
             this.dataResults.result = null;
             if (this.parent.grid.aggregates.length > 0) {
@@ -3356,34 +3351,8 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
         }
         if (this.parent.grid.sortSettings.columns.length > 0 || this.isSortAction) {
             this.isSortAction = false;
-            var parentData = this.parent.parentData;
             var query = getObject('query', args);
-            var srtQry = new Query();
-            for (var srt = this.parent.grid.sortSettings.columns.length - 1; srt >= 0; srt--) {
-                var getColumnByField = 'getColumnByField';
-                var col = this.parent.grid.renderModule.data["" + getColumnByField](this.parent.grid.
-                    sortSettings.columns[parseInt(srt.toString(), 10)].field);
-                var compFun = col.sortComparer && isOffline(this.parent) ?
-                    col.sortComparer.bind(col) :
-                    this.parent.grid.sortSettings.columns[parseInt(srt.toString(), 10)].direction;
-                srtQry.sortBy(this.parent.grid.sortSettings.columns[parseInt(srt.toString(), 10)].field, compFun);
-            }
-            var modifiedData = new DataManager(parentData).executeLocal(srtQry);
-            if (this.parent.allowRowDragAndDrop && !isNullOrUndefined(this.parent.rowDragAndDropModule['draggedRecord']) &&
-                this.parent.rowDragAndDropModule['droppedRecord'].hasChildRecords && this.parent.rowDragAndDropModule['dropPosition'] !== 'middleSegment') {
-                var dragdIndex = modifiedData.indexOf(this.parent.rowDragAndDropModule['draggedRecord']);
-                modifiedData.splice(dragdIndex, 1);
-                var dropdIndex = modifiedData.indexOf(this.parent.rowDragAndDropModule['droppedRecord']);
-                if (this.parent.rowDragAndDropModule['droppedRecord'].hasChildRecords && this.parent.rowDragAndDropModule['dropPosition'] === 'topSegment') {
-                    modifiedData.splice(dropdIndex, 0, this.parent.rowDragAndDropModule['draggedRecord']);
-                }
-                else if (this.parent.rowDragAndDropModule['dropPosition'] === 'bottomSegment') {
-                    modifiedData.splice(dropdIndex + 1, 0, this.parent.rowDragAndDropModule['draggedRecord']);
-                }
-            }
-            var sortArgs = { modifiedData: modifiedData, filteredData: results, srtQry: srtQry };
-            this.parent.notify('createSort', sortArgs);
-            results = sortArgs.modifiedData;
+            results = this.parent.getData({ query: query, isSort: true });
             this.dataResults.result = null;
             this.sortedData = results;
             this.parent.notify('updateModel', {});
@@ -4351,6 +4320,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         _this.isComponentRefresh = false;
         _this.isVirtualExpandCollapse = false;
         _this.isInfiniteCollapse = false;
+        /** @hidden */
+        _this.enableSeamlessScrolling = false;
         _this.objectEqualityChecker = function (old, current) {
             if (old) {
                 var keys = Object.keys(old);
@@ -5098,7 +5069,15 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.renderModule = new Render(this);
         this.dataModule = new DataManipulation(this);
         this.printModule = new Print(this);
-        this.trigger(load);
+        if (this.enableVirtualization || this.enableColumnVirtualization) {
+            var args = { enableSeamlessScrolling: this.enableSeamlessScrolling };
+            this.trigger(load, args);
+            this.enableSeamlessScrolling = args.enableSeamlessScrolling;
+            setEnableSeamlessScrolling(this.enableSeamlessScrolling);
+        }
+        else {
+            this.trigger(load);
+        }
         this.autoGenerateColumns();
         this.initialRender = true;
         if (!isNullOrUndefined(this.dataSource)) {
@@ -5371,6 +5350,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.grid.clipMode = getActualProperties(this.clipMode);
         this.grid.enableColumnSpan = this.enableColumnSpan;
         this.grid.enableRowSpan = this.enableRowSpan;
+        this.grid.enableSeamlessScrolling = this.enableSeamlessScrolling;
         var templateInstance = 'templateDotnetInstance';
         this.grid["" + templateInstance] = this["" + templateInstance];
         var isJsComponent = 'isJsComponent';
@@ -5848,7 +5828,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             }
             _this.notify('updateGridActions', args);
             _this.isVirtualExpandCollapse = false;
-            if (args.requestType === 'save' && _this.aggregates.map(function (ag) { return ag.showChildSummary === true; }).length) {
+            if (args.requestType === 'save' && _this.aggregates.some(function (ag) { return ag.showChildSummary === true; })) {
                 _this.grid.refresh();
             }
             if ((args.action === 'clearFilter' || args.action === 'clear-filter' || args.requestType === 'sorting') && _this.enableInfiniteScrolling) {
@@ -6594,6 +6574,115 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    /**
+     * Retrieves all records that match the current search criteria and are sorted according to the active sort settings.
+     *
+     * This method processes the data source by applying search filters and sort operations,
+     * returning the searched and sorted records excluding summary rows.
+     *
+     * @param {Object} args - Optional arguments object to control query execution behavior.
+     * @param {Query} args.query - Optional custom Query object to override the default generated query.
+     * @param {boolean} args.isFilter - Optional flag to include only filtered records without sorting (default: false).
+     * @param {boolean} args.isSort - Optional flag to apply only sorting without filtering (default: false).
+     *
+     * @returns {ITreeData[]} - Array of searched and sorted TreeGrid records with summary rows excluded.
+     * @hidden
+     */
+    TreeGrid.prototype.getData = function (args) {
+        var dataObj = isCountRequired(this) ? getValue('result', this.grid.dataSource)
+            : this.grid.dataSource;
+        var results = dataObj instanceof DataManager ? dataObj.dataSource.json : dataObj;
+        var gridQuery = (!isNullOrUndefined(args) && args.query) ? args.query : this.getDataModule().baseModule.generateQuery();
+        var filterQuery;
+        var searchQuery;
+        if (!isNullOrUndefined(gridQuery)) {
+            filterQuery = gridQuery.queries.filter(function (q) { return q.fn === 'onWhere'; });
+            searchQuery = gridQuery.queries.filter(function (q) { return q.fn === 'onSearch'; });
+        }
+        var skipFilterSearch = (!isNullOrUndefined(args) && args.isSort);
+        if (!skipFilterSearch && (this.grid.allowFiltering && this.grid.filterSettings.columns.length) ||
+            (this.grid.searchSettings.key.length > 0) && (!isNullOrUndefined(gridQuery))
+            || ((filterQuery && filterQuery.length > 0) || (searchQuery && searchQuery.length > 0))) {
+            var filterQuery_1 = gridQuery.queries.filter(function (q) { return q.fn === 'onWhere'; });
+            var searchQuery_1 = gridQuery.queries.filter(function (q) { return q.fn === 'onSearch'; });
+            var query = new Query();
+            query.queries = filterQuery_1.concat(searchQuery_1);
+            var filteredData = new DataManager(results).executeLocal(query);
+            this.notify('updateFilterRecs', { data: filteredData });
+            results = isRemoteData(this) ? this.dataResults : this.filterModule.filteredResult;
+            if (!isNullOrUndefined(args) && args.isFilter) {
+                return isRemoteData(this) ? results.result.filter(function (item) { return !item.isSummaryRow; })
+                    : results.filter(function (item) { return !item.isSummaryRow; });
+            }
+        }
+        var sortQuery = gridQuery.queries.filter(function (q) { return q.fn === 'onSortBy'; });
+        if (this.grid.sortSettings.columns.length > 0 || sortQuery.length) {
+            var parentData = this.parentData;
+            var query = new Query();
+            query.queries = sortQuery;
+            var modifiedData = new DataManager(parentData).executeLocal(query);
+            if (this.allowRowDragAndDrop && !isNullOrUndefined(this.rowDragAndDropModule['draggedRecord']) &&
+                this.rowDragAndDropModule['droppedRecord'].hasChildRecords && this.rowDragAndDropModule['dropPosition'] !== 'middleSegment') {
+                var dragdIndex = modifiedData.indexOf(this.rowDragAndDropModule['draggedRecord']);
+                modifiedData.splice(dragdIndex, 1);
+                var dropdIndex = modifiedData.indexOf(this.rowDragAndDropModule['droppedRecord']);
+                if (this.rowDragAndDropModule['droppedRecord'].hasChildRecords && this.rowDragAndDropModule['dropPosition'] === 'topSegment') {
+                    modifiedData.splice(dropdIndex, 0, this.rowDragAndDropModule['draggedRecord']);
+                }
+                else if (this.rowDragAndDropModule['dropPosition'] === 'bottomSegment') {
+                    modifiedData.splice(dropdIndex + 1, 0, this.rowDragAndDropModule['draggedRecord']);
+                }
+            }
+            var sortArgs = { modifiedData: modifiedData, filteredData: results, srtQry: query };
+            this.notify('createSort', sortArgs);
+            results = isRemoteData(this) ? this.dataResults : sortArgs.modifiedData;
+        }
+        return isRemoteData(this) ? this.dataResults.result.filter(function (item) { return !item.isSummaryRow; })
+            : results.filter(function (item) { return !item.isSummaryRow; });
+    };
+    /**
+     * Retrieves the processed Tree Grid data based on current operations such as
+     * sorting, filtering, and searching. Maintains hierarchy and current structure.
+     *
+     * For local data: when skipPage is true (the default), it returns all available records;
+     * when skipPage is false, it returns only the records for the current page.
+     * For remote data: it always returns only the records for the current page.
+     *
+     * @param {boolean} skipPage - if set to false, returns only the records for the current page.
+     * @returns {ITreeData[]} - Array of tree records (summary rows excluded).
+     * @hidden
+     */
+    TreeGrid.prototype.getProcessedRecords = function (skipPage) {
+        var _this = this;
+        var result;
+        if (skipPage !== true || isRemoteData(this)) {
+            result = this.getData();
+            var dm = new DataManager(result);
+            var expanded = new Predicate$1('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
+            var parents_1 = dm.executeLocal(new Query().where(expanded));
+            var visualData = parents_1.filter(function (e) {
+                return getExpandStatus(_this, e);
+            });
+            var query = new Query();
+            if (this.allowPaging || this.enableVirtualization || this.enableInfiniteScrolling) {
+                var pageSize = this.grid.pageSettings.pageSize;
+                var currentPage = this.grid.pageSettings.currentPage;
+                if (visualData.length < (currentPage * pageSize)) {
+                    currentPage = (Math.floor(visualData.length / pageSize)) + ((visualData.length % pageSize) ? 1 : 0);
+                    currentPage = currentPage ? currentPage : 1;
+                    this.grid.setProperties({ pageSettings: { currentPage: currentPage } }, true);
+                }
+                var skip = pageSize * (currentPage - 1);
+                query = query.skip(skip).take(pageSize);
+            }
+            dm.dataSource.json = visualData;
+            result = dm.executeLocal(query);
+        }
+        else {
+            result = this.getData();
+        }
+        return result;
+    };
     /**
      * Retrieves all the TreeGrid row elements.
      *
@@ -10821,10 +10910,16 @@ var RowDD = /** @__PURE__ @class */ (function () {
             var droppedRecord = void 0;
             if (isNullOrUndefined(args.dropIndex)) {
                 var primaryKeyField = this.parent.getPrimaryKeyFieldNames()[0];
-                var rowIndex = tObj.selectedRowIndex === -1 ?
+                var rowIndex_1 = tObj.selectedRowIndex === -1 ?
                     (this.parent.grid.getRowIndexByPrimaryKey(args.data[0]["" + primaryKeyField])) - 1
                     : tObj.getSelectedRowIndexes()[0] - 1;
-                var record = tObj.getCurrentViewRecords()[parseInt(rowIndex.toString(), 10)];
+                var record = void 0;
+                if (this.parent.enableVirtualization) {
+                    record = tObj.getCurrentViewRecords().find(function (e) { return e.index === rowIndex_1; });
+                }
+                else {
+                    record = tObj.getCurrentViewRecords()[parseInt(rowIndex_1.toString(), 10)];
+                }
                 this.getParentData(record, args.data);
             }
             else {
@@ -15299,7 +15394,11 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             && this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || !isCountRequired(this.parent)) {
             this.parent["" + action]('data-ready', this.onDataReady, this);
             this.parent["" + action]('refresh-virtual-block', this.refreshContentRows, this);
+            this.parent.on(destroy, this.destroy, this);
             this.fn = function () {
+                if (_this.parent.root.enableSeamlessScrolling) {
+                    window.addEventListener('resize', _this.updateScrollbar.bind(_this));
+                }
                 _this.observers.observes(function (scrollArgs) { return _this.scrollListeners(scrollArgs); }, _this.onEnteredAction(), _this.parent);
                 var gObj = _this.parent;
                 if (gObj.root.enablePersistence && gObj.root.scrollPosition) {
@@ -15349,6 +15448,10 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         var virtualCellFocus = 'virtualCellFocus';
         _super.prototype["" + virtualCellFocus].call(this, e);
     };
+    VirtualTreeContentRenderer.prototype.updateScrollbar = function () {
+        var updateScrollbarOnResize = 'updateScrollbarOnResize';
+        _super.prototype["" + updateScrollbarOnResize].call(this);
+    };
     /**
      * Handles the data ready event for the virtual tree grid content renderer.
      *
@@ -15389,9 +15492,6 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.renderTable.call(this);
         if (!(this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
             && this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || !isCountRequired(this.parent)) {
-            if (this.observers) {
-                this.observers.disconnect();
-            }
             getValue('observer', this).options.debounceEvent = false;
             this.observers = new TreeInterSectionObserver(getValue('observer', this).element, getValue('observer', this).options);
             this.contents = this.getPanel().firstChild;
@@ -15472,7 +15572,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         }
         var treeGridParent = this.parent.clipboardModule['treeGridParent'];
         if (isNullOrUndefined(treeGridParent.editModule) ||
-            isNullOrUndefined(treeGridParent.editModule['addRowIndex']) || args.selectedIndex !== 0) {
+            isNullOrUndefined(treeGridParent.editModule['addRowIndex']) || args.selectedIndex !== -1) {
             if (!isNullOrUndefined(treeGridParent.grid.sortModule) && treeGridParent.grid.sortModule['sortedColumns'].length > 0) {
                 var sortedData = treeGridParent.dataModule['sortedData'];
                 if (!isNullOrUndefined(sortedData) && sortedData.length > 0) {
@@ -15772,16 +15872,28 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                     var maxLeft = _this.vgenerator.cOffsets[idx - 1];
                     x = x > maxLeft ? maxLeft : x; //TODO: This fix horizontal scrollbar jumping issue in column virtualization.
                 }
-                var y = _this.getTranslateY(e.top, height, xAxis && top_1 === e.top ? _this.prevInfo : undefined, true);
+                var isRowScrollAction = _this.prevInfo && _this.prevInfo.page === 1 &&
+                    (direction !== _this.prevInfo.direction || direction !== _this.prevInfo.direction);
+                var translateY = _this.getTranslateY(e.top, height, xAxis && top_1 === e.top ? _this.prevInfo : undefined, isRowScrollAction ? false : true);
                 if (!_this.parent.isFrozenGrid() || _this.parent.enableVirtualMaskRow) {
                     if (_this.parent.enableVirtualMaskRow) {
                         var upScroll = (e.top - _this.translateY) < 0;
-                        y = (Math.round(_this.translateY) > y && !upScroll) ? Math.round(_this.translateY) : y;
-                        _this.virtualEle.adjustTable(x, y);
+                        translateY = (Math.round(_this.translateY) > translateY && !upScroll) ? Math.round(_this.translateY) : translateY;
+                        _this.virtualEle.adjustTable(x, translateY);
                     }
                     else {
                         _this.virtualEle.adjustTable(x, _this.translateY);
                     }
+                    var wrapperBottom = _this.virtualEle.wrapper.getBoundingClientRect().bottom;
+                    var contentBottom = _this.virtualEle.content.getBoundingClientRect().bottom;
+                    if (direction === 'up' && _this.prevInfo.page === Math.ceil(_this.getTotalBlocks() / 2) &&
+                        Math.round(wrapperBottom) < Math.round(contentBottom)) {
+                        var bottomGap = Math.round(contentBottom) - Math.round(wrapperBottom);
+                        var adjustedTranslateY = Math.min(translateY + bottomGap, _this.offsets[_this['maxBlock']]);
+                        if (adjustedTranslateY !== translateY) {
+                            _this.virtualEle.adjustTable(x, adjustedTranslateY);
+                        }
+                    }
                     if (_this.parent.enableColumnVirtualization) {
                         _this.header.virtualEle.adjustTable(x, 0);
                         if (_this.parent.isFrozenGrid()) {
@@ -16110,10 +16222,17 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         this.parent.off('refresh-virtual-editform-cells', this.refreshCell);
         this.parent.off('virtaul-cell-focus', this.cellFocus);
         this.parent.off('virtual-scroll-edit', this.restoreEditState);
-        if (this.observers) {
-            this.observers.disconnect();
+        this.parent.off(destroy, this.destroy);
+        if (this.parent.root.enableSeamlessScrolling) {
+            window.removeEventListener('resize', this.updateScrollbar);
         }
     };
+    VirtualTreeContentRenderer.prototype.destroy = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.removeEventListener();
+    };
     return VirtualTreeContentRenderer;
 }(VirtualContentRenderer));
 var TreeInterSectionObserver = /** @__PURE__ @class */ (function (_super) {
@@ -16126,6 +16245,9 @@ var TreeInterSectionObserver = /** @__PURE__ @class */ (function (_super) {
         _this.timer = 0;
         return _this;
     }
+    TreeInterSectionObserver.prototype.onWheelEvent = function () {
+        this.isWheeling = true;
+    };
     /**
      * Sets up observers to monitor scroll events on a given container
      * and its movable companion within a virtual grid setup.
@@ -16138,28 +16260,28 @@ var TreeInterSectionObserver = /** @__PURE__ @class */ (function (_super) {
     TreeInterSectionObserver.prototype.observes = function (callback, onEnterCallback, instance) {
         var containerRect = 'containerRect';
         _super.prototype["" + containerRect] = getValue('options', this).container.getBoundingClientRect();
-        this.containerEl = getValue('options', this).container;
-        this.containerScrollHandler = this.virtualScrollHandlers(callback, onEnterCallback, instance);
-        EventHandler.add(this.containerEl, 'scroll', this.containerScrollHandler, this);
-        if (getValue('options', this).movableContainer) {
-            var movableContainerRect = 'movableContainerRect';
-            _super.prototype["" + movableContainerRect] = getValue('options', this).movableContainer.getBoundingClientRect();
-            this.movableContainerEl = getValue('options', this).movableContainer;
-            this.movableScrollHandler = this.virtualScrollHandlers(callback, onEnterCallback, instance);
-            EventHandler.add(this.movableContainerEl, 'scroll', this.movableScrollHandler, this);
-        }
-    };
-    TreeInterSectionObserver.prototype.disconnect = function () {
-        if (this.containerEl && this.containerScrollHandler) {
-            EventHandler.remove(this.containerEl, 'scroll', this.containerScrollHandler);
-            this.containerScrollHandler = null;
+        var options = getValue('options', this);
+        EventHandler.add(options.container, 'wheel', this.onWheelEvent, this);
+        if (!isNullOrUndefined(options.horizontalScrollbar)) {
+            EventHandler.add(options.horizontalScrollbar, 'wheel', this.onWheelEvent, this);
+            EventHandler.add(options.horizontalScrollbar, 'scroll', this.onVirtualContentScrolling(), this);
         }
-        if (this.movableContainerEl && this.movableScrollHandler) {
-            EventHandler.remove(this.movableContainerEl, 'scroll', this.movableScrollHandler);
-            this.movableScrollHandler = null;
+        if (!isNullOrUndefined(options.verticalScrollbar)) {
+            EventHandler.add(options.verticalScrollbar, 'wheel', this.onWheelEvent, this);
+            EventHandler.add(options.verticalScrollbar, 'scroll', this.onVirtualContentScrolling(), this);
         }
-        this.containerEl = null;
-        this.movableContainerEl = null;
+        EventHandler.add(options.container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback, instance), this);
+    };
+    TreeInterSectionObserver.prototype.onVirtualContentScrolling = function () {
+        var _this = this;
+        return function (e) {
+            if (e.target.classList.contains('e-virtual-vertical-scrollbar')) {
+                getValue('options', _this).container.scrollTop = e.target.scrollTop;
+            }
+            if (e.target.classList.contains('e-virtual-horizontal-scrollbar')) {
+                getValue('options', _this).container.scrollLeft = e.target.scrollLeft;
+            }
+        };
     };
     /**
      * Clears the last known position.
@@ -16205,6 +16327,12 @@ var TreeInterSectionObserver = /** @__PURE__ @class */ (function (_super) {
             direction = _this["" + options].prevLeft === left ? direction : _this["" + options].prevLeft < left ? 'right' : 'left';
             _this["" + options].prevTop = top;
             _this["" + options].prevLeft = left;
+            if (!isNullOrUndefined(_this["" + options].verticalScrollbar)) {
+                _this["" + options].verticalScrollbar.scrollTop = _this["" + options].container.scrollTop;
+            }
+            if (!isNullOrUndefined(_this["" + options].horizontalScrollbar)) {
+                _this["" + options].horizontalScrollbar.scrollLeft = _this["" + options].container.scrollLeft;
+            }
             var current = _this.sentinelInfo["" + direction];
             var delta = 0;
             _this.newPos = top;