@syncfusion/ej2-navigations 34.1.30 → 34.2.2

package/src/treeview/treeview.js

@@ -30,6 +30,7 @@ import { ListBase } from '@syncfusion/ej2-lists';
 import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
 import { Input } from '@syncfusion/ej2-inputs';
 import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Skeleton } from '@syncfusion/ej2-notifications';
 var ROOT = 'e-treeview';
 var CONTROL = 'e-control';
 var COLLAPSIBLE = 'e-icon-collapsible';
@@ -82,6 +83,9 @@ var CHILD = 'e-has-child';
 var ITEM_ANIMATION_ACTIVE = 'e-animation-active';
 var DISABLED = 'e-disabled';
 var PREVENTSELECT = 'e-prevent';
+var VIRTUALIZATION = 'e-virtualization';
+var VIRTUAL_MASK_PARENT = 'e-mask-parent';
+var VIRTUAL_MASK_ITEM = 'e-mask-item';
 var treeAriaAttr = {
     treeRole: 'group',
     itemRole: 'treeitem',
@@ -224,6 +228,55 @@ var TreeView = /** @class */ (function (_super) {
         _this.isDropIn = false;
         _this.OldCheckedData = [];
         _this.isHiddenItem = false;
+        // ── Virtualization state ──────────────────────────────────────────────────────────────
+        /** Flat ordered list of all currently-visible (non-collapsed) tree nodes. */
+        _this.virtualFlatNodes = [];
+        /** Maps node id → index in virtualFlatNodes for O(1) lookups. */
+        _this.virtualNodeMap = new Map();
+        /** Set of expanded node IDs for O(1) lookup performance during flattening (avoids array indexOf). */
+        _this.virtualExpandedNodesSet = new Set();
+        /** Set of checked node IDs for O(1) lookup performance during flattening. */
+        _this.virtualCheckedNodesSet = new Set();
+        /** Set of indeterminate node IDs — persists across flattenVisibleNodes() rebuilds. */
+        _this.virtualIndeterminateNodesSet = new Set();
+        /** Set of selected node IDs for O(1) lookup performance during flattening. */
+        _this.virtualSelectedNodesSet = new Set();
+        /** Row height in pixels, measured from the first rendered item or set to 40 as a default. */
+        _this.virtualItemHeight = 40;
+        /** Height of the scrollable container in pixels. */
+        _this.virtualViewportHeight = 0;
+        /** scrollTop captured during the previous scroll handler invocation. */
+        _this.virtualPrevScrollTop = 0;
+        /** Index of the first rendered row in the current window. */
+        _this.virtualStartIndex = 0;
+        /** Index one past the last rendered row in the current window. */
+        _this.virtualEndIndex = 0;
+        /** Extra rows rendered above and below the visible window to smooth scrolling. */
+        _this.virtualOverscanCount = 3;
+        /** RequestAnimationFrame handle used for throttling scroll events. */
+        _this.virtualScrollRAF = null;
+        /** The `.e-mask-parent` overlay element shown during fast scroll. */
+        _this.virtualMaskElement = null;
+        /** Bound scroll handler stored for later removeEventListener. */
+        _this.virtualScrollBound = null;
+        /** Skeleton component instances inside the mask overlay. */
+        _this.skeletonInstances = [];
+        /** Set to true whenever the flat node list must be rebuilt on next render. */
+        _this.virtualTreeDirty = false;
+        /** The data-uid of the currently keyboard-focused node in virtual mode (persists across re-renders). */
+        _this.virtualFocusedId = null;
+        /**
+         * Set to true by the document-level `keydown` handler when the user presses
+         * the Tab key.  The browser will auto-scroll the focused element into view
+         * immediately after focus, which fires a `scroll` event on the TreeView
+         * container.  We want to skip the re-render that the virtual scroll handler
+         * would otherwise trigger, because the element being focused is already
+         * rendered (it is the single `<li tabindex="0">` of the current window) and
+         * re-rendering would tear down the DOM element that is currently holding
+         * focus.  The flag is consumed (reset to `false`) inside `onVirtualScroll`
+         * after the auto-scroll has been handled.
+         */
+        _this.virtualSkipNextScrollRender = false;
         return _this;
     }
     TreeView_1 = TreeView;
@@ -525,6 +578,24 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.renderItems = function (isSorted) {
+        // In virtual mode (with a fixed height) create only the container <ul> —
+        // initVirtualization will populate the items directly, avoiding the O(n)
+        // ListBase.createList cost.
+        // updateCheckedStateFromDS / updateParentCheckState are intentionally skipped here:
+        // they call getCheckedNodeDetails which traverses the DOM (no DOM exists yet in
+        // virtual mode) and would throw on empty recursion results. The initial checked
+        // state is derived from the raw data inside flattenNodeRecursive instead.
+        //
+        // When enableVirtualization is true but height is NOT provided, we fall through
+        // to the normal (non-virtualized) rendering path so the tree is still visible.
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            this.ulElement = this.createElement('ul', {
+                className: PARENTITEM + ' ' + 'e-ul',
+                attrs: { role: 'group' }
+            });
+            this.element.appendChild(this.ulElement);
+            return;
+        }
         this.listBaseOption.ariaAttributes.level = 1;
         var sortedData = this.getSortedData(this.rootData);
         this.ulElement = ListBase.createList(this.createElement, isSorted ? this.rootData : sortedData, this.listBaseOption);
@@ -1571,7 +1642,7 @@ var TreeView = /** @class */ (function (_super) {
         else if (state === 'indeterminate' && this.autoCheck) {
             frameSpan.classList.remove(CHECK);
             frameSpan.classList.add(INDETERMINATE);
-            this.removeCheck(currLi);
+            this.removeCheck(currLi, true);
             ariaState = 'mixed';
         }
         ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;
@@ -1602,12 +1673,110 @@ var TreeView = /** @class */ (function (_super) {
         if (!isNOU(id) && this.checkedNodes.indexOf(id) === -1) {
             this.checkDisabledState(id);
         }
+        if (this.enableVirtualization) {
+            // Clear any indeterminate state — node is now fully checked
+            this.virtualIndeterminateNodesSet.delete(id);
+            var actualIndex = this.virtualNodeMap.get(id);
+            if (!isNOU(actualIndex) && actualIndex > -1) {
+                this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].isChecked = true;
+                if (this.autoCheck && this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].hasChildren) {
+                    this.setVirtualChildCheckState(id, true);
+                }
+            }
+        }
     };
-    TreeView.prototype.removeCheck = function (liEle) {
-        var index = this.checkedNodes.indexOf(liEle.getAttribute('data-uid'));
+    TreeView.prototype.removeCheck = function (liEle, isIndeterminate) {
+        var id = liEle.getAttribute('data-uid');
+        var index = this.checkedNodes.indexOf(id);
         if (index > -1) {
             this.checkedNodes.splice(index, 1);
         }
+        if (this.enableVirtualization) {
+            var actualIndex = this.virtualNodeMap.get(id);
+            if (!isNOU(actualIndex) && actualIndex > -1) {
+                if (isIndeterminate) {
+                    // Parent is transitioning to indeterminate — preserve children states
+                    // and mark this node as 'indeterminate' so scroll/collapse re-renders correctly.
+                    this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].isChecked = 'indeterminate';
+                    // Also record it in the persistent indeterminate set so flattenVisibleNodes()
+                    // can restore this state after a full rebuild (e.g. on collapse).
+                    this.virtualIndeterminateNodesSet.add(id);
+                }
+                else {
+                    // Node is being fully unchecked — clear indeterminate tracking too
+                    this.virtualIndeterminateNodesSet.delete(id);
+                    this.virtualCheckedNodesSet.delete(id);
+                    this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].isChecked = false;
+                    this.treeData[parseInt(id.toString(), 10) - 1].isChecked = false;
+                    if (this.autoCheck && this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].hasChildren) {
+                        this.setVirtualChildCheckState(id, false);
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * Recursively sets the `isChecked` state of all descendants of the node with
+     * `parentId` in `virtualFlatNodes`, keeping `checkedNodes` and
+     * `virtualCheckedNodesSet` in sync.  Used in virtual mode to honor the
+     * `autoCheck` cascade when a parent checkbox is toggled.
+     *
+     * @param {string} parentId - The `data-uid` of the parent whose descendants should be updated.
+     * @param {boolean} isChecked - The new state to apply to every descendant.
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.setVirtualChildCheckState = function (parentId, isChecked) {
+        if (!this.virtualFlatNodes || this.virtualFlatNodes.length === 0) {
+            return;
+        }
+        for (var i = 0; i < this.virtualFlatNodes.length; i++) {
+            var node = this.virtualFlatNodes[parseInt(i.toString(), 10)];
+            if (node.parentId === parentId) {
+                node.isChecked = isChecked;
+                if (isChecked) {
+                    this.virtualCheckedNodesSet.add(node.id);
+                    if (this.checkedNodes && this.checkedNodes.indexOf(node.id) === -1) {
+                        this.checkedNodes.push(node.id);
+                    }
+                }
+                else {
+                    this.virtualCheckedNodesSet.delete(node.id);
+                    var idx = this.checkedNodes ? this.checkedNodes.indexOf(node.id) : -1;
+                    if (idx !== -1) {
+                        this.checkedNodes.splice(idx, 1);
+                    }
+                }
+                if (node.hasChildren) {
+                    this.setVirtualChildCheckState(node.id, isChecked);
+                }
+            }
+        }
+        // Collapsed children are not present in virtualFlatNodes, so walk the raw data
+        // to keep this.treeData and checkedNodes in sync for hidden descendants too.
+        var collapsedChildren = this.getChildNodes(this.treeData, parentId);
+        if (collapsedChildren) {
+            for (var i = 0; i < collapsedChildren.length; i++) {
+                var childId = collapsedChildren[parseInt(i.toString(), 10)][this.fields.id]
+                    ? collapsedChildren[parseInt(i.toString(), 10)][this.fields.id].toString()
+                    : null;
+                if (childId && (!this.virtualNodeMap || !this.virtualNodeMap.has(childId))) {
+                    this.updateField(this.treeData, this.fields, childId, this.fields.isChecked, isChecked);
+                    if (isChecked) {
+                        if (this.checkedNodes && this.checkedNodes.indexOf(childId) === -1) {
+                            this.checkedNodes.push(childId);
+                        }
+                    }
+                    else {
+                        var idx = this.checkedNodes ? this.checkedNodes.indexOf(childId) : -1;
+                        if (idx !== -1) {
+                            this.checkedNodes.splice(idx, 1);
+                        }
+                    }
+                    this.setVirtualChildCheckState(childId, isChecked);
+                }
+            }
+        }
     };
     TreeView.prototype.getCheckEvent = function (currLi, action, e) {
         this.checkActionNodes.push(this.getNodeData(currLi));
@@ -1639,6 +1808,9 @@ var TreeView = /** @class */ (function (_super) {
             return;
         }
         var liEle = ulEle ? selectAll('.' + LISTITEM, ulEle) : this.liList;
+        if (!liEle) {
+            return;
+        }
         var length = liEle.length;
         for (var i = 0; i < length; i++) {
             this.calculateWrap(liEle[parseInt(i.toString(), 10)]);
@@ -1727,6 +1899,10 @@ var TreeView = /** @class */ (function (_super) {
         }
         this.isLoaded = true;
         this.isNodeDropped = false;
+        // Initialise (or re-initialise) virtual mode after data binding has settled
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            this.initVirtualization();
+        }
     };
     TreeView.prototype.doSelectionAction = function () {
         var sNodes = selectAll('.' + SELECTED, this.element);
@@ -1861,8 +2037,18 @@ var TreeView = /** @class */ (function (_super) {
         };
         this.trigger('nodeClicked', eventArgs);
     };
-    TreeView.prototype.expandNode = function (currLi, icon, loaded) {
+    TreeView.prototype.expandNode = function (currLi, icon, loaded, isKeyboardNav) {
         var _this = this;
+        // Virtual mode fast-path: rebuild the flat list and re-render the window.
+        // Only engage when height is also set; without a fixed height the tree falls
+        // back to normal rendering and the standard expand path must be used.
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            var id = currLi ? currLi.getAttribute('data-uid') : null;
+            if (id) {
+                this.handleVirtualExpand(id, isKeyboardNav);
+            }
+            return;
+        }
         this.renderReactTemplates();
         if (icon.classList.contains(LOAD)) {
             this.hideSpinner(icon);
@@ -1970,16 +2156,30 @@ var TreeView = /** @class */ (function (_super) {
                     removeClass([icon], PROCESS);
                 }
                 else {
-                    _this.nodeCollapseAction(currLi, icon, observedArgs);
+                    // Detect if event is keyboard navigation by checking for 'action' property
+                    var isKeyboardNav = e && e.action !== undefined;
+                    _this.nodeCollapseAction(currLi, icon, observedArgs, isKeyboardNav);
                 }
             });
         }
         else {
-            this.nodeCollapseAction(currLi, icon, colArgs);
+            // Detect if event is keyboard navigation by checking for 'action' property
+            var isKeyboardNav = e && e.action !== undefined;
+            this.nodeCollapseAction(currLi, icon, colArgs, isKeyboardNav);
         }
     };
-    TreeView.prototype.nodeCollapseAction = function (currLi, icon, colArgs) {
+    TreeView.prototype.nodeCollapseAction = function (currLi, icon, colArgs, isKeyboardNav) {
         var _this = this;
+        // Virtual mode fast-path: rebuild the flat list and re-render the window.
+        // Only engage when height is also set; without a fixed height the tree falls
+        // back to normal rendering and the standard collapse path must be used.
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            var id = currLi ? currLi.getAttribute('data-uid') : null;
+            if (id) {
+                this.handleVirtualCollapse(id, isKeyboardNav);
+            }
+            return;
+        }
         removeClass([icon], COLLAPSIBLE);
         addClass([icon], EXPANDABLE);
         var start = 0;
@@ -2348,7 +2548,9 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.selectNode = function (li, e, multiSelect) {
         var _this = this;
         if (isNOU(li) || (!this.allowMultiSelection && this.isActive(li) && !isNOU(e))) {
-            if (this.checkOnClick) {
+            var isDropDownTree = this.element.closest('.e-ddt');
+            var handleCheckOnClick = isDropDownTree ? (this.checkOnClick && this.showCheckBox) : this.checkOnClick;
+            if (handleCheckOnClick) {
                 var checkboxElement = select(' .' + CHECKBOXFRAME, li);
                 if (!isNOU(checkboxElement) && checkboxElement.classList.contains(CHECK)) {
                     addClass([li], ACTIVE);
@@ -2441,6 +2643,10 @@ var TreeView = /** @class */ (function (_super) {
             li.setAttribute('tabindex', '0');
             EventHandler.add(li, 'blur', this.focusOut, this);
             this.updateIdAttr(focusedNode, li);
+            // Track focused id for virtual mode re-render restoration
+            if (this.enableVirtualization) {
+                this.virtualFocusedId = li.getAttribute('data-uid');
+            }
         }
     };
     TreeView.prototype.addSelect = function (liEle) {
@@ -2499,6 +2705,9 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.expandCollapseAction = function (currLi, e) {
+        if (this.enableVirtualization && !isNOU(this.height) && currLi.classList.contains(EDITING)) {
+            return;
+        }
         var icon = select('div.' + ICON, currLi);
         if (!icon || icon.classList.contains(PROCESS)) {
             return;
@@ -2529,15 +2738,29 @@ var TreeView = /** @class */ (function (_super) {
                     removeClass([icon], PROCESS);
                 }
                 else {
-                    _this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll);
+                    // Detect if event is keyboard navigation by checking for 'action' property
+                    var isKeyboardNav = e && e.action !== undefined;
+                    _this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll, isKeyboardNav);
                 }
             });
         }
         else {
-            this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll);
+            // Detect if event is keyboard navigation by checking for 'action' property
+            var isKeyboardNav = e && e.action !== undefined;
+            this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll, isKeyboardNav);
+        }
+    };
+    TreeView.prototype.nodeExpandAction = function (currLi, icon, expandChild, callback, isFromExpandAll, isKeyboardNav) {
+        // In virtual mode (with a fixed height) the flat <li> never has a child <ul>
+        // in the DOM, so the PARENTITEM check below would always fail and fall into
+        // renderChildNodes(), which corrupts the virtual DOM.
+        // Delegate directly to expandNode() which has the handleVirtualExpand fast-path.
+        // When height is not provided, fall through to normal expand logic below since
+        // the tree is rendered with a full nested DOM structure.
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            this.expandNode(currLi, icon, undefined, isKeyboardNav);
+            return;
         }
-    };
-    TreeView.prototype.nodeExpandAction = function (currLi, icon, expandChild, callback, isFromExpandAll) {
         var ul = select('.' + PARENTITEM, currLi);
         if (ul && ul.nodeName === 'UL') {
             this.expandNode(currLi, icon);
@@ -2651,6 +2874,19 @@ var TreeView = /** @class */ (function (_super) {
         });
     };
     TreeView.prototype.navigateToFocus = function (isUp) {
+        // In virtual mode (with a fixed height) the element itself is the scroll
+        // container; use ensureVirtualNodeVisible.  When height is not provided,
+        // the tree uses normal rendering, so fall through to the standard scroll logic.
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            var focusedLi = this.getFocusedNode();
+            if (focusedLi) {
+                var id = focusedLi.getAttribute('data-uid');
+                if (id) {
+                    this.ensureVirtualNodeVisible(id);
+                }
+            }
+            return;
+        }
         var focusNode = this.getFocusedNode().querySelector('.' + TEXTWRAP);
         var pos = focusNode.getBoundingClientRect();
         var parent = this.getScrollParent(this.element);
@@ -3071,6 +3307,46 @@ var TreeView = /** @class */ (function (_super) {
         return isNOU(fNode) ? (isNOU(selectedItem) ? this.element.firstElementChild : selectedItem) : fNode;
     };
     TreeView.prototype.focusNextNode = function (li, isTowards) {
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            // Determine the id of the node one step in the requested direction
+            var currentId = li ? li.getAttribute('data-uid') : null;
+            var currentIdx = -1;
+            if (!isNOU(currentId)) {
+                var idx = this.virtualNodeMap.get(currentId);
+                currentIdx = !isNOU(idx) ? idx : -1;
+            }
+            var targetIdx = isTowards ? currentIdx + 1 : currentIdx - 1;
+            if (targetIdx < 0 || targetIdx >= this.virtualFlatNodes.length) {
+                return;
+            }
+            var targetId = this.virtualFlatNodes[parseInt(targetIdx.toString(), 10)].id;
+            // ── Fix 1: set virtualFocusedId BEFORE calling ensureVirtualNodeVisible ──
+            // renderVirtualItems() is called synchronously inside ensureVirtualNodeVisible
+            // when a re-render is needed. If virtualFocusedId is still the old value at
+            // that point, focus restoration falls back to the first item. Setting it here
+            // ensures renderVirtualItems always restores focus to the correct target node.
+            this.virtualFocusedId = targetId;
+            // ── Fix 2: clear focus classes from ALL nested list items, not just top-level ones ──
+            // With hierarchical virtual DOM, the currently focused <li> may be nested inside
+            // a child <ul>. Using ':scope > li' only cleans up direct children and leaves
+            // stale e-focused / e-node-focus classes on nested nodes across re-renders.
+            var allLi = this.element.querySelectorAll('.' + LISTITEM + '.' + FOCUS);
+            for (var k = 0; k < allLi.length; k++) {
+                allLi[parseInt(k.toString(), 10)].classList.remove(FOCUS);
+                allLi[parseInt(k.toString(), 10)].classList.remove(FOCUSED);
+                allLi[parseInt(k.toString(), 10)].setAttribute('tabindex', '-1');
+            }
+            // Ensure the target <li> is in the DOM window (may trigger a re-render).
+            // virtualFocusedId is already set above so renderVirtualItems restores focus correctly.
+            this.ensureVirtualNodeVisible(targetId);
+            // Re-query both nodes after the potential re-render so setFocus gets live DOM elements
+            var prevNode = currentId ? this.getElement(currentId) : li;
+            var nextNode_1 = this.getElement(targetId);
+            if (!isNOU(nextNode_1)) {
+                this.setFocus(isNOU(prevNode) ? nextNode_1 : prevNode, nextNode_1);
+            }
+            return;
+        }
         var nextNode = isTowards ? this.getNextNode(li) : this.getPrevNode(li);
         this.setFocus(li, nextNode);
         this.navigateToFocus(!isTowards);
@@ -3140,6 +3416,12 @@ var TreeView = /** @class */ (function (_super) {
             addClass([nextNode], FOCUS);
             addClass([nextNode], FOCUSED);
             nextNode.setAttribute('tabindex', '0');
+            if (this.enableVirtualization && !isNOU(this.height)) {
+                nextNode.focus({ preventScroll: true });
+            }
+            else {
+                nextNode.focus();
+            }
             nextNode.focus();
             EventHandler.add(nextNode, 'blur', this.focusOut, this);
             this.updateIdAttr(preNode, nextNode);
@@ -3158,6 +3440,30 @@ var TreeView = /** @class */ (function (_super) {
         if (!focusedElement) {
             return;
         }
+        // Virtual-mode guard: when the browser moves focus into the TreeView (e.g. via
+        // the Tab key) it always lands on the single `<li tabindex="0">`.  In that
+        // case the element is already the focusable one, FOCUS is already applied
+        // and the only thing left to do is the keyboard focus styling.  Skip the
+        // redundant setAttribute/EventHandler.add work so we never re-render the
+        // virtual window as a side effect of focusing the existing `tabindex="0"`
+        // item.
+        // ── Fix: Use document.activeElement to detect browser-focused node ──
+        // After renderVirtualItems() restores focus, the browser-focused element is
+        // the authoritative source, not getFocusedNode(). If they don't match, it means
+        // renderVirtualItems already correctly set up the element, so we must not
+        // override its setup by calling setFocus again.
+        var actuallyFocusedElement = document.activeElement;
+        var isAlreadyFocusedInVirtualMode = this.enableVirtualization
+            && actuallyFocusedElement === focusedElement
+            && actuallyFocusedElement.getAttribute('tabindex') === '0'
+            && actuallyFocusedElement.classList.contains(FOCUS);
+        if (isAlreadyFocusedInVirtualMode) {
+            if (this.isKeyboardFocus && !actuallyFocusedElement.classList.contains(FOCUSED)) {
+                addClass([actuallyFocusedElement], FOCUSED);
+            }
+            this.isKeyboardFocus = false;
+            return;
+        }
         if (!this.mouseDownStatus) {
             if (focusedElement.classList.contains('e-disable')) {
                 focusedElement.setAttribute('tabindex', '-1');
@@ -3184,6 +3490,9 @@ var TreeView = /** @class */ (function (_super) {
             removeClass([focusedElement], FOCUS);
             removeClass([focusedElement], FOCUSED);
             EventHandler.remove(focusedElement, 'blur', this.focusOut);
+            if (this.enableVirtualization) {
+                this.virtualFocusedId = null;
+            }
         }
     };
     TreeView.prototype.onMouseOver = function (e) {
@@ -3397,6 +3706,19 @@ var TreeView = /** @class */ (function (_super) {
         else {
             txtEle[ListBase.getDomSetter(this.listBaseOption)] = ListBase.getSanitizedText(newText, this.listBaseOption);
         }
+        // ── Virtual mode: sync the flat-node snapshot so re-renders show updated text ──
+        // virtualFlatNodes is rebuilt from this.treeData (via flattenVisibleNodes) only on
+        // expand/collapse/scroll. Between those events the snapshot is the single source of
+        // truth used by createVirtualListItem. setValue() above updates this.editData (which
+        // IS the treeData object reference), but virtualFlatNodes[idx].text still holds the
+        // old value. Update it here so the next renderVirtualItems() call shows the new text.
+        if (this.enableVirtualization) {
+            var id = liEle.getAttribute('data-uid');
+            var idx = this.virtualNodeMap ? this.virtualNodeMap.get(id) : undefined;
+            if (!isNOU(idx) && idx > -1) {
+                this.virtualFlatNodes[parseInt(idx.toString(), 10)].text = newText;
+            }
+        }
         if (isInput) {
             removeClass([liEle], EDITING);
             liEle.focus();
@@ -4777,6 +5099,31 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.keyDownHandler = function (e) {
         if (e.key === 'Tab' || e.keyCode === 9) {
             this.isKeyboardFocus = true;
+            // Mark the upcoming scroll event (if any) as Tab-induced so the
+            // virtual scroll handler skips its re-render path.  The browser
+            // calls `Element.scrollIntoView` semantics on focus, which scrolls
+            // a `<li tabindex="0">` in the middle of the tree into view and
+            // therefore fires `scroll` on the container.  Without this guard
+            // the scroll handler would tear down the focused `<li>` and move
+            // focus elsewhere.
+            if (this.enableVirtualization) {
+                this.virtualSkipNextScrollRender = true;
+            }
+        }
+        // ── Fix: Also skip scroll render for arrow key navigation ──────────────────
+        // Arrow Down/Up calls focusNextNode() which calls ensureVirtualNodeVisible()
+        // to scroll the target node into view. Without this guard, the scroll event
+        // would trigger onVirtualScroll() which re-renders the window and resets the
+        // focus that focusNextNode() just set. This manifests as tabindex resetting
+        // to the first item instead of staying on the arrow-navigated target.
+        // Arrow Right/Left (expand/collapse) also calls renderVirtualItems() which
+        // calls li.focus() in branch 2; that can trigger a scroll on an edge node,
+        // so we consume it here to prevent a stale RAF re-render.
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.keyCode === 40 || e.keyCode === 38
+            || e.key === 'ArrowRight' || e.key === 'ArrowLeft' || e.keyCode === 39 || e.keyCode === 37) {
+            if (this.enableVirtualization) {
+                this.virtualSkipNextScrollRender = true;
+            }
         }
     };
     TreeView.prototype.preventContextMenu = function (e) {
@@ -5133,6 +5480,18 @@ var TreeView = /** @class */ (function (_super) {
         if (this.dataType === 1) {
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
+        // In virtual mode (with a fixed height), rebuild the flat node list and re-render
+        // after deletion so the removed nodes are correctly reflected in the hierarchical
+        // virtual DOM. When height is not provided, the tree uses normal rendering and
+        // the DOM is already updated by removeNode() above.
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            this.virtualFlatNodes = this.flattenVisibleNodes();
+            this.rebuildVirtualNodeMap();
+            var win = this.getVirtualWindow();
+            this.virtualStartIndex = win.startIndex;
+            this.virtualEndIndex = win.endIndex;
+            this.renderVirtualItems();
+        }
         this.triggerEvent('removeNode', nodeData);
     };
     TreeView.prototype.editSucess = function (target, newText, prevent) {
@@ -5193,6 +5552,1031 @@ var TreeView = /** @class */ (function (_super) {
         }
         return parentsID;
     };
+    // ═══════════════════════════════════════════════════════════════════════════════
+    //  VIRTUALIZATION — private helpers
+    // ═══════════════════════════════════════════════════════════════════════════════
+    /**
+     * Parses the `height` property (string like '400px' or number) to a pixel value.
+     * Returns 0 if the value cannot be determined.
+     *
+     * @returns {number} Pixel height.
+     * @private
+     */
+    TreeView.prototype.parseHeightToPixels = function () {
+        var h = this.height;
+        if (isNOU(h)) {
+            return 0;
+        }
+        if (typeof h === 'number') {
+            return h;
+        }
+        var parsed = parseFloat(h);
+        return isNaN(parsed) ? 0 : parsed;
+    };
+    /**
+     * Measures the height of the first rendered list item so subsequent calculations
+     * use real layout values.  Falls back to the stored `virtualItemHeight` default (40).
+     *
+     * @returns {number} Row height in pixels.
+     * @private
+     */
+    TreeView.prototype.measureVirtualItemHeight = function () {
+        var firstLi = select('.' + LISTITEM, this.element);
+        if (firstLi && firstLi.offsetHeight > 0) {
+            return firstLi.offsetHeight;
+        }
+        return this.virtualItemHeight;
+    };
+    /**
+     * Rebuilds the cached Sets for checked/selected nodes to enable O(1) lookup
+     * during the flatten operation instead of O(n) array indexOf calls.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.rebuildVirtualCheckCache = function () {
+        this.virtualExpandedNodesSet.clear();
+        this.virtualCheckedNodesSet.clear();
+        this.virtualSelectedNodesSet.clear();
+        if (this.expandedNodes && Array.isArray(this.expandedNodes)) {
+            for (var i = 0; i < this.expandedNodes.length; i++) {
+                this.virtualExpandedNodesSet.add(this.expandedNodes[i]);
+            }
+        }
+        if (this.checkedNodes && Array.isArray(this.checkedNodes)) {
+            for (var i = 0; i < this.checkedNodes.length; i++) {
+                this.virtualCheckedNodesSet.add(this.checkedNodes[i]);
+            }
+        }
+        if (this.selectedNodes && Array.isArray(this.selectedNodes)) {
+            for (var i = 0; i < this.selectedNodes.length; i++) {
+                this.virtualSelectedNodesSet.add(this.selectedNodes[i]);
+            }
+        }
+    };
+    /**
+     * Recursively walks the treeData (or groupedData for flat lists) and builds
+     * `virtualFlatNodes` — an ordered list of every node that is currently visible
+     * (i.e. its ancestors are all expanded). Uses cached Sets for O(1) state lookups.
+     *
+     * @returns {VirtualNodeData[]} Ordered flat list of visible nodes.
+     * @private
+     */
+    TreeView.prototype.flattenVisibleNodes = function () {
+        // Build cached Sets for fast lookups
+        this.rebuildVirtualCheckCache();
+        var result = [];
+        if (this.dataType === 1) {
+            // Flat data with parentID field — use getChildGroup to find root nodes
+            var rootNodes = [];
+            if (this.groupedData) {
+                rootNodes = this.getChildGroup(this.groupedData, null, true);
+            }
+            if (!rootNodes || rootNodes.length === 0) {
+                rootNodes = this.rootData;
+            }
+            // Apply sortOrder to root-level nodes for flat data (same as hierarchical path below)
+            rootNodes = this.getSortedData(rootNodes);
+            this.flattenNodeRecursive(rootNodes, 1, null, result);
+        }
+        else {
+            // Hierarchical data
+            var sorted = this.getSortedData(this.rootData);
+            this.flattenNodeRecursive(sorted, 1, null, result);
+        }
+        return result;
+    };
+    /**
+     * Recursive helper for `flattenVisibleNodes`.
+     *
+     * @param {Object[]} nodes - Array of raw data objects at this level.
+     * @param {number} level - 1-based depth level.
+     * @param {string | null} parentId - The parent node id, or null for root.
+     * @param {VirtualNodeData[]} result - Accumulator array.
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.flattenNodeRecursive = function (nodes, level, parentId, result) {
+        if (!nodes || nodes.length === 0) {
+            return;
+        }
+        // Cache field names and settings outside the loop to avoid repeated conversions
+        var childFieldName = this.fields.child.toString();
+        var expandedFieldName = this.fields.expanded;
+        var isCheckedFieldName = this.fields.isChecked;
+        var iconCssFieldName = this.fields.iconCss;
+        var imageUrlFieldName = this.fields.imageUrl;
+        var idFieldName = this.fields.id;
+        var textFieldName = this.fields.text;
+        var needsSorting = this.sortOrder !== 'None';
+        var isDataTypeFlat = this.dataType === 1;
+        var enableVirtualization = this.enableVirtualization;
+        for (var i = 0; i < nodes.length; i++) {
+            var raw = nodes[i];
+            var id = isNOU(raw[idFieldName]) ? '' : raw[idFieldName].toString();
+            var text = isNOU(raw[textFieldName]) ? '' : raw[textFieldName].toString();
+            // Use expandedNodes as the single source of truth.
+            var inExpandedNodes = this.virtualExpandedNodesSet.has(id);
+            var rawExpanded = !inExpandedNodes && getValue(expandedFieldName, raw) === true;
+            var isExpanded = inExpandedNodes || rawExpanded;
+            if (rawExpanded && id) {
+                this.expandedNodes.push(id);
+                this.virtualExpandedNodesSet.add(id);
+            }
+            // Inline hasChildRecords check to avoid function call (optimization)
+            var hasChildren = false;
+            if (isDataTypeFlat) {
+                if (this.groupedData) {
+                    var groupedChild = this.getChildGroup(this.groupedData, id, false);
+                    hasChildren = !isNOU(groupedChild) && groupedChild.length > 0;
+                }
+            }
+            else {
+                var childrenObj = getValue(childFieldName, raw);
+                hasChildren = !isNOU(childrenObj) && Array.isArray(childrenObj) && childrenObj.length > 0;
+            }
+            // Virtual-mode only: honour fields.isChecked === true on initial render
+            if (enableVirtualization && id && isCheckedFieldName && !this.virtualCheckedNodesSet.has(id)) {
+                var rawChecked = getValue(isCheckedFieldName, raw);
+                if (!isNOU(rawChecked) && rawChecked.toString() === 'true') {
+                    this.virtualCheckedNodesSet.add(id);
+                    if (this.checkedNodes && this.checkedNodes.indexOf(id) === -1) {
+                        this.checkedNodes.push(id);
+                    }
+                }
+            }
+            // Use cached Sets for O(1) lookup
+            var isSelected = this.virtualSelectedNodesSet.has(id);
+            // Resolve checkbox state: indeterminate takes precedence over the checked set,
+            // because a node can be in the indeterminate state without being in checkedNodes.
+            var isChecked = (enableVirtualization && this.virtualIndeterminateNodesSet.has(id))
+                ? 'indeterminate'
+                : this.virtualCheckedNodesSet.has(id);
+            var isDisabled = false; // TODO: Check if any per-node disabled field exists
+            var iconCssVal = raw[iconCssFieldName];
+            var iconCss = isNOU(iconCssVal) ? '' : iconCssVal.toString();
+            var imageUrlVal = raw[imageUrlFieldName];
+            var imageUrl = isNOU(imageUrlVal) ? '' : imageUrlVal.toString();
+            var node = {
+                id: id, text: text, level: level, parentId: parentId, hasChildren: hasChildren, isExpanded: isExpanded,
+                isSelected: isSelected, isChecked: isChecked, isDisabled: isDisabled, iconCss: iconCss, imageUrl: imageUrl, rawData: raw
+            };
+            result.push(node);
+            if (isExpanded && hasChildren) {
+                // Determine children list
+                var children = [];
+                if (isDataTypeFlat) {
+                    if (this.groupedData) {
+                        children = this.getChildGroup(this.groupedData, id, false);
+                        // Apply sortOrder to flat-data children (same as hierarchical path)
+                        if (needsSorting) {
+                            children = ListBase.getDataSource(children, ListBase.addSorting(this.sortOrder, this.fields.text));
+                        }
+                    }
+                }
+                else {
+                    var rawChildren = getValue(childFieldName, raw);
+                    if (!isNOU(rawChildren) && Array.isArray(rawChildren)) {
+                        children = rawChildren;
+                        // Only sort if needed
+                        if (needsSorting) {
+                            children = ListBase.getDataSource(children, ListBase.addSorting(this.sortOrder, this.fields.text));
+                        }
+                    }
+                }
+                this.flattenNodeRecursive(children, level + 1, id, result);
+            }
+        }
+    };
+    /**
+     * Checks whether a raw datasource node has child records.
+     *
+     * @param {Object} raw - Raw datasource object.
+     * @returns {boolean} True if children exist.
+     * @private
+     */
+    TreeView.prototype.hasChildRecords = function (raw) {
+        if (this.dataType === 1) {
+            if (!this.groupedData) {
+                return false;
+            }
+            var rawId = raw[this.fields.id];
+            if (isNOU(rawId)) {
+                return false;
+            }
+            var groupedChild = this.getChildGroup(this.groupedData, rawId.toString(), false);
+            return !isNOU(groupedChild) && groupedChild.length > 0;
+        }
+        var childField = this.fields.child.toString();
+        var children = getValue(childField, raw);
+        return !isNOU(children) && Array.isArray(children) && children.length > 0;
+    };
+    /**
+     * Rebuilds `virtualNodeMap` (id → index) from the current `virtualFlatNodes`.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.rebuildVirtualNodeMap = function () {
+        this.virtualNodeMap.clear();
+        for (var i = 0; i < this.virtualFlatNodes.length; i++) {
+            this.virtualNodeMap.set(this.virtualFlatNodes[parseInt(i.toString(), 10)].id, i);
+        }
+    };
+    TreeView.prototype.getVirtualWindow = function (scrollTop) {
+        var total = this.virtualFlatNodes.length;
+        if (total === 0) {
+            return { startIndex: 0, endIndex: 0 };
+        }
+        var st = scrollTop !== undefined ? scrollTop : this.element.scrollTop;
+        var itemH = this.virtualItemHeight;
+        var vpH = this.virtualViewportHeight;
+        var rawStart = Math.floor(st / itemH) - this.virtualOverscanCount;
+        var rawEnd = Math.ceil((st + vpH) / itemH) + this.virtualOverscanCount;
+        var startIndex = Math.max(0, rawStart);
+        var endIndex = Math.min(total, rawEnd);
+        return { startIndex: startIndex, endIndex: endIndex };
+    };
+    TreeView.prototype.getVirtualWindowAt = function (scrollTop) {
+        return this.getVirtualWindow(scrollTop);
+    };
+    TreeView.prototype.getVirtualPadding = function () {
+        var total = this.virtualFlatNodes.length;
+        var itemH = this.virtualItemHeight;
+        var start = this.virtualStartIndex;
+        var end = this.virtualEndIndex;
+        var paddingTop = start * itemH;
+        var paddingBottom = Math.max(0, (total - end) * itemH);
+        return { paddingTop: paddingTop, paddingBottom: paddingBottom };
+    };
+    /**
+     * Renders the virtual window into a **nested** `<ul>/<li>` hierarchy identical to
+     * the non-virtualized DOM structure.
+     *
+     * ## Scroll math
+     * The flat-index ↔ pixel mapping stays unchanged: every entry in
+     * `virtualFlatNodes` represents exactly one `itemHeight` row.
+     * `paddingTop = startIndex * itemHeight` and
+     * `paddingBottom = (total - endIndex) * itemHeight` keep the scrollbar
+     * thumb in the correct position.
+     *
+     * ## Ancestor injection
+     * When `startIndex` points at a child node whose ancestor(s) have already
+     * scrolled above the viewport (their flat indices are < startIndex), the
+     * ancestors would normally be missing from the DOM, forcing the children to
+     * fall back to the root `<ul>` as flat siblings — producing wrong HTML.
+     *
+     * To fix this, before rendering the window we walk the ancestor chain of the
+     * first visible node and collect every ancestor that lies **outside** the
+     * window.  Those ancestors are injected as real `<li>` containers at the
+     * very top of the root `<ul>`.  To compensate for their presence, `paddingTop`
+     * is reduced by `injectedCount * itemHeight` so the total scroll height
+     * remains the same.
+     *
+     * Once the ancestors are in the DOM they are registered in `renderedParentMap`
+     * so the normal window-rendering loop can nest children inside them exactly
+     * as it does when both parent and child are in the same window.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.renderVirtualItems = function () {
+        if (!this.ulElement) {
+            return;
+        }
+        var ul = this.ulElement;
+        // ── Snapshot focused ID BEFORE clearing the DOM ───────────────────────────
+        // Removing a focused <li> from the DOM triggers a synchronous `blur` event,
+        // which calls focusOut() and sets virtualFocusedId = null.  Capturing the id
+        // here (before any removeChild) ensures focus is correctly restored to the
+        // same node after re-render even when keyboard navigation was in progress.
+        var focusedUid = this.virtualFocusedId || null;
+        // ── Clear previous render (direct children only) ─────────────────────────
+        var existingItems = ul.querySelectorAll(':scope > li');
+        for (var i = existingItems.length - 1; i >= 0; i--) {
+            ul.removeChild(existingItems[parseInt(i.toString(), 10)]);
+        }
+        var renderedParentMap = new Map();
+        var itemH = this.virtualItemHeight;
+        var injectedCount = 0;
+        if (this.virtualStartIndex < this.virtualFlatNodes.length) {
+            var firstNode = this.virtualFlatNodes[this.virtualStartIndex];
+            if (firstNode.parentId) {
+                // Build the ancestor chain from root down to the immediate parent
+                var ancestors = [];
+                var searchId = firstNode.parentId;
+                while (searchId) {
+                    var ancestorIdx = this.virtualNodeMap.get(searchId);
+                    if (!isNOU(ancestorIdx) && ancestorIdx < this.virtualStartIndex) {
+                        var ancestor = this.virtualFlatNodes[parseInt(ancestorIdx.toString(), 10)];
+                        ancestors.unshift(ancestor); // prepend so root comes first
+                        searchId = ancestor.parentId;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                // Inject each ancestor as a real <li> into the root <ul>
+                // and register it in renderedParentMap for child-nesting below.
+                for (var a = 0; a < ancestors.length; a++) {
+                    var ancestor = ancestors[parseInt(a.toString(), 10)];
+                    var ancestorLi = this.createVirtualListItem(ancestor, false);
+                    // Find the correct container: root or a previously injected ancestor's <ul>
+                    var targetUl = ul;
+                    if (ancestor.parentId && renderedParentMap.has(ancestor.parentId)) {
+                        var pe = renderedParentMap.get(ancestor.parentId);
+                        if (!pe.childUl) {
+                            pe.childUl = this.createElement('ul', {
+                                className: PARENTITEM + ' e-ul',
+                                attrs: { role: 'group' }
+                            });
+                            pe.li.appendChild(pe.childUl);
+                        }
+                        targetUl = pe.childUl;
+                    }
+                    targetUl.appendChild(ancestorLi);
+                    renderedParentMap.set(ancestor.id, { li: ancestorLi, childUl: null });
+                    injectedCount++;
+                }
+            }
+        }
+        // ── Scroll-space padding (adjusted for injected ancestors) ────────────────
+        var total = this.virtualFlatNodes.length;
+        var start = this.virtualStartIndex;
+        var end = this.virtualEndIndex;
+        var rawPaddingTop = start * itemH;
+        // Subtract the height of injected ancestors so the scroll position is
+        // exact: those ancestor rows are now real DOM elements, not hidden space.
+        var adjustedPaddingTop = Math.max(0, rawPaddingTop - injectedCount * itemH);
+        ul.style.paddingTop = adjustedPaddingTop + 'px';
+        ul.style.paddingBottom = Math.max(0, (total - end) * itemH) + 'px';
+        // ── Render window items (nested via renderedParentMap) ────────────────────
+        var liListBuf = [];
+        for (var i = start; i < end; i++) {
+            var node = this.virtualFlatNodes[parseInt(i.toString(), 10)];
+            var li = this.createVirtualListItem(node, i === start);
+            // Find the correct parent container
+            var targetUl = ul;
+            if (node.parentId && renderedParentMap.has(node.parentId)) {
+                var parentEntry = renderedParentMap.get(node.parentId);
+                // Lazily create the child <ul> the first time a child needs it
+                if (!parentEntry.childUl) {
+                    parentEntry.childUl = this.createElement('ul', {
+                        className: PARENTITEM + ' e-ul',
+                        attrs: { role: 'group' }
+                    });
+                    parentEntry.li.appendChild(parentEntry.childUl);
+                }
+                targetUl = parentEntry.childUl;
+            }
+            targetUl.appendChild(li);
+            liListBuf.push(li);
+            // Register this node so its children in the same window can nest under it
+            if (node.isExpanded && node.hasChildren) {
+                renderedParentMap.set(node.id, { li: li, childUl: null });
+            }
+        }
+        // ── Restore focus / tabindex ──────────────────────────────────────────────
+        // In virtual mode only the li that carries the 'e-active' class should be
+        // focusable (tabindex='0'). All other rendered li elements must be set
+        // to tabindex='-1' so the tab order remains unambiguous as the window
+        // changes during scrolling.
+        var focusRestored = false;
+        // 1. Prefer the currently active node if it is in the rendered window.
+        for (var k = 0; k < liListBuf.length; k++) {
+            var li = liListBuf[parseInt(k.toString(), 10)];
+            if (li.classList.contains(ACTIVE)) {
+                li.setAttribute('tabindex', '0');
+                // ── Fix: ensure FOCUS class set on active node too ──
+                // This ensures focusIn() guard condition is met: tabindex='0' && FOCUS class
+                addClass([li], FOCUS);
+                focusRestored = true;
+                break;
+            }
+        }
+        // 2. Otherwise fall back to the previously focused node (if it is in window).
+        if (!focusRestored && focusedUid) {
+            for (var k = 0; k < liListBuf.length; k++) {
+                var li = liListBuf[parseInt(k.toString(), 10)];
+                if (li.getAttribute('data-uid') === focusedUid) {
+                    li.setAttribute('tabindex', '0');
+                    addClass([li], FOCUS);
+                    addClass([li], FOCUSED);
+                    // ── Fix: restore actual browser focus so keyboard events keep working ──
+                    // After renderVirtualItems() replaces all <li> elements the old element
+                    // is gone from the DOM and document.activeElement falls back to
+                    // document.body.  Setting tabindex + classes is not enough — the new
+                    // element also needs a programmatic .focus() call so subsequent keyboard
+                    // events (Arrow keys, Home, End, etc.) are delivered to the TreeView.
+                    // Re-attach the blur→focusOut handler so virtualFocusedId is cleared
+                    // correctly when the user tabs away.
+                    // ── Use preventScroll:true ────────────────────────────────────────────
+                    // Without preventScroll the browser scrolls the container to bring this
+                    // node into view during the re-render, changing scrollTop AFTER the
+                    // correct paddingTop has been applied. This is the root cause of the
+                    // KBN expand position-jump bug: the render is correct but the browser
+                    // silently scrolls the viewport, making the parent node appear to jump.
+                    // ensureVirtualNodeVisible() handles any legitimate scroll-into-view
+                    // needs before renderVirtualItems() is called, so scroll here is wrong.
+                    EventHandler.add(li, 'blur', this.focusOut, this);
+                    li.focus({ preventScroll: true });
+                    focusRestored = true;
+                    break;
+                }
+            }
+        }
+        // 3. Finally default to the first item in the window.
+        if (!focusRestored && liListBuf.length > 0) {
+            var firstLi = liListBuf[0];
+            firstLi.setAttribute('tabindex', '0');
+        }
+        // ── Fix: Ensure all other rendered nodes have tabindex="-1" ──
+        // This prevents stale tabindex="0" on multiple nodes which breaks Tab order
+        for (var k = 0; k < liListBuf.length; k++) {
+            var li = liListBuf[parseInt(k.toString(), 10)];
+            if (li.getAttribute('tabindex') !== '0') {
+                li.setAttribute('tabindex', '-1');
+            }
+        }
+        // Keep liList in sync so keyboard-navigation helpers stay functional.
+        this.liList = liListBuf;
+    };
+    /**
+     * Creates a single `<li>` element for the virtual window representing `node`.
+     *
+     * @param {VirtualNodeData} node - The node data.
+     * @param {boolean} _isFirst - True if this is the first rendered item (unused here but kept for potential override).
+     * @returns {HTMLElement} The constructed `<li>` element.
+     * @private
+     */
+    TreeView.prototype.createVirtualListItem = function (node, _isFirst) {
+        var li = this.createElement('li', { className: LISTITEM });
+        // Level class for CSS indentation
+        li.classList.add('e-level-' + node.level);
+        li.setAttribute('data-uid', node.id);
+        li.setAttribute('aria-level', node.level.toString());
+        li.setAttribute('role', 'treeitem');
+        li.setAttribute('tabindex', '-1');
+        // Full-row overlay (required for fullRowSelect mode)
+        if (this.fullRowSelect) {
+            var fullRow = this.createElement('div', { className: FULLROW });
+            li.appendChild(fullRow);
+        }
+        // Text/icon wrapper
+        var textWrap = this.createElement('div', { className: TEXTWRAP });
+        // Expand/collapse icon
+        if (node.hasChildren) {
+            var iconSpan = this.createElement('div', {
+                className: ICON + ' ' + (node.isExpanded ? COLLAPSIBLE : EXPANDABLE)
+            });
+            textWrap.appendChild(iconSpan);
+        }
+        // Checkbox
+        if (this.showCheckBox) {
+            var checkWrap = createCheckBox(this.createElement, false, {
+                checked: node.isChecked === true,
+                cssClass: CHECKBOXWRAP
+            });
+            if (node.isChecked === 'indeterminate') {
+                var frame = checkWrap.querySelector('.' + CHECKBOXFRAME);
+                if (frame) {
+                    frame.classList.add(INDETERMINATE);
+                }
+            }
+            textWrap.appendChild(checkWrap);
+        }
+        // Icon
+        if (node.iconCss) {
+            var iconEl = this.createElement('span', {
+                className: ICON + ' ' + node.iconCss
+            });
+            textWrap.appendChild(iconEl);
+        }
+        // Image
+        if (node.imageUrl) {
+            var img = document.createElement('img');
+            img.src = node.imageUrl;
+            img.classList.add(IMAGE);
+            textWrap.appendChild(img);
+        }
+        // Text anchor
+        var anchor = this.createElement('span', {
+            className: 'e-list-text',
+            innerHTML: node.text
+        });
+        textWrap.appendChild(anchor);
+        li.appendChild(textWrap);
+        // State classes
+        if (node.isExpanded) {
+            li.classList.add(EXPANDED);
+            li.setAttribute('aria-expanded', 'true');
+        }
+        else if (node.hasChildren) {
+            li.classList.add(NODECOLLAPSED);
+            li.setAttribute('aria-expanded', 'false');
+        }
+        if (node.isSelected) {
+            li.classList.add(ACTIVE);
+            li.setAttribute('aria-selected', 'true');
+        }
+        if (node.isDisabled) {
+            li.classList.add(DISABLED);
+            li.setAttribute('aria-disabled', 'true');
+        }
+        if (node.hasChildren) {
+            li.classList.add(CHILD);
+        }
+        // Wire the focus event so `focusIn()` fires when the user Tabs into this
+        // item.  The non-virtualized path registers this in `beforeNodeCreate()`,
+        // but virtual items never go through that callback, so we must register
+        // it here to keep focus styling (e.g. `e-focused`) consistent between
+        // virtual and non-virtual modes.  `unWireEvents()` already removes this
+        // handler during teardown by iterating over the rendered `<li>`s.
+        EventHandler.add(li, 'focus', this.focusIn, this);
+        return li;
+    };
+    /**
+     * Initialises the virtual-scrolling layout:
+     * 1. Adds the `e-virtualization` CSS class and applies a fixed `height` + `overflow-y`.
+     * 2. Flattens all visible nodes into `virtualFlatNodes`.
+     * 3. Measures item height and viewport height.
+     * 4. Computes the initial window and renders it.
+     * 5. Wires the scroll event handler.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.initVirtualization = function () {
+        addClass([this.element], VIRTUALIZATION);
+        // Apply container height
+        var px = this.parseHeightToPixels();
+        if (px > 0) {
+            this.element.style.height = px + 'px';
+            this.element.style.overflowY = 'auto';
+        }
+        // Ensure the inner UL is ready
+        if (!this.ulElement) {
+            this.ulElement = select('.' + PARENTITEM, this.element);
+        }
+        if (!this.ulElement) {
+            return;
+        }
+        // Make the UL position-relative for the absolute spacers
+        this.ulElement.style.position = 'relative';
+        // Rebuild flat list
+        this.virtualFlatNodes = this.flattenVisibleNodes();
+        this.rebuildVirtualNodeMap();
+        // Measure dimensions
+        this.virtualViewportHeight = px > 0 ? px : this.element.offsetHeight;
+        // Render a single probe item to measure the real item height before the full render
+        if (this.virtualFlatNodes.length > 0) {
+            var probe = this.createVirtualListItem(this.virtualFlatNodes[0], true);
+            this.ulElement.appendChild(probe);
+            this.virtualItemHeight = probe.offsetHeight > 0 ? probe.offsetHeight : this.virtualItemHeight;
+            this.ulElement.removeChild(probe);
+        }
+        // Compute window and render all items in the initial viewport
+        var win = this.getVirtualWindow();
+        this.virtualStartIndex = win.startIndex;
+        this.virtualEndIndex = win.endIndex;
+        this.renderVirtualItems();
+        // Wire scroll
+        this.wireVirtualScrollEvents();
+    };
+    /**
+     * Wires the scroll event listener on the TreeView element.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.wireVirtualScrollEvents = function () {
+        this.unwireVirtualScrollEvents();
+        this.virtualScrollBound = this.onVirtualScroll.bind(this);
+        this.element.addEventListener('scroll', this.virtualScrollBound, { passive: true });
+    };
+    /**
+     * Removes the scroll event listener previously wired by `wireVirtualScrollEvents`.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.unwireVirtualScrollEvents = function () {
+        if (this.virtualScrollBound) {
+            this.element.removeEventListener('scroll', this.virtualScrollBound);
+            this.virtualScrollBound = null;
+        }
+        if (this.virtualScrollRAF !== null) {
+            cancelAnimationFrame(this.virtualScrollRAF);
+            this.virtualScrollRAF = null;
+        }
+    };
+    /**
+     * Scroll handler for the virtual TreeView.  Throttled via `requestAnimationFrame`.
+     * Shows the loading mask during fast scrolls, re-renders the window, then hides the mask.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.onVirtualScroll = function () {
+        var _this = this;
+        if (this.virtualScrollRAF !== null) {
+            cancelAnimationFrame(this.virtualScrollRAF);
+        }
+        // ── Tab-induced focus guard ────────────────────────────────────────────────
+        // When the user Tabs into a `<li tabindex="0">` that is in the middle of
+        // the treeview, the browser auto-scrolls the container so the focused
+        // element becomes visible.  That fires a `scroll` event here, but the
+        // virtual window already contains the focused element — re-rendering
+        // would destroy the focused `<li>` and break focus.  Detect this case
+        // via the flag set in `keyDownHandler` and skip the re-render entirely.
+        if (this.virtualSkipNextScrollRender) {
+            this.virtualSkipNextScrollRender = false;
+            // Update prev scrollTop so a subsequent user-driven scroll still
+            // calculates the correct delta.
+            this.virtualPrevScrollTop = this.element.scrollTop;
+            return;
+        }
+        var currentScrollTop = this.element.scrollTop;
+        var delta = Math.abs(currentScrollTop - this.virtualPrevScrollTop);
+        var fastScrollThreshold = this.virtualViewportHeight * 2;
+        if (delta > fastScrollThreshold) {
+            this.showVirtualMask(currentScrollTop);
+        }
+        this.virtualScrollRAF = requestAnimationFrame(function () {
+            _this.virtualScrollRAF = null;
+            _this.virtualPrevScrollTop = _this.element.scrollTop;
+            var win = _this.getVirtualWindow();
+            _this.virtualStartIndex = win.startIndex;
+            _this.virtualEndIndex = win.endIndex;
+            _this.renderVirtualItems();
+            // Hide the skeleton mask after a short delay so it stays visible long enough
+            // for the user to perceive the loading indicator even on short scrolls.
+            setTimeout(function () {
+                _this.hideVirtualMask();
+                // Keep the (now hidden) mask's coords fresh for the next show.
+                _this.updateMaskPosition();
+            }, 200);
+        });
+    };
+    /**
+     * Creates the skeleton mask overlay used to indicate loading during fast scrolls.
+     * Skeleton instances are stored in `skeletonInstances` for later disposal.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.createVirtualMask = function () {
+        if (this.virtualMaskElement) {
+            return;
+        }
+        // Use position:fixed so the mask is anchored to the visible viewport (not to the
+        // scrolling container). Width/height/left/top are set/refreshed by
+        // updateMaskPosition() so the mask always covers the TreeView's visible area
+        // regardless of how the page itself is scrolled.
+        var rect = this.element.getBoundingClientRect();
+        var scrollBarWidth = this.element.offsetWidth - this.element.clientWidth;
+        var maskParent = this.createElement('div', {
+            className: VIRTUAL_MASK_PARENT,
+            styles: "position:fixed;top:" + rect.top + "px;left:" + rect.left + "px;width:" + (rect.width - scrollBarWidth) + "px;height:" + rect.height + "px;z-index:10;overflow:hidden;background:#fff;pointer-events:none;display:none;"
+        });
+        var visibleRows = Math.ceil(this.virtualViewportHeight / this.virtualItemHeight) + 1;
+        for (var r = 0; r < visibleRows; r++) {
+            var maskItem = this.createElement('div', {
+                className: VIRTUAL_MASK_ITEM,
+                styles: "display:flex;align-items:center;height:" + this.virtualItemHeight + "px;padding:0 12px;gap:8px;"
+            });
+            // Skeleton circle for icon placeholder
+            // const iconHolder: HTMLElement = this.createElement('span', {
+            //     styles: `width:20px;height:20px;`
+            // });
+            // maskItem.appendChild(iconHolder);
+            // const iconSkel: Skeleton = new Skeleton({
+            //     shape: 'Circle',
+            //     width: '20px',
+            //     height: '20px',
+            //     cssClass: 'e-virtual-skel-icon'
+            // });
+            // iconSkel.appendTo(iconHolder);
+            // this.skeletonInstances.push(iconSkel);
+            // Skeleton text bar
+            var textHolder = this.createElement('span');
+            textHolder.style.flex = '1';
+            textHolder.style.height = '14px';
+            maskItem.appendChild(textHolder);
+            var textSkel = new Skeleton({
+                shape: 'Text',
+                width: '80%',
+                height: '14px',
+                cssClass: 'e-virtual-skel-text'
+            });
+            textSkel.appendTo(textHolder);
+            this.skeletonInstances.push(textSkel);
+            maskParent.appendChild(maskItem);
+        }
+        this.virtualMaskElement = maskParent;
+        this.element.appendChild(maskParent);
+    };
+    /**
+     * Refreshes the mask position so it always overlays the TreeView's viewport.
+     * Called on every show / scroll, since `position:fixed` is relative to the
+     * page viewport, not to the TreeView scroll container.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.updateMaskPosition = function () {
+        if (!this.virtualMaskElement) {
+            return;
+        }
+        var rect = this.element.getBoundingClientRect();
+        var scrollBarWidth = this.element.offsetWidth - this.element.clientWidth;
+        this.virtualMaskElement.style.top = rect.top + 'px';
+        this.virtualMaskElement.style.left = rect.left + 'px';
+        this.virtualMaskElement.style.width = (rect.width - scrollBarWidth) + 'px';
+        this.virtualMaskElement.style.height = rect.height + 'px';
+    };
+    /**
+     * Destroys all skeleton instances and removes the mask overlay from the DOM.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.destroyVirtualMask = function () {
+        for (var i = this.skeletonInstances.length - 1; i >= 0; i--) {
+            this.skeletonInstances[parseInt(i.toString(), 10)].destroy();
+        }
+        this.skeletonInstances = [];
+        if (this.virtualMaskElement) {
+            if (this.virtualMaskElement.parentElement) {
+                this.virtualMaskElement.parentElement.removeChild(this.virtualMaskElement);
+            }
+            this.virtualMaskElement = null;
+        }
+    };
+    /**
+     * Positions and shows the skeleton mask at the current `scrollTop` position.
+     *
+     * @param {number} _scrollTop - Current scrollTop of the container.
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.showVirtualMask = function (_scrollTop) {
+        if (!this.virtualMaskElement) {
+            this.createVirtualMask();
+        }
+        if (this.virtualMaskElement) {
+            // Refresh the fixed-position coords in case the TreeView was moved/resized
+            // since the last time the mask was shown.
+            this.updateMaskPosition();
+            this.virtualMaskElement.style.display = 'block';
+            // Visually hide the real list while the skeleton is shown
+            if (this.ulElement) {
+                this.ulElement.style.visibility = 'hidden';
+            }
+        }
+    };
+    /**
+     * Hides the skeleton mask overlay after the virtual window has been rendered.
+     *
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.hideVirtualMask = function () {
+        if (this.virtualMaskElement) {
+            this.virtualMaskElement.style.display = 'none';
+            // Restore real list visibility
+            if (this.ulElement) {
+                this.ulElement.style.visibility = '';
+            }
+        }
+    };
+    /**
+     * Ensures the node identified by `id` is scrolled into view inside the virtual container.
+     * If the node falls outside the rendered window, the container's `scrollTop` is adjusted so
+     * that the node becomes visible, the window is re-computed and `renderVirtualItems` is called.
+     *
+     * @param {string} id - The `data-uid` of the target node.
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.ensureVirtualNodeVisible = function (id) {
+        var idx = this.virtualNodeMap.get(id);
+        if (isNOU(idx)) {
+            return;
+        }
+        var itemH = this.virtualItemHeight;
+        var vpH = this.virtualViewportHeight;
+        var nodeTop = idx * itemH;
+        var nodeBottom = nodeTop + itemH;
+        var currentTop = this.element.scrollTop;
+        var currentBottom = currentTop + vpH;
+        if (nodeTop < currentTop) {
+            this.element.scrollTop = nodeTop;
+        }
+        else if (nodeBottom > currentBottom) {
+            this.element.scrollTop = nodeBottom - vpH;
+        }
+        else {
+            return; // already visible, no re-render needed
+        }
+        // Re-render the new window synchronously so the <li> is in the DOM
+        var win = this.getVirtualWindow();
+        this.virtualStartIndex = win.startIndex;
+        this.virtualEndIndex = win.endIndex;
+        this.renderVirtualItems();
+    };
+    TreeView.prototype.handleVirtualExpand = function (id, isKeyboardNav) {
+        // ── Cancel any pending scroll RAF ─────────────────────────────────────────
+        // A scroll RAF queued before the expand click would run asynchronously after
+        // this synchronous expand completes, re-rendering the window from a stale
+        // scrollTop and moving the parent node to the wrong position.  Cancel it now
+        // so the expand render is authoritative.
+        if (this.virtualScrollRAF !== null) {
+            cancelAnimationFrame(this.virtualScrollRAF);
+            this.virtualScrollRAF = null;
+        }
+        if (this.expandedNodes.indexOf(id) === -1) {
+            this.expandedNodes.push(id);
+        }
+        // Also update virtualExpandedNodesSet to keep it in sync
+        if (this.virtualExpandedNodesSet) {
+            this.virtualExpandedNodesSet.add(id);
+        }
+        if (this.rootData) {
+            var acutalRootData = this.rootData.find(function (item) { return item.id === parseInt(id, 10); });
+            acutalRootData.isExpanded = true;
+        }
+        // ── Fix: Pin focused ID to the expanding node for keyboard navigation ──
+        // When keyboard-triggered, the expanded node IS definitively the focused node
+        // (`id` comes from currLi.getAttribute('data-uid') in expandNode, where currLi
+        // is getFocusedNode()). Set unconditionally — the old conditional guard
+        // `!this.virtualFocusedId` could leave a stale or null value if a previous
+        // RAF render (from arrow-key scroll) hadn't yet completed, causing branch 3
+        // (first item) to fire in renderVirtualItems() instead of branch 2.
+        // For mouse clicks (isKeyboardNav=false), clear virtualFocusedId so that
+        // renderVirtualItems() Branch 2 does NOT apply the FOCUS/FOCUSED classes —
+        // mouse-based expand/collapse should never add the e-focused class.
+        if (isKeyboardNav) {
+            this.virtualFocusedId = id;
+        }
+        else {
+            this.virtualFocusedId = null;
+        }
+        this.virtualFlatNodes = this.flattenVisibleNodes();
+        this.rebuildVirtualNodeMap();
+        // ── Snapshot scrollTop before computing the window ────────────────────────
+        // Read scrollTop once here and pass it into getVirtualWindow so that any
+        // browser scroll-anchoring adjustment that happens when the padding values
+        // change cannot affect which window we render.
+        var scrollTopSnapshot = this.element.scrollTop;
+        var win = this.getVirtualWindowAt(scrollTopSnapshot);
+        this.virtualStartIndex = win.startIndex;
+        this.virtualEndIndex = win.endIndex;
+        // ── Block ALL scroll-triggered re-renders during this expand ─────────────
+        // renderVirtualItems() calls li.focus() in branch 2 (keyboard focus restore).
+        // The post-render focus() call below can also trigger browser scroll.  Both
+        // can fire the 'scroll' event and cause onVirtualScroll() to queue a RAF.
+        // We set the skip flag ONCE here; it is consumed by the first scroll event.
+        // To cover the second potential scroll (from the focus() call below) we use
+        // preventScroll:true on that call so it never moves the container at all.
+        this.virtualSkipNextScrollRender = true;
+        this.renderVirtualItems();
+        // renderVirtualItems() replaces all <li> elements so the old icon element that
+        // had the PROCESS class is gone. Remove PROCESS from the newly rendered icon
+        // so the node can be collapsed/expanded again without being blocked.
+        var newLi = this.getElement(id);
+        if (newLi) {
+            var icon = select('.' + ICON, newLi);
+            if (icon) {
+                removeClass([icon], PROCESS);
+            }
+            // ── Use preventScroll:true ────────────────────────────────────────────
+            // Without preventScroll the browser scrolls the container to bring this
+            // node into view, which fires a second 'scroll' event.  The first scroll
+            // was already consumed by virtualSkipNextScrollRender (set above), so the
+            // second scroll would queue a new RAF that re-renders from the
+            // focus-adjusted scrollTop — moving the parent node to the wrong position.
+            newLi.focus({ preventScroll: true });
+        }
+        if (this.isLoaded) {
+            var currLi = this.getElement(id);
+            if (currLi) {
+                var expandArgs = this.getExpandEvent(currLi, null);
+                expandArgs.isInteracted = this.isInteracted;
+                this.trigger('nodeExpanded', expandArgs);
+            }
+        }
+    };
+    TreeView.prototype.handleVirtualCollapse = function (id, isKeyboardNav) {
+        // ── Cancel any pending scroll RAF ─────────────────────────────────────────
+        // Mirrors handleVirtualExpand: a queued RAF from a previous scroll event
+        // must not override the collapse render with a stale window.
+        if (this.virtualScrollRAF !== null) {
+            cancelAnimationFrame(this.virtualScrollRAF);
+            this.virtualScrollRAF = null;
+        }
+        var idx = this.expandedNodes.indexOf(id);
+        if (idx !== -1) {
+            this.expandedNodes.splice(idx, 1);
+        }
+        // Also update virtualExpandedNodesSet to keep it in sync
+        if (this.virtualExpandedNodesSet) {
+            this.virtualExpandedNodesSet.delete(id);
+        }
+        if (this.rootData) {
+            var acutalRootData = this.rootData.find(function (item) { return item.id === parseInt(id, 10); });
+            acutalRootData.isExpanded = false;
+        }
+        // ── Fix: Pin focused ID to the collapsing node for keyboard navigation ──
+        // Same reasoning as handleVirtualExpand: when keyboard-triggered, `id` is
+        // definitively the focused node. Set unconditionally to avoid the stale/null
+        // state that could cause the RAF re-render to fall through to branch 3.
+        // For mouse clicks (isKeyboardNav=false), clear virtualFocusedId so that
+        // renderVirtualItems() Branch 2 does NOT apply the FOCUS/FOCUSED classes —
+        // mouse-based expand/collapse should never add the e-focused class.
+        if (isKeyboardNav) {
+            this.virtualFocusedId = id;
+        }
+        else {
+            this.virtualFocusedId = null;
+        }
+        this.virtualFlatNodes = this.flattenVisibleNodes();
+        this.rebuildVirtualNodeMap();
+        // ── Snapshot scrollTop before computing the window ────────────────────────
+        // Same rationale as handleVirtualExpand: capture scrollTop before any focus()
+        // call or padding change can cause the browser to auto-scroll.
+        var scrollTopSnapshot = this.element.scrollTop;
+        var win = this.getVirtualWindowAt(scrollTopSnapshot);
+        this.virtualStartIndex = win.startIndex;
+        this.virtualEndIndex = win.endIndex;
+        // ── Block ALL scroll-triggered re-renders during this collapse ────────────
+        // Same as handleVirtualExpand: use preventScroll:true on the focus() call
+        // below so the second potential scroll event is never fired.
+        this.virtualSkipNextScrollRender = true;
+        this.renderVirtualItems();
+        // renderVirtualItems() replaces all <li> elements so the old icon element that
+        // had the PROCESS class is gone. Remove PROCESS from the newly rendered icon
+        // so the node can be expanded/collapsed again without being blocked.
+        var newLi = this.getElement(id);
+        if (newLi) {
+            var icon = select('.' + ICON, newLi);
+            if (icon) {
+                removeClass([icon], PROCESS);
+            }
+            // ── Use preventScroll:true to avoid consuming virtualSkipNextScrollRender ─
+            newLi.focus({ preventScroll: true });
+        }
+        if (this.isLoaded) {
+            var currLi = this.getElement(id);
+            if (currLi) {
+                var colArgs = this.getExpandEvent(currLi, null);
+                colArgs.isInteracted = this.isInteracted;
+                this.trigger('nodeCollapsed', colArgs);
+            }
+        }
+    };
+    /**
+     * Updates the selected state of a node in `virtualFlatNodes` and re-renders the window.
+     *
+     * @param {string} id - The `data-uid` of the target node.
+     * @param {boolean} isSelected - Whether the node is now selected.
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.updateVirtualNodeSelection = function (id, isSelected) {
+        var idx = this.virtualNodeMap.get(id);
+        if (!isNOU(idx)) {
+            this.virtualFlatNodes[parseInt(idx.toString(), 10)].isSelected = isSelected;
+            this.renderVirtualItems();
+        }
+    };
+    /**
+     * Updates the checkbox state of a node in `virtualFlatNodes` and re-renders the window.
+     *
+     * @param {string} id - The `data-uid` of the target node.
+     * @param {'check' | 'uncheck' | 'indeterminate'} state - The new check state.
+     * @returns {void}
+     * @private
+     */
+    TreeView.prototype.updateVirtualNodeCheckState = function (id, state) {
+        var idx = this.virtualNodeMap.get(id);
+        if (!isNOU(idx)) {
+            this.virtualFlatNodes[parseInt(idx.toString(), 10)].isChecked =
+                state === 'check' ? true : state === 'indeterminate' ? 'indeterminate' : false;
+            // Keep the persistent indeterminate set in sync so flattenVisibleNodes()
+            // correctly restores state after any full list rebuild (e.g. collapse).
+            if (state === 'indeterminate') {
+                this.virtualIndeterminateNodesSet.add(id);
+            }
+            else {
+                this.virtualIndeterminateNodesSet.delete(id);
+            }
+            this.renderVirtualItems();
+        }
+    };
+    // ═══════════════════════════════════════════════════════════════════════════════
+    //  END VIRTUALIZATION
+    // ═══════════════════════════════════════════════════════════════════════════════
     /**
      * Called internally if any of the property value changed.
      *
@@ -5330,6 +6714,33 @@ var TreeView = /** @class */ (function (_super) {
                     this.listBaseOption.itemNavigable = newProp.fullRowNavigable;
                     this.reRenderNodes();
                     break;
+                case 'enableVirtualization':
+                    if (this.enableVirtualization) {
+                        if (!isNOU(this.height)) {
+                            this.initVirtualization();
+                        }
+                    }
+                    else {
+                        // Tear down virtualization and do a full re-render
+                        this.unwireVirtualScrollEvents();
+                        this.destroyVirtualMask();
+                        removeClass([this.element], VIRTUALIZATION);
+                        this.element.style.height = '';
+                        this.element.style.overflowY = '';
+                        this.reRenderNodes();
+                    }
+                    break;
+                case 'height':
+                    if (this.enableVirtualization) {
+                        // Re-initialise so the new height takes effect
+                        this.unwireVirtualScrollEvents();
+                        this.initVirtualization();
+                    }
+                    else {
+                        var px = this.parseHeightToPixels();
+                        this.element.style.height = px > 0 ? px + 'px' : '';
+                    }
+                    break;
             }
         }
     };
@@ -5339,6 +6750,13 @@ var TreeView = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeView.prototype.destroy = function () {
+        // Tear down virtualization before standard cleanup
+        if (this.enableVirtualization) {
+            this.unwireVirtualScrollEvents();
+            this.destroyVirtualMask();
+            this.virtualFlatNodes = [];
+            this.virtualNodeMap.clear();
+        }
         this.clearTemplate();
         this.element.removeAttribute('aria-activedescendant');
         this.unWireEvents();
@@ -5423,9 +6841,25 @@ var TreeView = /** @class */ (function (_super) {
         if (isNOU(fNode)) {
             this.setNodeFocusable();
         }
-        this.updateCheckedStateFromDS();
-        if (this.showCheckBox && dropLi && this.autoCheck) {
-            this.ensureParentCheckState(dropLi);
+        // In virtual mode (with a fixed height), rebuild the flat node list and re-render
+        // the window so the newly added nodes appear in the correct hierarchical position.
+        // When height is not provided, the tree uses normal rendering and the DOM is
+        // already updated by addGivenNodes() above.
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            this.setRootData();
+            this.rebuildVirtualCheckCache();
+            this.virtualFlatNodes = this.flattenVisibleNodes();
+            this.rebuildVirtualNodeMap();
+            var win = this.getVirtualWindow();
+            this.virtualStartIndex = win.startIndex;
+            this.virtualEndIndex = win.endIndex;
+            this.renderVirtualItems();
+        }
+        else {
+            this.updateCheckedStateFromDS();
+            if (this.showCheckBox && dropLi && this.autoCheck) {
+                this.ensureParentCheckState(dropLi);
+            }
         }
         if ((this.fields.dataSource instanceof DataManager === false)) {
             this.preventExpand = false;
@@ -5470,6 +6904,25 @@ var TreeView = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeView.prototype.collapseAll = function (nodes, level, excludeHiddenNodes) {
+        var _this = this;
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.virtualExpandedNodesSet.clear();
+            this.setProperties({ expandedNodes: [] }, true);
+            var setAllCollapsed_1 = function (nodes) {
+                if (!nodes) {
+                    return;
+                }
+                for (var i = 0; i < nodes.length; i++) {
+                    var node = nodes[parseInt(i.toString(), 10)];
+                    node['isExpanded'] = false;
+                    var children = getValue(_this.fields.child.toString(), node);
+                    if (children && Array.isArray(children)) {
+                        setAllCollapsed_1(children);
+                    }
+                }
+            };
+            setAllCollapsed_1(this.treeData);
+        }
         if (!isNOU(nodes)) {
             this.doGivenAction(nodes, COLLAPSIBLE, false);
         }
@@ -5547,6 +7000,33 @@ var TreeView = /** @class */ (function (_super) {
      */
     TreeView.prototype.expandAll = function (nodes, level, excludeHiddenNodes, preventAnimation) {
         this.isAnimate = !preventAnimation;
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            var allParentIds_1 = [];
+            var idFieldName_1 = this.fields.id;
+            var childFieldName = this.fields.child.toString();
+            var isDataTypeFlat = this.dataType === 1;
+            var processAllParents = function (nodeList) {
+                if (!nodeList) {
+                    return;
+                }
+                for (var i = 0; i < nodeList.length; i++) {
+                    var node = nodeList[parseInt(i.toString(), 10)];
+                    var nodeId = getValue(idFieldName_1, node);
+                    if (node.hasChild) {
+                        allParentIds_1.push(nodeId);
+                        node.isExpanded = true;
+                    }
+                }
+            };
+            processAllParents(this.treeData);
+            for (var i = 0; i < allParentIds_1.length; i++) {
+                var id = allParentIds_1[parseInt(i.toString(), 10)];
+                if (!this.virtualExpandedNodesSet.has(id)) {
+                    this.virtualExpandedNodesSet.add(id);
+                }
+            }
+            this.setProperties({ expandedNodes: allParentIds_1 }, true);
+        }
         if (!isNOU(nodes)) {
             this.doGivenAction(nodes, EXPANDABLE, true);
         }
@@ -5849,6 +7329,12 @@ var TreeView = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeView.prototype, "allowTextWrap", void 0);
+    __decorate([
+        Property(false)
+    ], TreeView.prototype, "enableVirtualization", void 0);
+    __decorate([
+        Property()
+    ], TreeView.prototype, "height", void 0);
     __decorate([
         Complex({}, NodeAnimationSettings)
     ], TreeView.prototype, "animation", void 0);