@syncfusion/ej2-treegrid 32.2.9 → 33.1.44

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

@@ -1,5 +1,5 @@
 import { merge, Property, 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 { Logger as Logger$1, Grid, 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, RowDD as RowDD$1, Scroll, VirtualRowModelGenerator, Filter as Filter$1, ExcelExport as ExcelExport$1, Data, ExportHelper, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, Aggregate as Aggregate$1, calculateAggregate, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, Edit as Edit$1, resetRowIndex, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, VirtualContentRenderer, Cell, getVisiblePage, InterSectionObserver, getTransformValues, VirtualScroll as VirtualScroll$1, RenderType, VirtualHeaderRenderer, ColumnChooser as ColumnChooser$1, InfiniteScroll as InfiniteScroll$1, getRowIndexFromElement, RowRenderer } from '@syncfusion/ej2-grids';
+import { Logger as Logger$1, Grid, 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, RowDD as RowDD$1, Scroll, VirtualRowModelGenerator, Filter as Filter$1, ExcelExport as ExcelExport$1, Data, ExportHelper, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, Aggregate as Aggregate$1, calculateAggregate, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, Edit as Edit$1, resetRowIndex, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, VirtualContentRenderer, Cell, getVisiblePage, InterSectionObserver, getTransformValues, VirtualScroll as VirtualScroll$1, RenderType, VirtualHeaderRenderer, ColumnChooser as ColumnChooser$1, InfiniteScroll as InfiniteScroll$1, getRowIndexFromElement, RowRenderer } 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';
@@ -3136,7 +3136,6 @@ class DataManipulation {
         let results = dataObj instanceof DataManager ? dataObj.dataSource.json : dataObj;
         let count = isCountRequired(this.parent) ? getValue('count', this.parent.dataSource)
             : results.length;
-        const qry = new Query();
         let gridQuery = getObject('query', args);
         let filterQuery;
         let searchQuery;
@@ -3152,11 +3151,7 @@ class DataManipulation {
                 gridQuery = getValue('grid.renderModule.data', this.parent).filterQuery(gridQuery);
                 gridQuery = getValue('grid.renderModule.data', this.parent).searchQuery(gridQuery);
             }
-            const fltrQuery = gridQuery.queries.filter((q) => q.fn === 'onWhere');
-            const srchQuery = gridQuery.queries.filter((q) => q.fn === 'onSearch');
-            qry.queries = fltrQuery.concat(srchQuery);
-            const 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) {
@@ -3181,34 +3176,8 @@ class DataManipulation {
         }
         if (this.parent.grid.sortSettings.columns.length > 0 || this.isSortAction) {
             this.isSortAction = false;
-            const parentData = this.parent.parentData;
             const query = getObject('query', args);
-            const srtQry = new Query();
-            for (let srt = this.parent.grid.sortSettings.columns.length - 1; srt >= 0; srt--) {
-                const getColumnByField = 'getColumnByField';
-                const col = this.parent.grid.renderModule.data[`${getColumnByField}`](this.parent.grid.
-                    sortSettings.columns[parseInt(srt.toString(), 10)].field);
-                const 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);
-            }
-            const 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') {
-                const dragdIndex = modifiedData.indexOf(this.parent.rowDragAndDropModule['draggedRecord']);
-                modifiedData.splice(dragdIndex, 1);
-                const 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']);
-                }
-            }
-            const 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', {});
@@ -4038,6 +4007,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.isComponentRefresh = false;
         this.isVirtualExpandCollapse = false;
         this.isInfiniteCollapse = false;
