@syncfusion/ej2-navigations 34.2.3 → 34.2.4

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

@@ -10698,54 +10698,25 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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;
     }
     /**
@@ -11042,16 +11013,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     renderItems(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 && !isNullOrUndefined(this.height)) {
             this.ulElement = this.createElement('ul', {
                 className: PARENTITEM + ' ' + 'e-ul',
@@ -12127,7 +12088,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.checkDisabledState(id);
         }
         if (this.enableVirtualization) {
-            // Clear any indeterminate state — node is now fully checked
             this.virtualIndeterminateNodesSet.delete(id);
             const actualIndex = this.virtualNodeMap.get(id);
             if (!isNullOrUndefined(actualIndex) && actualIndex > -1) {
@@ -12148,20 +12108,15 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             const actualIndex = this.virtualNodeMap.get(id);
             if (!isNullOrUndefined(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);
@@ -12207,8 +12162,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 }
             }
         }
-        // Collapsed children are not present in virtualFlatNodes, so walk the raw data
-        // to keep this.treeData and checkedNodes in sync for hidden descendants too.
         const collapsedChildren = this.getChildNodes(this.treeData, parentId);
         if (collapsedChildren) {
             for (let i = 0; i < collapsedChildren.length; i++) {
@@ -12352,7 +12305,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         this.isLoaded = true;
         this.isNodeDropped = false;
-        // Initialise (or re-initialise) virtual mode after data binding has settled
         if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
             this.initVirtualization();
         }
@@ -12490,9 +12442,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.trigger('nodeClicked', eventArgs);
     }
     expandNode(currLi, icon, loaded, isKeyboardNav) {
-        // 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 && !isNullOrUndefined(this.height)) {
             const id = currLi ? currLi.getAttribute('data-uid') : null;
             if (id) {
@@ -12619,9 +12568,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     nodeCollapseAction(currLi, icon, colArgs, isKeyboardNav) {
-        // 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 && !isNullOrUndefined(this.height)) {
             const id = currLi ? currLi.getAttribute('data-uid') : null;
             if (id) {
@@ -13082,7 +13028,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             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');
             }
@@ -13098,7 +13043,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
             this.virtualSelectedNodesSet.add(id);
             const actualIndex = this.virtualNodeMap.get(id);
-            if (actualIndex && actualIndex > -1) {
+            if (!isNullOrUndefined(actualIndex) && actualIndex > -1) {
                 this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].selected = true;
             }
         }
@@ -13119,7 +13064,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             const id = liEle.getAttribute('data-uid');
             this.virtualSelectedNodesSet.delete(id);
             const actualIndex = this.virtualNodeMap.get(id);
-            if (actualIndex && actualIndex > -1) {
+            if (!isNullOrUndefined(actualIndex) && actualIndex > -1) {
                 this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].selected = false;
             }
         }
@@ -13212,12 +13157,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     nodeExpandAction(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 && !isNullOrUndefined(this.height)) {
             this.expandNode(currLi, icon, undefined, isKeyboardNav);
             return;
@@ -13334,9 +13273,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         });
     }
     navigateToFocus(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 && !isNullOrUndefined(this.height)) {
             const focusedLi = this.getFocusedNode();
             if (focusedLi) {
@@ -13766,7 +13702,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     }
     focusNextNode(li, isTowards) {
         if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
-            // Determine the id of the node one step in the requested direction
             const currentId = li ? li.getAttribute('data-uid') : null;
             let currentIdx = -1;
             if (!isNullOrUndefined(currentId)) {
@@ -13778,26 +13713,14 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 return;
             }
             const 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.
             const allLi = this.element.querySelectorAll('.' + LISTITEM + '.' + FOCUS);
             for (let k = 0; k < allLi.length; k++) {
                 allLi[parseInt(k.toString(), 10)].classList.remove(FOCUS);
                 allLi[parseInt(k.toString(), 10)].classList.remove(FOCUSED$1);
                 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
             const prevNode = currentId ? this.getElement(currentId) : li;
             const nextNode = this.getElement(targetId);
             if (!isNullOrUndefined(nextNode)) {
@@ -13898,18 +13821,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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.
         const actuallyFocusedElement = document.activeElement;
         const isAlreadyFocusedInVirtualMode = this.enableVirtualization
             && actuallyFocusedElement === focusedElement
@@ -14162,12 +14073,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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) {
             const id = liEle.getAttribute('data-uid');
             const idx = this.virtualNodeMap ? this.virtualNodeMap.get(id) : undefined;
@@ -14611,11 +14516,49 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.fields.dataSource = this.treeData;
         }
         this.triggerEvent('nodeDropped', nodeData);
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.setRootData();
+            this.rebuildVirtualCheckCache();
+            this.virtualFlatNodes = this.flattenVisibleNodes();
+            this.rebuildVirtualNodeMap();
+            const scrollTopSnapshot = this.element.scrollTop;
+            const win = this.getVirtualWindowAt(scrollTopSnapshot);
+            this.virtualStartIndex = win.startIndex;
+            this.virtualEndIndex = win.endIndex;
+            this.virtualSkipNextScrollRender = true;
+            this.renderVirtualItems();
+        }
     }
     appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
         const checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
         const collapse = closest(e.target, '.' + COLLAPSIBLE);
         const expand = closest(e.target, '.' + EXPANDABLE);
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            const 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);
@@ -14639,6 +14582,62 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.ensureIndeterminate();
         }
     }
+    virtualMoveAsSibling(dragLi, dropLi, e, dragObj) {
+        const dropUl = closest(dropLi, '.' + PARENTITEM);
+        let 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);
+    }
+    virtualMoveAsChild(dragLi, dropLi, dragObj, offsetY, dropTarget) {
+        const pos = offsetY;
+        const isSiblingMarker = dropTarget.classList.contains('e-sibling');
+        const refLi = (pos < 7 && !isSiblingMarker) || (isSiblingMarker &&
+            dropLi.lastChild && !dropLi.lastChild.classList.contains('e-sibling'))
+            ? dropLi : null;
+        const dropTargetHt = dropTarget;
+        const isAfter = (dropTargetHt.offsetHeight > 0 && pos > dropTargetHt.offsetHeight - 10);
+        if (refLi) {
+            const dropParentUl = closest(dropLi, '.' + PARENTITEM);
+            this.moveData(dragLi, dropLi, dropParentUl, true, dragObj);
+        }
+        else if (isAfter) {
+            const dropParentUl = closest(dropLi, '.' + PARENTITEM);
+            this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);
+        }
+        else {
+            const dropIcon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);
+            const dropIsCollapsedParent = dropIcon && dropIcon.classList.contains(EXPANDABLE);
+            const dropIsLeaf = isNullOrUndefined(dropIcon);
+            if (this.preventExpand !== true && (dropIsCollapsedParent || dropIsLeaf)) {
+                const dropLiId = dropLi.getAttribute('data-uid');
+                if (dropLiId && this.expandedNodes.indexOf(dropLiId) === -1) {
+                    this.expandedNodes.push(dropLiId);
+                }
+                if (this.virtualExpandedNodesSet && dropLiId) {
+                    this.virtualExpandedNodesSet.add(dropLiId);
+                }
+                const dropRecord = this.findNodeInTreeData(dropLiId);
+                if (dropRecord && this.fields && this.fields.expanded) {
+                    setValue(this.fields.expanded, true, dropRecord);
+                }
+            }
+            const dropUl = select('.' + PARENTITEM, dropLi) || dropLi;
+            this.moveData(dragLi, null, dropUl, true, dragObj);
+        }
+    }
     dropAsSiblingNode(dragLi, dropLi, e, dragObj) {
         const dropUl = closest(dropLi, '.' + PARENTITEM);
         const dragParentUl = closest(dragLi, '.' + PARENTITEM);
@@ -14726,7 +14725,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 delete removedData[0][this.fields.parentID];
             }
             else {
-                const currPid = this.isNumberTypeId ? parseFloat(parentId) : parentId;
+                const currPid = this.isNumberTypeId && parentId ? parseFloat(parentId) : parentId;
                 setValue(this.fields.parentID, currPid, removedData[0]);
             }
             this.treeData.splice(pos, 0, removedData[0]);
@@ -14868,7 +14867,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         const draggedNodeData = obj ? obj.dragData : null;
         const newParent = dropTarget ? this.parents(dropTarget, '.' + LISTITEM) : null;
         const dragLiParent = obj.dragLi.parentElement;
-        let dragParent = obj.dragLi ? closest(dragLiParent, '.' + LISTITEM) : null;
+        let dragParent = obj.dragLi && dragLiParent ? closest(dragLiParent, '.' + LISTITEM) : null;
         let targetParent = null;
         let indexValue = null;
         const iconCss = [DROPNEXT, DROPIN, DROPOUT, NODROP];
@@ -14877,7 +14876,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         const index = node ? closest(node, '.e-list-parent') : null;
         let i = 0;
         let 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) {
@@ -15544,26 +15543,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     keyDownHandler(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) {
@@ -15922,10 +15905,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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 && !isNullOrUndefined(this.height)) {
             this.virtualFlatNodes = this.flattenVisibleNodes();
             this.rebuildVirtualNodeMap();
@@ -15988,16 +15967,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         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
-     */
     parseHeightToPixels() {
         const h = this.height;
         if (isNullOrUndefined(h)) {
@@ -16009,13 +15978,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         const 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
-     */
     measureVirtualItemHeight() {
         const firstLi = select('.' + LISTITEM, this.element);
         if (firstLi && firstLi.offsetHeight > 0) {
@@ -16023,13 +15985,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         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
-     */
     rebuildVirtualCheckCache() {
         this.virtualExpandedNodesSet.clear();
         this.virtualCheckedNodesSet.clear();
@@ -16050,20 +16005,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
     }
-    /**
-     * 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
-     */
     flattenVisibleNodes() {
-        // Build cached Sets for fast lookups
         this.rebuildVirtualCheckCache();
         const result = [];
         if (this.dataType === 1) {
-            // Flat data with parentID field — use getChildGroup to find root nodes
             let rootNodes = [];
             if (this.groupedData) {
                 rootNodes = this.getChildGroup(this.groupedData, null, true);
@@ -16071,40 +16016,29 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             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
             const 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
-     */
     flattenNodeRecursive(nodes, level, parentId, result) {
         if (!nodes || nodes.length === 0) {
             return;
         }
-        // Cache field names and settings outside the loop to avoid repeated conversions
-        const childFieldName = this.fields.child.toString();
-        const expandedFieldName = this.fields.expanded;
-        const isCheckedFieldName = this.fields.isChecked;
-        const iconCssFieldName = this.fields.iconCss;
-        const imageUrlFieldName = this.fields.imageUrl;
-        const idFieldName = this.fields.id;
-        const textFieldName = this.fields.text;
-        const selectedFieldName = this.fields.selected;
+        const levelMapper = level === 1 ? this.fields : this.getChildFields(this.fields, level, 1);
+        const childFieldName = levelMapper.child && levelMapper.child.toString();
+        const expandedFieldName = levelMapper.expanded;
+        const isCheckedFieldName = levelMapper.isChecked;
+        const iconCssFieldName = levelMapper.iconCss;
+        const imageUrlFieldName = levelMapper.imageUrl;
+        const idFieldName = levelMapper.id;
+        const textFieldName = levelMapper.text;
+        const selectedFieldName = levelMapper.selected;
+        const hasChildrenFieldName = levelMapper.hasChildren;
         const needsSorting = this.sortOrder !== 'None';
         const isDataTypeFlat = this.dataType === 1;
         const enableVirtualization = this.enableVirtualization;
@@ -16112,36 +16046,57 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             const raw = nodes[i];
             const id = isNullOrUndefined(raw[idFieldName]) ? '' : raw[idFieldName].toString();
             const text = isNullOrUndefined(raw[textFieldName]) ? '' : raw[textFieldName].toString();
-            // Use expandedNodes as the single source of truth.
             const inExpandedNodes = this.virtualExpandedNodesSet.has(id);
-            const rawExpanded = !inExpandedNodes && getValue(expandedFieldName, raw) === true;
+            const rawExpanded = !inExpandedNodes && expandedFieldName && getValue(expandedFieldName, raw) === true;
             const expanded = inExpandedNodes || rawExpanded;
             if (rawExpanded && id) {
                 this.expandedNodes.push(id);
                 this.virtualExpandedNodesSet.add(id);
             }
-            // Inline hasChildRecords check to avoid function call (optimization)
             let hasChildren = false;
-            if (isDataTypeFlat) {
+            const explicitHasChildren = hasChildrenFieldName ? getValue(hasChildrenFieldName, raw) : null;
+            if (levelMapper.dataSource instanceof DataManager && !isNullOrUndefined(explicitHasChildren) && explicitHasChildren) {
+                hasChildren = true;
+            }
+            else if (isDataTypeFlat) {
                 if (this.groupedData) {
                     const groupedChild = this.getChildGroup(this.groupedData, id, false);
                     hasChildren = !isNullOrUndefined(groupedChild) && groupedChild.length > 0;
                 }
             }
             else {
-                const childrenObj = getValue(childFieldName, raw);
+                const childrenObj = childFieldName ? getValue(childFieldName, raw) : null;
                 hasChildren = !isNullOrUndefined(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)) {
-                const rawChecked = getValue(isCheckedFieldName, raw);
-                if (!isNullOrUndefined(rawChecked) && rawChecked.toString() === 'true') {
+            let 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;
+                }
+            }
+            const 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)) {
                 const rawSelected = getValue(selectedFieldName, raw);
                 if (!isNullOrUndefined(rawSelected) && rawSelected.toString() === 'true') {
@@ -16151,10 +16106,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     }
                 }
             }
-            // Use cached Sets for O(1) lookup
             const 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.
             const isChecked = (enableVirtualization && this.virtualIndeterminateNodesSet.has(id))
                 ? 'indeterminate'
                 : this.virtualCheckedNodesSet.has(id);
@@ -16168,22 +16120,19 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             };
             result.push(node);
             if (expanded && hasChildren) {
-                // Determine children list
                 let 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 {
-                    const rawChildren = getValue(childFieldName, raw);
+                    const rawChildren = childFieldName ? getValue(childFieldName, raw) : null;
                     if (!isNullOrUndefined(rawChildren) && Array.isArray(rawChildren)) {
                         children = rawChildren;
-                        // Only sort if needed
                         if (needsSorting) {
                             children = ListBase.getDataSource(children, ListBase.addSorting(this.sortOrder, this.fields.text));
                         }
@@ -16193,35 +16142,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
     }
-    /**
-     * Checks whether a raw datasource node has child records.
-     *
-     * @param {Object} raw - Raw datasource object.
-     * @returns {boolean} True if children exist.
-     * @private
-     */
-    hasChildRecords(raw) {
-        if (this.dataType === 1) {
-            if (!this.groupedData) {
-                return false;
-            }
-            const rawId = raw[this.fields.id];
-            if (isNullOrUndefined(rawId)) {
-                return false;
-            }
-            const groupedChild = this.getChildGroup(this.groupedData, rawId.toString(), false);
-            return !isNullOrUndefined(groupedChild) && groupedChild.length > 0;
-        }
-        const childField = this.fields.child.toString();
-        const children = getValue(childField, raw);
-        return !isNullOrUndefined(children) && Array.isArray(children) && children.length > 0;
-    }
-    /**
-     * Rebuilds `virtualNodeMap` (id → index) from the current `virtualFlatNodes`.
-     *
-     * @returns {void}
-     * @private
-     */
     rebuildVirtualNodeMap() {
         this.virtualNodeMap.clear();
         for (let i = 0; i < this.virtualFlatNodes.length; i++) {
@@ -16254,49 +16174,12 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         const paddingBottom = Math.max(0, (total - end) * itemH);
         return { paddingTop, 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
-     */
     renderVirtualItems() {
         if (!this.ulElement) {
             return;
         }
         const 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.
         const focusedUid = this.virtualFocusedId || null;
-        // ── Clear previous render (direct children only) ─────────────────────────
         const existingItems = ul.querySelectorAll(':scope > li');
         for (let i = existingItems.length - 1; i >= 0; i--) {
             ul.removeChild(existingItems[parseInt(i.toString(), 10)]);
@@ -16307,26 +16190,22 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.virtualStartIndex < this.virtualFlatNodes.length) {
             const firstNode = this.virtualFlatNodes[this.virtualStartIndex];
             if (firstNode.parentId) {
-                // Build the ancestor chain from root down to the immediate parent
                 const ancestors = [];
                 let searchId = firstNode.parentId;
                 while (searchId) {
                     const ancestorIdx = this.virtualNodeMap.get(searchId);
                     if (!isNullOrUndefined(ancestorIdx) && ancestorIdx < this.virtualStartIndex) {
                         const 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 (let a = 0; a < ancestors.length; a++) {
                     const ancestor = ancestors[parseInt(a.toString(), 10)];
                     const ancestorLi = this.createVirtualListItem(ancestor, false);
-                    // Find the correct container: root or a previously injected ancestor's <ul>
                     let targetUl = ul;
                     if (ancestor.parentId && renderedParentMap.has(ancestor.parentId)) {
                         const pe = renderedParentMap.get(ancestor.parentId);
@@ -16345,26 +16224,20 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 }
             }
         }
-        // ── Scroll-space padding (adjusted for injected ancestors) ────────────────
         const total = this.virtualFlatNodes.length;
         const start = this.virtualStartIndex;
         const end = this.virtualEndIndex;
         const 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.
         const 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) ────────────────────
         const liListBuf = [];
         for (let i = start; i < end; i++) {
             const node = this.virtualFlatNodes[parseInt(i.toString(), 10)];
             const li = this.createVirtualListItem(node, i === start);
-            // Find the correct parent container
             let targetUl = ul;
             if (node.parentId && renderedParentMap.has(node.parentId)) {
                 const 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',
@@ -16376,30 +16249,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
             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, 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.
         let focusRestored = false;
-        // 1. Prefer the currently active node if it is in the rendered window.
-        for (let k = 0; k < liListBuf.length; k++) {
-            const 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 (let k = 0; k < liListBuf.length; k++) {
                 const li = liListBuf[parseInt(k.toString(), 10)];
@@ -16407,22 +16261,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     li.setAttribute('tabindex', '0');
                     addClass([li], FOCUS);
                     addClass([li], FOCUSED$1);
-                    // ── 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;
@@ -16430,53 +16268,36 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 }
             }
         }
-        // 3. Finally default to the first item in the window.
         if (!focusRestored && liListBuf.length > 0) {
             const 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 (let k = 0; k < liListBuf.length; k++) {
             const 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
-     */
     createVirtualListItem(node, _isFirst) {
         const 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) {
             const fullRow = this.createElement('div', { className: FULLROW });
             li.appendChild(fullRow);
         }
-        // Text/icon wrapper
         const textWrap = this.createElement('div', { className: TEXTWRAP });
-        // Expand/collapse icon
         if (node.hasChildren) {
             const iconSpan = this.createElement('div', {
                 className: ICON + ' ' + (node.expanded ? COLLAPSIBLE : EXPANDABLE)
             });
             textWrap.appendChild(iconSpan);
         }
-        // Checkbox
         if (this.showCheckBox) {
             const checkWrap = createCheckBox(this.createElement, false, {
                 checked: node.isChecked === true,
@@ -16490,28 +16311,24 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
             textWrap.appendChild(checkWrap);
         }
-        // Icon
         if (node.iconCss) {
             const iconEl = this.createElement('span', {
                 className: ICON + ' ' + node.iconCss
             });
             textWrap.appendChild(iconEl);
         }
-        // Image
         if (node.imageUrl) {
             const img = document.createElement('img');
             img.src = node.imageUrl;
             img.classList.add(IMAGE);
             textWrap.appendChild(img);
         }
-        // Text anchor
         const anchor = this.createElement('span', {
             className: 'e-list-text',
             innerHTML: node.text
         });
         textWrap.appendChild(anchor);
         li.appendChild(textWrap);
-        // nodeTemplate
         if (!isNullOrUndefined(this.nodeTemplateFn)) {
             const rawData = this.findNodeInTreeData(node.id);
             if (!isNullOrUndefined(rawData)) {
@@ -16519,7 +16336,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 this.renderNodeTemplate(rawData, anchor, node.id);
             }
         }
-        // State classes
         if (node.expanded) {
             li.classList.add(EXPANDED);
             li.setAttribute('aria-expanded', 'true');
@@ -16535,80 +16351,43 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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
-     */
     initVirtualization() {
         addClass([this.element], VIRTUALIZATION);
-        // Apply container height
         const 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) {
             const 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
         const 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
-     */
     wireVirtualScrollEvents() {
         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
-     */
     unwireVirtualScrollEvents() {
         if (this.virtualScrollBound) {
             this.element.removeEventListener('scroll', this.virtualScrollBound);
@@ -16619,28 +16398,12 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             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
-     */
     onVirtualScroll() {
         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;
         }
@@ -16657,30 +16420,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             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(() => {
                 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
-     */
     createVirtualMask() {
         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.
         const rect = this.element.getBoundingClientRect();
         const scrollBarWidth = this.element.offsetWidth - this.element.clientWidth;
         const maskParent = this.createElement('div', {
@@ -16693,20 +16442,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 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
             const textHolder = this.createElement('span');
             textHolder.style.flex = '1';
             textHolder.style.height = '14px';
@@ -16724,14 +16459,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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
-     */
     updateMaskPosition() {
         if (!this.virtualMaskElement) {
             return;
@@ -16743,12 +16470,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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
-     */
     destroyVirtualMask() {
         for (let i = this.skeletonInstances.length - 1; i >= 0; i--) {
             this.skeletonInstances[parseInt(i.toString(), 10)].destroy();
@@ -16761,52 +16482,26 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             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
-     */
     showVirtualMask(_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
-     */
     hideVirtualMask() {
         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
-     */
     ensureVirtualNodeVisible(id) {
         const idx = this.virtualNodeMap.get(id);
         if (isNullOrUndefined(idx)) {
@@ -16825,25 +16520,13 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             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
         const 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
-     */
     findNodeInTreeData(id) {
         if (!this.treeData) {
             return null;
@@ -16871,12 +16554,18 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         };
         return findRecursive(this.treeData);
     }
+    getNodeLevel(id) {
+        if (!this.virtualFlatNodes) {
+            return 1;
+        }
+        for (let 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;
+    }
     handleVirtualExpand(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;
@@ -16884,7 +16573,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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);
         }
@@ -16894,56 +16582,75 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 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) {
+            const parentNode = this.findNodeInTreeData(id);
+            if (parentNode && !isNullOrUndefined(parentNode)) {
+                const childFieldName = this.fields.child.toString();
+                const childrenObj = getValue(childFieldName, parentNode);
+                const childrenNotLoaded = isNullOrUndefined(childrenObj) || !Array.isArray(childrenObj) ||
+                    childrenObj.length === 0;
+                if (childrenNotLoaded) {
+                    this.loadVirtualChildData(id, parentNode, () => {
+                        this.completeVirtualExpand(id, isKeyboardNav);
+                    });
+                    return;
+                }
+            }
+        }
+        this.completeVirtualExpand(id, isKeyboardNav);
+    }
+    loadVirtualChildData(parentId, parentNode, callback) {
+        const level = this.getNodeLevel(parentId);
+        const mapper = this.getChildFields(this.fields, level + 1, 1);
+        if (isNullOrUndefined(mapper) || isNullOrUndefined(mapper.dataSource)) {
+            if (callback) {
+                callback();
+            }
+            return;
+        }
+        mapper.dataSource.executeQuery(this.getQuery(mapper, parentId)).then((e) => {
+            const childItems = e.result;
+            if (!isNullOrUndefined(childItems) && childItems.length > 0) {
+                const childFieldName = this.fields.child.toString();
+                setValue(childFieldName, childItems, parentNode);
+                if (this.dataType === 2) {
+                    const nodeInTree = this.findNodeInTreeData(parentId);
+                    if (nodeInTree) {
+                        setValue(childFieldName, childItems, nodeInTree);
+                    }
+                }
+            }
+            if (callback) {
+                callback();
+            }
+        }).catch((e) => {
+            this.trigger('actionFailure', { error: e });
+            if (callback) {
+                callback();
+            }
+        });
+    }
+    completeVirtualExpand(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.
         const scrollTopSnapshot = this.element.scrollTop;
         const 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.
         const newLi = this.getElement(id);
         if (newLi) {
             const 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) {
@@ -16956,9 +16663,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     handleVirtualCollapse(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;
@@ -16967,7 +16671,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (idx !== -1) {
             this.expandedNodes.splice(idx, 1);
         }
-        // Also update virtualExpandedNodesSet to keep it in sync
         if (this.virtualExpandedNodesSet) {
             this.virtualExpandedNodesSet.delete(id);
         }
@@ -16977,13 +16680,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 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;
         }
@@ -16992,28 +16688,18 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         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.
         const scrollTopSnapshot = this.element.scrollTop;
         const 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.
         const newLi = this.getElement(id);
         if (newLi) {
             const icon = select('.' + ICON, newLi);
             if (icon) {
                 removeClass([icon], PROCESS);
             }
-            // ── Use preventScroll:true to avoid consuming virtualSkipNextScrollRender ─
             newLi.focus({ preventScroll: true });
         }
         if (this.isLoaded) {
@@ -17025,14 +16711,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
     }
-    /**
-     * 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
-     */
     updateVirtualNodeSelection(id, selected) {
         const idx = this.virtualNodeMap.get(id);
         if (!isNullOrUndefined(idx)) {
@@ -17040,21 +16718,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             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
-     */
     updateVirtualNodeCheckState(id, state) {
         const idx = this.virtualNodeMap.get(id);
         if (!isNullOrUndefined(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);
             }
@@ -17064,9 +16732,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.renderVirtualItems();
         }
     }
-    // ═══════════════════════════════════════════════════════════════════════════════
-    //  END VIRTUALIZATION
-    // ═══════════════════════════════════════════════════════════════════════════════
     /**
      * Called internally if any of the property value changed.
      *
@@ -17210,7 +16875,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                         }
                     }
                     else {
-                        // Tear down virtualization and do a full re-render
                         this.unwireVirtualScrollEvents();
                         this.destroyVirtualMask();
                         removeClass([this.element], VIRTUALIZATION);
@@ -17221,7 +16885,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     break;
                 case 'height':
                     if (this.enableVirtualization) {
-                        // Re-initialise so the new height takes effect
                         this.unwireVirtualScrollEvents();
                         this.initVirtualization();
                     }
@@ -17239,7 +16902,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      * @returns {void}
      */
     destroy() {
-        // Tear down virtualization before standard cleanup
         if (this.enableVirtualization) {
             this.unwireVirtualScrollEvents();
             this.destroyVirtualMask();
@@ -17330,10 +16992,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (isNullOrUndefined(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 && !isNullOrUndefined(this.height)) {
             this.setRootData();
             this.rebuildVirtualCheckCache();