@syncfusion/ej2-navigations 34.2.3 → 34.2.4

package/src/treeview/treeview.js

@@ -228,54 +228,25 @@ 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. */
+        // Virtualization state
         _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;
     }
@@ -578,16 +549,6 @@ 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',
@@ -1674,7 +1635,6 @@ var TreeView = /** @class */ (function (_super) {
             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) {
@@ -1695,20 +1655,15 @@ var TreeView = /** @class */ (function (_super) {
             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;
                     if (this.treeData && this.fields && this.fields.isChecked) {
-                        setValue(this.fields.isChecked, false, this.treeData[parseInt(id.toString(), 10) - 1]);
+                        this.updateField(this.treeData, this.fields, id, this.fields.isChecked, false);
                     }
                     if (this.autoCheck && this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].hasChildren) {
                         this.setVirtualChildCheckState(id, false);
@@ -1754,8 +1709,6 @@ var TreeView = /** @class */ (function (_super) {
                 }
             }
         }
-        // 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++) {
@@ -1901,7 +1854,6 @@ 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();
         }
@@ -2041,9 +1993,6 @@ var TreeView = /** @class */ (function (_super) {
     };
     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) {
@@ -2172,9 +2121,6 @@ var TreeView = /** @class */ (function (_super) {
     };
     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) {
@@ -2645,7 +2591,6 @@ 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');
             }
@@ -2661,7 +2606,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.enableVirtualization && !isNOU(this.height)) {
             this.virtualSelectedNodesSet.add(id);
             var actualIndex = this.virtualNodeMap.get(id);
-            if (actualIndex && actualIndex > -1) {
+            if (!isNOU(actualIndex) && actualIndex > -1) {
                 this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].selected = true;
             }
         }
@@ -2682,7 +2627,7 @@ var TreeView = /** @class */ (function (_super) {
             var id = liEle.getAttribute('data-uid');
             this.virtualSelectedNodesSet.delete(id);
             var actualIndex = this.virtualNodeMap.get(id);
-            if (actualIndex && actualIndex > -1) {
+            if (!isNOU(actualIndex) && actualIndex > -1) {
                 this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].selected = false;
             }
         }
@@ -2777,12 +2722,6 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     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;
@@ -2900,9 +2839,6 @@ 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) {
@@ -3334,7 +3270,6 @@ var TreeView = /** @class */ (function (_super) {
     };
     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)) {
@@ -3346,26 +3281,14 @@ var TreeView = /** @class */ (function (_super) {
                 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)) {
@@ -3466,18 +3389,6 @@ 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
@@ -3732,12 +3643,6 @@ 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;
@@ -4185,11 +4090,49 @@ var TreeView = /** @class */ (function (_super) {
             this.fields.dataSource = this.treeData;
         }
         this.triggerEvent('nodeDropped', nodeData);
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            this.setRootData();
+            this.rebuildVirtualCheckCache();
+            this.virtualFlatNodes = this.flattenVisibleNodes();
+            this.rebuildVirtualNodeMap();
+            var scrollTopSnapshot = this.element.scrollTop;
+            var win = this.getVirtualWindowAt(scrollTopSnapshot);
+            this.virtualStartIndex = win.startIndex;
+            this.virtualEndIndex = win.endIndex;
+            this.virtualSkipNextScrollRender = true;
+            this.renderVirtualItems();
+        }
     };
     TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
         var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
         var collapse = closest(e.target, '.' + COLLAPSIBLE);
         var expand = closest(e.target, '.' + EXPANDABLE);
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            var routesToSiblingBranch = !dragLi.classList.contains('e-disable') && !checkWrapper &&
+                ((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3) ||
+                    (expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19) ||
+                    (!expand && !collapse));
+            if (routesToSiblingBranch) {
+                if (dropTarget.nodeName === 'LI') {
+                    this.virtualMoveAsSibling(dragLi, dropLi, e, dragObj);
+                }
+                else if (dropTarget.firstElementChild && dropTarget.classList.contains(ROOT)) {
+                    if (dropTarget.firstElementChild.nodeName === 'UL') {
+                        this.virtualMoveAsSibling(dragLi, dropLi, e, dragObj);
+                    }
+                }
+                else if ((dropTarget.classList.contains('e-icon-collapsible')) || (dropTarget.classList.contains('e-icon-expandable'))) {
+                    this.virtualMoveAsSibling(dragLi, dropLi, e, dragObj);
+                }
+                else {
+                    this.virtualMoveAsChild(dragLi, dropLi, dragObj, offsetY, dropTarget);
+                }
+            }
+            else {
+                this.virtualMoveAsChild(dragLi, dropLi, dragObj, offsetY, dropTarget);
+            }
+            return;
+        }
         if (!dragLi.classList.contains('e-disable') && !checkWrapper && ((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3) || (expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19) || (!expand && !collapse))) {
             if (dropTarget.nodeName === 'LI') {
                 this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);
@@ -4213,6 +4156,62 @@ var TreeView = /** @class */ (function (_super) {
             this.ensureIndeterminate();
         }
     };
+    TreeView.prototype.virtualMoveAsSibling = function (dragLi, dropLi, e, dragObj) {
+        var dropUl = closest(dropLi, '.' + PARENTITEM);
+        var pre;
+        if (e.target.offsetHeight > 0 && e.event.offsetY > e.target.offsetHeight - 2) {
+            pre = false;
+        }
+        else if (e.event.offsetY < 2) {
+            pre = true;
+        }
+        else if (e.target.classList.contains('e-icon-expandable') || (e.target.classList.contains('e-icon-collapsible'))) {
+            if ((e.event.offsetY < 5) || (e.event.offsetX < 3)) {
+                pre = true;
+            }
+            else if ((e.event.offsetY > 15) || (e.event.offsetX > 17)) {
+                pre = false;
+            }
+        }
+        this.moveData(dragLi, dropLi, dropUl, pre, dragObj);
+    };
+    TreeView.prototype.virtualMoveAsChild = function (dragLi, dropLi, dragObj, offsetY, dropTarget) {
+        var pos = offsetY;
+        var isSiblingMarker = dropTarget.classList.contains('e-sibling');
+        var refLi = (pos < 7 && !isSiblingMarker) || (isSiblingMarker &&
+            dropLi.lastChild && !dropLi.lastChild.classList.contains('e-sibling'))
+            ? dropLi : null;
+        var dropTargetHt = dropTarget;
+        var isAfter = (dropTargetHt.offsetHeight > 0 && pos > dropTargetHt.offsetHeight - 10);
+        if (refLi) {
+            var dropParentUl = closest(dropLi, '.' + PARENTITEM);
+            this.moveData(dragLi, dropLi, dropParentUl, true, dragObj);
+        }
+        else if (isAfter) {
+            var dropParentUl = closest(dropLi, '.' + PARENTITEM);
+            this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);
+        }
+        else {
+            var dropIcon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);
+            var dropIsCollapsedParent = dropIcon && dropIcon.classList.contains(EXPANDABLE);
+            var dropIsLeaf = isNOU(dropIcon);
+            if (this.preventExpand !== true && (dropIsCollapsedParent || dropIsLeaf)) {
+                var dropLiId = dropLi.getAttribute('data-uid');
+                if (dropLiId && this.expandedNodes.indexOf(dropLiId) === -1) {
+                    this.expandedNodes.push(dropLiId);
+                }
+                if (this.virtualExpandedNodesSet && dropLiId) {
+                    this.virtualExpandedNodesSet.add(dropLiId);
+                }
+                var dropRecord = this.findNodeInTreeData(dropLiId);
+                if (dropRecord && this.fields && this.fields.expanded) {
+                    setValue(this.fields.expanded, true, dropRecord);
+                }
+            }
+            var dropUl = select('.' + PARENTITEM, dropLi) || dropLi;
+            this.moveData(dragLi, null, dropUl, true, dragObj);
+        }
+    };
     TreeView.prototype.dropAsSiblingNode = function (dragLi, dropLi, e, dragObj) {
         var dropUl = closest(dropLi, '.' + PARENTITEM);
         var dragParentUl = closest(dragLi, '.' + PARENTITEM);
@@ -4300,7 +4299,7 @@ var TreeView = /** @class */ (function (_super) {
                 delete removedData[0][this.fields.parentID];
             }
             else {
-                var currPid = this.isNumberTypeId ? parseFloat(parentId) : parentId;
+                var currPid = this.isNumberTypeId && parentId ? parseFloat(parentId) : parentId;
                 setValue(this.fields.parentID, currPid, removedData[0]);
             }
             this.treeData.splice(pos, 0, removedData[0]);
@@ -4442,7 +4441,7 @@ var TreeView = /** @class */ (function (_super) {
         var draggedNodeData = obj ? obj.dragData : null;
         var newParent = dropTarget ? this.parents(dropTarget, '.' + LISTITEM) : null;
         var dragLiParent = obj.dragLi.parentElement;
-        var dragParent = obj.dragLi ? closest(dragLiParent, '.' + LISTITEM) : null;
+        var dragParent = obj.dragLi && dragLiParent ? closest(dragLiParent, '.' + LISTITEM) : null;
         var targetParent = null;
         var indexValue = null;
         var iconCss = [DROPNEXT, DROPIN, DROPOUT, NODROP];
@@ -4451,7 +4450,7 @@ var TreeView = /** @class */ (function (_super) {
         var index = node ? closest(node, '.e-list-parent') : null;
         var i = 0;
         var position = null;
-        dragParent = (obj.dragLi && dragParent === null) ? closest(dragLiParent, '.' + ROOT) : dragParent;
+        dragParent = (obj.dragLi && dragParent === null) && dragLiParent ? closest(dragLiParent, '.' + ROOT) : dragParent;
         dragParent = (drop === true) ? this.dragParent : dragParent;
         if (cloneEle) {
             while (i < 4) {
@@ -5125,26 +5124,10 @@ 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) {
@@ -5506,10 +5489,6 @@ 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();
@@ -5578,16 +5557,6 @@ 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)) {
@@ -5599,13 +5568,6 @@ var TreeView = /** @class */ (function (_super) {
         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) {
@@ -5613,13 +5575,6 @@ var TreeView = /** @class */ (function (_super) {
         }
         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();
@@ -5640,20 +5595,10 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
     };
-    /**
-     * 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);
@@ -5661,40 +5606,29 @@ var TreeView = /** @class */ (function (_super) {
             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 selectedFieldName = this.fields.selected;
+        var levelMapper = level === 1 ? this.fields : this.getChildFields(this.fields, level, 1);
+        var childFieldName = levelMapper.child && levelMapper.child.toString();
+        var expandedFieldName = levelMapper.expanded;
+        var isCheckedFieldName = levelMapper.isChecked;
+        var iconCssFieldName = levelMapper.iconCss;
+        var imageUrlFieldName = levelMapper.imageUrl;
+        var idFieldName = levelMapper.id;
+        var textFieldName = levelMapper.text;
+        var selectedFieldName = levelMapper.selected;
+        var hasChildrenFieldName = levelMapper.hasChildren;
         var needsSorting = this.sortOrder !== 'None';
         var isDataTypeFlat = this.dataType === 1;
         var enableVirtualization = this.enableVirtualization;
@@ -5702,36 +5636,57 @@ var TreeView = /** @class */ (function (_super) {
             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 rawExpanded = !inExpandedNodes && expandedFieldName && getValue(expandedFieldName, raw) === true;
             var expanded = 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) {
+            var explicitHasChildren = hasChildrenFieldName ? getValue(hasChildrenFieldName, raw) : null;
+            if (levelMapper.dataSource instanceof DataManager && !isNOU(explicitHasChildren) && explicitHasChildren) {
+                hasChildren = true;
+            }
+            else 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);
+                var childrenObj = childFieldName ? getValue(childFieldName, raw) : null;
                 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') {
+            var parentChecked = null;
+            if (levelMapper.dataSource instanceof DataManager && level > 1 && this.autoCheck && parentId) {
+                if (this.virtualCheckedNodesSet.has(parentId) ||
+                    (this.checkedNodes && this.checkedNodes.indexOf(parentId) !== -1)) {
+                    parentChecked = true;
+                }
+                else {
+                    parentChecked = false;
+                }
+            }
+            var rawChecked = isCheckedFieldName && getValue(isCheckedFieldName, raw);
+            if (enableVirtualization && id && !this.virtualCheckedNodesSet.has(id)) {
+                if ((!isNullOrUndefined(rawChecked) && rawChecked.toString() === 'true') ||
+                    (levelMapper.dataSource instanceof DataManager && parentChecked === true)) {
                     this.virtualCheckedNodesSet.add(id);
                     if (this.checkedNodes && this.checkedNodes.indexOf(id) === -1) {
                         this.checkedNodes.push(id);
                     }
                 }
             }
+            else if (enableVirtualization && id && this.virtualCheckedNodesSet.has(id) && levelMapper.dataSource instanceof DataManager) {
+                if (level > 1 && !this.virtualIndeterminateNodesSet.has(parentId) && this.autoCheck &&
+                    ((!isNullOrUndefined(rawChecked) && rawChecked.toString() === 'false') || parentChecked === false)) {
+                    this.virtualCheckedNodesSet.delete(id);
+                    if (this.checkedNodes && this.checkedNodes.indexOf(id) === -1) {
+                        this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);
+                    }
+                }
+            }
             if (this.initialRender && enableVirtualization && id && selectedFieldName && !this.virtualSelectedNodesSet.has(id)) {
                 var rawSelected = getValue(selectedFieldName, raw);
                 if (!isNullOrUndefined(rawSelected) && rawSelected.toString() === 'true') {
@@ -5741,10 +5696,7 @@ var TreeView = /** @class */ (function (_super) {
                     }
                 }
             }
-            // Use cached Sets for O(1) lookup
             var selected = 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);
@@ -5758,22 +5710,19 @@ var TreeView = /** @class */ (function (_super) {
             };
             result.push(node);
             if (expanded && 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);
+                    var rawChildren = childFieldName ? getValue(childFieldName, raw) : null;
                     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));
                         }
@@ -5783,35 +5732,6 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
     };
-    /**
-     * 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++) {
@@ -5844,49 +5764,12 @@ var TreeView = /** @class */ (function (_super) {
         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)]);
@@ -5897,26 +5780,22 @@ var TreeView = /** @class */ (function (_super) {
         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
+                        ancestors.unshift(ancestor);
                         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);
@@ -5935,26 +5814,20 @@ var TreeView = /** @class */ (function (_super) {
                 }
             }
         }
-        // ── 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',
@@ -5966,30 +5839,11 @@ var TreeView = /** @class */ (function (_super) {
             }
             targetUl.appendChild(li);
             liListBuf.push(li);
-            // Register this node so its children in the same window can nest under it
             if (node.expanded && 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)];
@@ -5997,22 +5851,6 @@ var TreeView = /** @class */ (function (_super) {
                     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;
@@ -6020,53 +5858,36 @@ var TreeView = /** @class */ (function (_super) {
                 }
             }
         }
-        // 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.expanded ? COLLAPSIBLE : EXPANDABLE)
             });
             textWrap.appendChild(iconSpan);
         }
-        // Checkbox
         if (this.showCheckBox) {
             var checkWrap = createCheckBox(this.createElement, false, {
                 checked: node.isChecked === true,
@@ -6080,28 +5901,24 @@ var TreeView = /** @class */ (function (_super) {
             }
             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);
-        // nodeTemplate
         if (!isNOU(this.nodeTemplateFn)) {
             var rawData = this.findNodeInTreeData(node.id);
             if (!isNOU(rawData)) {
@@ -6109,7 +5926,6 @@ var TreeView = /** @class */ (function (_super) {
                 this.renderNodeTemplate(rawData, anchor, node.id);
             }
         }
-        // State classes
         if (node.expanded) {
             li.classList.add(EXPANDED);
             li.setAttribute('aria-expanded', 'true');
@@ -6125,80 +5941,43 @@ var TreeView = /** @class */ (function (_super) {
         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);
@@ -6209,29 +5988,13 @@ var TreeView = /** @class */ (function (_super) {
             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;
         }
@@ -6248,30 +6011,16 @@ var TreeView = /** @class */ (function (_super) {
             _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', {
@@ -6284,20 +6033,6 @@ var TreeView = /** @class */ (function (_super) {
                 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';
@@ -6315,14 +6050,6 @@ var TreeView = /** @class */ (function (_super) {
         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;
@@ -6334,12 +6061,6 @@ var TreeView = /** @class */ (function (_super) {
         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();
@@ -6352,52 +6073,26 @@ var TreeView = /** @class */ (function (_super) {
             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)) {
@@ -6416,25 +6111,13 @@ var TreeView = /** @class */ (function (_super) {
             this.element.scrollTop = nodeBottom - vpH;
         }
         else {
-            return; // already visible, no re-render needed
+            return;
         }
-        // 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();
     };
-    /**
-     * Recursively walks the treeData (and any nested `childFieldName` arrays) to
-     * find the node whose `idFieldName` matches the given `id` (compared as
-     * strings).  Used by the virtual-mode expand/collapse handlers so they can
-     * locate nodes at any depth — not just the root level — before writing the
-     * `expanded` flag back to the datasource.
-     *
-     * @param {string} id - The id (as a string) of the node to locate.
-     * @returns {Object | null} The matching raw datasource node, or null if not found.
-     * @private
-     */
     TreeView.prototype.findNodeInTreeData = function (id) {
         if (!this.treeData) {
             return null;
@@ -6462,12 +6145,19 @@ var TreeView = /** @class */ (function (_super) {
         };
         return findRecursive(this.treeData);
     };
+    TreeView.prototype.getNodeLevel = function (id) {
+        if (!this.virtualFlatNodes) {
+            return 1;
+        }
+        for (var i = 0; i < this.virtualFlatNodes.length; i++) {
+            if (this.virtualFlatNodes[parseInt(i.toString(), 10)].id === id) {
+                return this.virtualFlatNodes[parseInt(i.toString(), 10)].level;
+            }
+        }
+        return 1;
+    };
     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.
+        var _this = this;
         if (this.virtualScrollRAF !== null) {
             cancelAnimationFrame(this.virtualScrollRAF);
             this.virtualScrollRAF = null;
@@ -6475,7 +6165,6 @@ var TreeView = /** @class */ (function (_super) {
         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);
         }
@@ -6485,56 +6174,76 @@ var TreeView = /** @class */ (function (_super) {
                 setValue(this.fields.expanded, true, acutalRootData);
             }
         }
-        // ── 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;
         }
+        if (this.fields.dataSource instanceof DataManager && !this.isOffline) {
+            var parentNode = this.findNodeInTreeData(id);
+            if (parentNode && !isNOU(parentNode)) {
+                var childFieldName = this.fields.child.toString();
+                var childrenObj = getValue(childFieldName, parentNode);
+                var childrenNotLoaded = isNOU(childrenObj) || !Array.isArray(childrenObj) ||
+                    childrenObj.length === 0;
+                if (childrenNotLoaded) {
+                    this.loadVirtualChildData(id, parentNode, function () {
+                        _this.completeVirtualExpand(id, isKeyboardNav);
+                    });
+                    return;
+                }
+            }
+        }
+        this.completeVirtualExpand(id, isKeyboardNav);
+    };
+    TreeView.prototype.loadVirtualChildData = function (parentId, parentNode, callback) {
+        var _this = this;
+        var level = this.getNodeLevel(parentId);
+        var mapper = this.getChildFields(this.fields, level + 1, 1);
+        if (isNOU(mapper) || isNOU(mapper.dataSource)) {
+            if (callback) {
+                callback();
+            }
+            return;
+        }
+        mapper.dataSource.executeQuery(this.getQuery(mapper, parentId)).then(function (e) {
+            var childItems = e.result;
+            if (!isNOU(childItems) && childItems.length > 0) {
+                var childFieldName = _this.fields.child.toString();
+                setValue(childFieldName, childItems, parentNode);
+                if (_this.dataType === 2) {
+                    var nodeInTree = _this.findNodeInTreeData(parentId);
+                    if (nodeInTree) {
+                        setValue(childFieldName, childItems, nodeInTree);
+                    }
+                }
+            }
+            if (callback) {
+                callback();
+            }
+        }).catch(function (e) {
+            _this.trigger('actionFailure', { error: e });
+            if (callback) {
+                callback();
+            }
+        });
+    };
+    TreeView.prototype.completeVirtualExpand = function (id, isKeyboardNav) {
         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) {
@@ -6547,9 +6256,6 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     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;
@@ -6558,7 +6264,6 @@ var TreeView = /** @class */ (function (_super) {
         if (idx !== -1) {
             this.expandedNodes.splice(idx, 1);
         }
-        // Also update virtualExpandedNodesSet to keep it in sync
         if (this.virtualExpandedNodesSet) {
             this.virtualExpandedNodesSet.delete(id);
         }
@@ -6568,13 +6273,6 @@ var TreeView = /** @class */ (function (_super) {
                 setValue(this.fields.expanded, false, acutalRootData);
             }
         }
-        // ── 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;
         }
@@ -6583,28 +6281,18 @@ var TreeView = /** @class */ (function (_super) {
         }
         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) {
@@ -6616,14 +6304,6 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
     };
-    /**
-     * 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} selected - Whether the node is now selected.
-     * @returns {void}
-     * @private
-     */
     TreeView.prototype.updateVirtualNodeSelection = function (id, selected) {
         var idx = this.virtualNodeMap.get(id);
         if (!isNOU(idx)) {
@@ -6631,21 +6311,11 @@ var TreeView = /** @class */ (function (_super) {
             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);
             }
@@ -6655,9 +6325,6 @@ var TreeView = /** @class */ (function (_super) {
             this.renderVirtualItems();
         }
     };
-    // ═══════════════════════════════════════════════════════════════════════════════
-    //  END VIRTUALIZATION
-    // ═══════════════════════════════════════════════════════════════════════════════
     /**
      * Called internally if any of the property value changed.
      *
@@ -6802,7 +6469,6 @@ var TreeView = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        // Tear down virtualization and do a full re-render
                         this.unwireVirtualScrollEvents();
                         this.destroyVirtualMask();
                         removeClass([this.element], VIRTUALIZATION);
@@ -6813,7 +6479,6 @@ var TreeView = /** @class */ (function (_super) {
                     break;
                 case 'height':
                     if (this.enableVirtualization) {
-                        // Re-initialise so the new height takes effect
                         this.unwireVirtualScrollEvents();
                         this.initVirtualization();
                     }
@@ -6831,7 +6496,6 @@ var TreeView = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeView.prototype.destroy = function () {
-        // Tear down virtualization before standard cleanup
         if (this.enableVirtualization) {
             this.unwireVirtualScrollEvents();
             this.destroyVirtualMask();
@@ -6922,10 +6586,6 @@ var TreeView = /** @class */ (function (_super) {
         if (isNOU(fNode)) {
             this.setNodeFocusable();
         }
-        // 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();