+        /** @hidden */
+        this.enableSeamlessScrolling = false;
         this.objectEqualityChecker = (old, current) => {
             if (old) {
                 const keys = Object.keys(old);
@@ -4781,7 +4752,15 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.renderModule = new Render(this);
         this.dataModule = new DataManipulation(this);
         this.printModule = new Print(this);
-        this.trigger(load);
+        if (this.enableVirtualization || this.enableColumnVirtualization) {
+            const 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)) {
@@ -5047,6 +5026,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid.clipMode = getActualProperties(this.clipMode);
         this.grid.enableColumnSpan = this.enableColumnSpan;
         this.grid.enableRowSpan = this.enableRowSpan;
+        this.grid.enableSeamlessScrolling = this.enableSeamlessScrolling;
         const templateInstance = 'templateDotnetInstance';
         this.grid[`${templateInstance}`] = this[`${templateInstance}`];
         const isJsComponent = 'isJsComponent';
@@ -5518,7 +5498,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
             this.notify('updateGridActions', args);
             this.isVirtualExpandCollapse = false;
-            if (args.requestType === 'save' && this.aggregates.map((ag) => ag.showChildSummary === true).length) {
+            if (args.requestType === 'save' && this.aggregates.some((ag) => ag.showChildSummary === true)) {
                 this.grid.refresh();
             }
             if ((args.action === 'clearFilter' || args.action === 'clear-filter' || args.requestType === 'sorting') && this.enableInfiniteScrolling) {
@@ -6257,6 +6237,114 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         }
     }
+    /**
+     * 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
+     */
+    getData(args) {
+        const dataObj = isCountRequired(this) ? getValue('result', this.grid.dataSource)
+            : this.grid.dataSource;
+        let results = dataObj instanceof DataManager ? dataObj.dataSource.json : dataObj;
+        const gridQuery = (!isNullOrUndefined(args) && args.query) ? args.query : this.getDataModule().baseModule.generateQuery();
+        let filterQuery;
+        let searchQuery;
+        if (!isNullOrUndefined(gridQuery)) {
+            filterQuery = gridQuery.queries.filter((q) => q.fn === 'onWhere');
+            searchQuery = gridQuery.queries.filter((q) => q.fn === 'onSearch');
+        }
+        const 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))) {
+            const filterQuery = gridQuery.queries.filter((q) => q.fn === 'onWhere');
+            const searchQuery = gridQuery.queries.filter((q) => q.fn === 'onSearch');
+            const query = new Query();
+            query.queries = filterQuery.concat(searchQuery);
+            const 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((item) => !item.isSummaryRow)
+                    : results.filter((item) => !item.isSummaryRow);
+            }
+        }
+        const sortQuery = gridQuery.queries.filter((q) => q.fn === 'onSortBy');
+        if (this.grid.sortSettings.columns.length > 0 || sortQuery.length) {
+            const parentData = this.parentData;
+            const query = new Query();
+            query.queries = sortQuery;
+            const modifiedData = new DataManager(parentData).executeLocal(query);
+            if (this.allowRowDragAndDrop && !isNullOrUndefined(this.rowDragAndDropModule['draggedRecord']) &&
+                this.rowDragAndDropModule['droppedRecord'].hasChildRecords && this.rowDragAndDropModule['dropPosition'] !== 'middleSegment') {
+                const dragdIndex = modifiedData.indexOf(this.rowDragAndDropModule['draggedRecord']);
+                modifiedData.splice(dragdIndex, 1);
+                const 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']);
+                }
+            }
+            const 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((item) => !item.isSummaryRow)
+            : results.filter((item) => !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
+     */
+    getProcessedRecords(skipPage) {
+        let result;
+        if (skipPage !== true || isRemoteData(this)) {
+            result = this.getData();
+            const dm = new DataManager(result);
+            const expanded = new Predicate$1('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
+            const parents = dm.executeLocal(new Query().where(expanded));
+            const visualData = parents.filter((e) => {
+                return getExpandStatus(this, e);
+            });
+            let query = new Query();
+            if (this.allowPaging || this.enableVirtualization || this.enableInfiniteScrolling) {
+                const pageSize = this.grid.pageSettings.pageSize;
+                let 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);
+                }
+                const 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.
      *
@@ -10448,7 +10536,13 @@ class RowDD {
                 const rowIndex = tObj.selectedRowIndex === -1 ?
                     (this.parent.grid.getRowIndexByPrimaryKey(args.data[0][`${primaryKeyField}`])) - 1
                     : tObj.getSelectedRowIndexes()[0] - 1;
-                const record = tObj.getCurrentViewRecords()[parseInt(rowIndex.toString(), 10)];
+                let record;
+                if (this.parent.enableVirtualization) {
+                    record = tObj.getCurrentViewRecords().find((e) => e.index === rowIndex);
+                }
+                else {
+                    record = tObj.getCurrentViewRecords()[parseInt(rowIndex.toString(), 10)];
+                }
                 this.getParentData(record, args.data);
             }
             else {
@@ -14807,7 +14901,11 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             && 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 = () => {
+                if (this.parent.root.enableSeamlessScrolling) {
+                    window.addEventListener('resize', this.updateScrollbar.bind(this));
+                }
                 this.observers.observes((scrollArgs) => this.scrollListeners(scrollArgs), this.onEnteredAction(), this.parent);
                 const gObj = this.parent;
                 if (gObj.root.enablePersistence && gObj.root.scrollPosition) {
@@ -14857,6 +14955,10 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         const virtualCellFocus = 'virtualCellFocus';
         super[`${virtualCellFocus}`](e);
     }
+    updateScrollbar() {
+        const updateScrollbarOnResize = 'updateScrollbarOnResize';
+        super[`${updateScrollbarOnResize}`]();
+    }
     /**
      * Handles the data ready event for the virtual tree grid content renderer.
      *
@@ -14897,9 +14999,6 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         super.renderTable();
         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;
@@ -14980,7 +15079,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         }
         const 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) {
                 const sortedData = treeGridParent.dataModule['sortedData'];
                 if (!isNullOrUndefined(sortedData) && sortedData.length > 0) {
@@ -15279,16 +15378,28 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                     const maxLeft = this.vgenerator.cOffsets[idx - 1];
                     x = x > maxLeft ? maxLeft : x; //TODO: This fix horizontal scrollbar jumping issue in column virtualization.
                 }
-                let y = this.getTranslateY(e.top, height, xAxis && top === e.top ? this.prevInfo : undefined, true);
+                const isRowScrollAction = this.prevInfo && this.prevInfo.page === 1 &&
+                    (direction !== this.prevInfo.direction || direction !== this.prevInfo.direction);
+                let translateY = this.getTranslateY(e.top, height, xAxis && top === e.top ? this.prevInfo : undefined, isRowScrollAction ? false : true);
                 if (!this.parent.isFrozenGrid() || this.parent.enableVirtualMaskRow) {
                     if (this.parent.enableVirtualMaskRow) {
                         const 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);
                     }
+                    const wrapperBottom = this.virtualEle.wrapper.getBoundingClientRect().bottom;
+                    const contentBottom = this.virtualEle.content.getBoundingClientRect().bottom;
+                    if (direction === 'up' && this.prevInfo.page === Math.ceil(this.getTotalBlocks() / 2) &&
+                        Math.round(wrapperBottom) < Math.round(contentBottom)) {
+                        const bottomGap = Math.round(contentBottom) - Math.round(wrapperBottom);
+                        const 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()) {
@@ -15617,10 +15728,17 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         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);
         }
     }
+    destroy() {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.removeEventListener();
+    }
 }
 class TreeInterSectionObserver extends InterSectionObserver {
     constructor() {
@@ -15630,6 +15748,9 @@ class TreeInterSectionObserver extends InterSectionObserver {
         this.lastPos = 0;
         this.timer = 0;
     }
+    onWheelEvent() {
+        this.isWheeling = true;
+    }
     /**
      * Sets up observers to monitor scroll events on a given container
      * and its movable companion within a virtual grid setup.
@@ -15642,28 +15763,27 @@ class TreeInterSectionObserver extends InterSectionObserver {
     observes(callback, onEnterCallback, instance) {
         const containerRect = 'containerRect';
         super[`${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) {
-            const movableContainerRect = 'movableContainerRect';
-            super[`${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);
+        const 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);
         }
-    }
-    disconnect() {
-        if (this.containerEl && this.containerScrollHandler) {
-            EventHandler.remove(this.containerEl, 'scroll', this.containerScrollHandler);
-            this.containerScrollHandler = null;
+        if (!isNullOrUndefined(options.verticalScrollbar)) {
+            EventHandler.add(options.verticalScrollbar, 'wheel', this.onWheelEvent, this);
+            EventHandler.add(options.verticalScrollbar, 'scroll', this.onVirtualContentScrolling(), this);
         }
-        if (this.movableContainerEl && this.movableScrollHandler) {
-            EventHandler.remove(this.movableContainerEl, 'scroll', this.movableScrollHandler);
-            this.movableScrollHandler = null;
-        }
-        this.containerEl = null;
-        this.movableContainerEl = null;
+        EventHandler.add(options.container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback, instance), this);
+    }
+    onVirtualContentScrolling() {
+        return (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.
@@ -15708,6 +15828,12 @@ class TreeInterSectionObserver extends InterSectionObserver {
             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;
+            }
             const current = this.sentinelInfo[`${direction}`];
             let delta = 0;
             this.newPos = top;