@syncfusion/ej2-treegrid 28.2.4 → 29.1.33

package/src/treegrid/actions/rowdragdrop.js

@@ -93,7 +93,6 @@ var RowDD = /** @class */ (function () {
         }
         var action = 'action';
         var dropPosition = 'dropPosition';
-        var updateRowAndCellElements = 'updateRowAndCellElements';
         if (fromIndexes[0] !== toIndex && ['above', 'below', 'child'].indexOf(position) !== -1) {
             if (position === 'above') {
                 this.dropPosition = 'topSegment';
@@ -143,7 +142,7 @@ var RowDD = /** @class */ (function () {
                 var parentrow = this.parent.getRows()[parseInt(toIndex.toString(), 10)];
                 totalRecord.push(parentData);
                 rows.push(parentrow);
-                this.parent["" + updateRowAndCellElements](totalRecord, rows, index);
+                this.updateRowAndCellElements(totalRecord, rows, index);
             }
             if (this.parent.enableImmutableMode && this.parent["" + action] === 'outdenting') {
                 var index = this.parent.allowRowDragAndDrop
@@ -155,7 +154,29 @@ var RowDD = /** @class */ (function () {
                 var rows = [];
                 totalRecord.push(record);
                 rows.push(row);
-                this.parent["" + updateRowAndCellElements](totalRecord, rows, index);
+                this.updateRowAndCellElements(totalRecord, rows, index);
+            }
+        }
+    };
+    /**
+     * Updates the rows and cells
+     *
+     * @param {Object[]} records - Updates the given records
+     * @param {HTMLTableRowElement[]} rows - Updates the given rows
+     * @param {number} index -  Updates the given cell index
+     * @returns {void}
+     */
+    RowDD.prototype.updateRowAndCellElements = function (records, rows, index) {
+        for (var i = 0; i < records.length; i++) {
+            this.parent.renderModule.cellRender({
+                data: records[parseInt(i.toString(), 10)], cell: rows[parseInt(i.toString(), 10)].cells[parseInt(index.toString(), 10)],
+                column: this.parent.grid.getColumns()[this.parent.treeColumnIndex],
+                requestType: 'rowDragAndDrop'
+            });
+            if (this.parent['action'] === 'indenting' || this.parent['action'] === 'outdenting') {
+                this.parent.renderModule.RowModifier({
+                    data: records[parseInt(i.toString(), 10)], row: rows[parseInt(i.toString(), 10)]
+                });
             }
         }
     };
@@ -204,7 +225,7 @@ var RowDD = /** @class */ (function () {
                             record_1.parentItem.taskData) {
                             dropIndex = i;
                             if (tObj.enableVirtualization) {
-                                dropIndex = parseInt(tObj.getRows()[parseInt(i.toString(), 10)].getAttribute('data-rowindex'), 10);
+                                dropIndex = parseInt(tObj.getRows()[parseInt(i.toString(), 10)].getAttribute('aria-rowindex'), 10) - 1;
                             }
                         }
                     }
@@ -213,26 +234,27 @@ var RowDD = /** @class */ (function () {
                     dropIndex = this.selectedRow.rowIndex - 1;
                 }
                 if (this.parent.enableVirtualization && this.selectedRecord && !(record_1.level > this.selectedRecord.level)) {
-                    dropIndex = parseInt(this.selectedRow.getAttribute('data-rowindex'), 10) - 1;
+                    dropIndex = parseInt(this.selectedRow.getAttribute('aria-rowindex'), 10) - 2;
                 }
                 tObj["" + action] = 'indenting';
                 tObj["" + droppedIndex] = dropIndex;
                 this.eventTrigger('indenting', dropIndex);
             }
             else if (request === 'outdent') {
-                if (this.selectedRow.rowIndex === -1 || this.selectedRow.rowIndex === 0 ||
-                    tObj.getCurrentViewRecords()[this.selectedRow.rowIndex].level === 0) {
+                var isInvalidSelection = this.selectedRow.rowIndex === -1 || this.selectedRow.rowIndex === 0;
+                var isRootLevel = tObj.getCurrentViewRecords()[this.selectedRow.rowIndex].level === 0;
+                if (isInvalidSelection || isRootLevel) {
                     return;
                 }
-                var dropIndex = void 0;
-                var parentItem = this.selectedRecord.parentItem;
-                for (var i = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                    if (tObj.getCurrentViewRecords()[parseInt(i.toString(), 10)].uniqueID === parentItem.uniqueID) {
-                        dropIndex = i;
-                    }
+                var parentItem_1 = this.selectedRecord.parentItem;
+                var records = tObj.getCurrentViewRecords();
+                var dropIndex = records.findIndex(function (record) { return record.uniqueID === parentItem_1.uniqueID; });
+                if (dropIndex === -1) {
+                    return;
                 }
                 if (this.parent.enableVirtualization && this.selectedRecord) {
-                    dropIndex = parseInt(this.parent.getRows()[parseInt(dropIndex.toString(), 10)].getAttribute('data-rowindex'), 10);
+                    var ariaRowIndex = this.parent.getRows()[parseInt(dropIndex.toString(), 10)].getAttribute('aria-rowindex');
+                    dropIndex = parseInt(ariaRowIndex, 10) - 1;
                 }
                 tObj["" + action] = 'outdenting';
                 tObj["" + droppedIndex] = dropIndex;
@@ -259,7 +281,7 @@ var RowDD = /** @class */ (function () {
             if (!actionArgs.cancel) {
                 if (actionArgs.action === 'indenting') {
                     if (_this.parent.enableVirtualization) {
-                        _this.reorderRows([parseInt(_this.selectedRow.getAttribute('data-rowindex'), 10)], dropIndex, 'child');
+                        _this.reorderRows([parseInt(_this.selectedRow.getAttribute('aria-rowindex'), 10) - 1], dropIndex, 'child');
                     }
                     else {
                         _this.reorderRows([_this.selectedRow.rowIndex], dropIndex, 'child');
@@ -267,7 +289,7 @@ var RowDD = /** @class */ (function () {
                 }
                 else if (actionArgs.action === 'outdenting') {
                     if (_this.parent.enableVirtualization) {
-                        _this.reorderRows([parseInt(_this.selectedRow.getAttribute('data-rowindex'), 10)], dropIndex, 'below');
+                        _this.reorderRows([parseInt(_this.selectedRow.getAttribute('aria-rowindex'), 10) - 1], dropIndex, 'below');
                     }
                     else {
                         _this.reorderRows([_this.selectedRow.rowIndex], dropIndex, 'below');
@@ -570,7 +592,8 @@ var RowDD = /** @class */ (function () {
         else {
             rowTop = rowPositionHeight + contentHeight + roundOff;
         }
-        var rowBottom = rowTop + row[0].offsetHeight;
+        var rowBottom = row[0].offsetHeight !== 0 && isNullOrUndefined(rowEle) ?
+            rowTop + row[0].offsetHeight : rowTop + rowEle.offsetHeight;
         var difference = rowBottom - rowTop;
         var divide = difference / 3;
         var topRowSegment = rowTop + divide;
@@ -587,6 +610,7 @@ var RowDD = /** @class */ (function () {
         var isTopSegment = posy <= topRowSegment;
         var isMiddleRowSegment = (posy > topRowSegment && posy <= middleRowSegment);
         var isBottomRowSegment = (posy > middleRowSegment && posy <= bottomRowSegment);
+        var isBorderNeed = true;
         if (isTopSegment || isMiddleRowSegment || isBottomRowSegment) {
             if (isTopSegment && this.dropPosition !== 'Invalid') {
                 this.removeChildBorder();
@@ -595,19 +619,12 @@ var RowDD = /** @class */ (function () {
                 this.addFirstrowBorder(rowEle);
                 this.removeErrorElem();
                 this.removeLastrowBorder(rowEle);
-                this.topOrBottomBorder(args.target);
             }
             if (isMiddleRowSegment && this.dropPosition !== 'Invalid') {
                 this.removetopOrBottomBorder();
-                var rowElement = [];
-                var element = closest(args.target, 'tr');
-                rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));
-                if (rowElement.length > 0) {
-                    this.addRemoveClasses(rowElement, true, 'e-childborder');
-                }
+                this.dropPosition = 'middleSegment';
                 this.addLastRowborder(rowEle);
                 this.addFirstrowBorder(rowEle);
-                this.dropPosition = 'middleSegment';
             }
             if (isBottomRowSegment && this.dropPosition !== 'Invalid') {
                 this.removeErrorElem();
@@ -616,11 +633,165 @@ var RowDD = /** @class */ (function () {
                 this.dropPosition = 'bottomSegment';
                 this.addLastRowborder(rowEle);
                 this.removeFirstrowBorder(rowEle);
-                this.topOrBottomBorder(args.target);
+            }
+            if ((isTopSegment || isBottomRowSegment) && this.dropPosition !== 'Invalid') {
+                isBorderNeed = this.updateBorderStatus(row, index);
+                this.topOrBottomBorder(args.target, isBorderNeed);
+            }
+            else if (isMiddleRowSegment && this.dropPosition !== 'Invalid') {
+                var rowElement = [];
+                var element = closest(args.target, 'tr');
+                rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));
+                isBorderNeed = this.updateBorderStatus(row, index);
+                if (rowElement.length > 0 && isBorderNeed) {
+                    this.addRemoveClasses(rowElement, true, 'e-childborder');
+                }
             }
         }
         return this.dropPosition;
     };
+    /**
+     * Updates the border status for a specified row and index.
+     *
+     * @private
+     * @param {Element[]} row - The array of row elements to be updated.
+     * @param {number} index - The index of the row element for which the border status is to be updated.
+     * @returns {boolean} - Returns true if the border status was successfully updated, otherwise false.
+     */
+    RowDD.prototype.updateBorderStatus = function (row, index) {
+        var _this = this;
+        var isBorderNeed = true;
+        var rows = this.parent.grid.getRows();
+        var childRows = [];
+        var hasDetailTemplate = false;
+        if (!isNullOrUndefined(this.parent.detailTemplate)) {
+            rows = this.parent.getDataRows();
+            hasDetailTemplate = true;
+        }
+        var treegridColumnIndex = this.parent.treeColumnIndex;
+        var treeColIndex = this.parent.allowRowDragAndDrop ?
+            (hasDetailTemplate ? treegridColumnIndex + 2 : treegridColumnIndex + 1) :
+            (hasDetailTemplate ? treegridColumnIndex + 1 : treegridColumnIndex);
+        if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+            treeColIndex = treegridColumnIndex;
+        }
+        var dragRows = row;
+        var targetRow = [rows["" + index]];
+        if (this.dropPosition === 'topSegment') {
+            row.filter(function (e) {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(targetRow[0]) ||
+                    isNullOrUndefined(targetRow[0].cells)) {
+                    return true;
+                }
+                var regex = /index(\d+)|level(\d+)/g;
+                var parentIndexLevel = e === null || e === undefined ? undefined : e.cells["" + treeColIndex].className.match(regex);
+                var dropIndexLevel = targetRow[0].cells["" + treeColIndex].className.match(regex);
+                if (isNullOrUndefined(dropIndexLevel) || isNullOrUndefined(dropIndexLevel)) {
+                    return true;
+                }
+                var parentLevel = +parentIndexLevel[1].match(/\d+/)[0];
+                var dropParentLevel = +dropIndexLevel[1].match(/\d+/)[0];
+                var InDraggedRowIndex = false;
+                if (parentLevel !== 0 && parentLevel !== dropParentLevel) {
+                    return true;
+                }
+                for (var i = 0; i < rows.length; i++) {
+                    if (rows[parseInt(i.toString(), 10)] === dragRows[0]) {
+                        InDraggedRowIndex = true;
+                    }
+                    if (InDraggedRowIndex && rows[parseInt(i.toString(), 10)] !== dragRows[0]) {
+                        var parentIndexLevelInRow = rows[parseInt(i.toString(), 10)].cells["" + treeColIndex].className.match(regex);
+                        var parentLevelInRow = +parentIndexLevelInRow[1].match(/\d+/)[0];
+                        if (parentLevelInRow !== parentLevel && parentLevelInRow > parentLevel) {
+                            childRows.push(rows[parseInt(i.toString(), 10)]);
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
+                if (parentLevel === dropParentLevel && ((childRows.length > 0 && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index - (childRows.length + 1)) || (childRows.length === 0 && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index - 1))) {
+                    isBorderNeed = false;
+                }
+                return true;
+            });
+            isBorderNeed = (!isNullOrUndefined(row) && childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index - 1) && isNullOrUndefined(row[0]) ? false : isBorderNeed;
+        }
+        if (this.dropPosition === 'bottomSegment') {
+            targetRow.filter(function (e) {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(dragRows[0]) ||
+                    isNullOrUndefined(dragRows[0].cells)) {
+                    return true;
+                }
+                var regex = /index(\d+)|level(\d+)/g;
+                var parentIndexLevel = e === null || e === undefined ? undefined : e.cells["" + treeColIndex].className.match(regex);
+                var dragIndexLevel = dragRows[0].cells["" + treeColIndex].className.match(regex);
+                if (isNullOrUndefined(dragIndexLevel) || isNullOrUndefined(parentIndexLevel)) {
+                    return true;
+                }
+                var parentLevel = +parentIndexLevel[1].match(/\d+/)[0];
+                var dragParentLevel = +dragIndexLevel[1].match(/\d+/)[0];
+                var InDraggedRowIndex = false;
+                if (parentLevel !== 0 && parentLevel !== dragParentLevel) {
+                    return true;
+                }
+                for (var i = 0; i < rows.length; i++) {
+                    if (rows[parseInt(i.toString(), 10)] === targetRow[0]) {
+                        InDraggedRowIndex = true;
+                    }
+                    if (InDraggedRowIndex && rows[parseInt(i.toString(), 10)] !== targetRow[0]) {
+                        var parentIndexLevelInRow = rows[parseInt(i.toString(), 10)].cells["" + treeColIndex].className.match(regex);
+                        var parentLevelInRow = +parentIndexLevelInRow[1].match(/\d+/)[0];
+                        if (parentLevelInRow !== parentLevel && parentLevelInRow > parentLevel) {
+                            childRows.push(rows[parseInt(i.toString(), 10)]);
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
+                if (!isNullOrUndefined(row) && parentLevel === dragParentLevel && ((childRows.length > 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + (childRows.length + 1)) || (childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + 1))) {
+                    isBorderNeed = false;
+                }
+                return true;
+            });
+            isBorderNeed = (!isNullOrUndefined(row) && childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + 1) && isNullOrUndefined(row[0]) ? false : isBorderNeed;
+        }
+        if (this.dropPosition === 'middleSegment') {
+            targetRow.filter(function (e) {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(dragRows[0]) ||
+                    isNullOrUndefined(dragRows[0].cells)) {
+                    return true;
+                }
+                for (var i = 0; i < dragRows.length; i++) {
+                    var regex = /index(\d+)|level(\d+)/g;
+                    var dropActualIndex = targetRow[0].rowIndex;
+                    var dragIndexLevel = dragRows[parseInt(i.toString(), 10)].cells["" + treeColIndex].className.match(regex);
+                    if (!dragIndexLevel) {
+                        return true;
+                    }
+                    var dragIndex = parseInt(dragIndexLevel.find(function (item) { return item.includes('index'); }).match(/\d+/)[0] || '0', 10);
+                    if (hasDetailTemplate) {
+                        dropActualIndex = dropActualIndex / 2;
+                    }
+                    if (dragIndex === dropActualIndex && !_this.parent.rowDropSettings.targetID) {
+                        isBorderNeed = false;
+                    }
+                    else {
+                        isBorderNeed = true;
+                        break;
+                    }
+                }
+                if (!isBorderNeed) {
+                    _this.dropPosition = 'Invalid';
+                    _this.addErrorElem();
+                }
+                return isBorderNeed;
+            });
+        }
+        this.canDrop = isBorderNeed;
+        return isBorderNeed;
+    };
     /**
      * Removes the visual border from all child rows within the TreeGrid.
      *
@@ -761,23 +932,28 @@ var RowDD = /** @class */ (function () {
      * Applies drop border styles to row elements based on the current drop position ('topSegment' or 'bottomSegment').
      *
      * @param {Element} target - The target element where the drop action is taking place.
+     * @param {boolean} [isBorderNeed=true] - Indicates whether a border is needed during the drop action. Defaults to `true`.
      * @returns {void} No return value.
      */
-    RowDD.prototype.topOrBottomBorder = function (target) {
-        var rowElement = [];
+    RowDD.prototype.topOrBottomBorder = function (target, isBorderNeed) {
+        if (isBorderNeed === void 0) { isBorderNeed = true; }
         var element = closest(target, 'tr');
-        rowElement = element ? [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse')) : [];
-        if (rowElement.length) {
-            if (this.dropPosition === 'topSegment') {
-                this.addRemoveClasses(rowElement, true, 'e-droptop');
-                if (this.parent.element.getElementsByClassName('e-lastrow-dragborder').length > 0) {
-                    this.parent.element.getElementsByClassName('e-lastrow-dragborder')[0].remove();
-                }
-            }
-            if (this.dropPosition === 'bottomSegment') {
-                this.addRemoveClasses(rowElement, true, 'e-dropbottom');
+        var rowElements = element ?
+            Array.from(element.querySelectorAll('.e-rowcell, .e-rowdragdrop, .e-detailrowcollapse')) : [];
+        if (!rowElements.length) {
+            return;
+        }
+        var classAction = isBorderNeed ? this.addRemoveClasses.bind(this, rowElements, true) : this.addRemoveClasses.bind(this, rowElements, false, 'e-dragborder');
+        if (this.dropPosition === 'topSegment') {
+            classAction('e-droptop');
+            var lastRowDragBorder = this.parent.element.querySelector('.e-lastrow-dragborder');
+            if (lastRowDragBorder) {
+                lastRowDragBorder.remove();
             }
         }
+        if (this.dropPosition === 'bottomSegment') {
+            classAction('e-dropbottom');
+        }
     };
     /**
      * Removes the drop border classes ('e-dropbottom' and 'e-droptop') from the parent element if present.
@@ -842,18 +1018,29 @@ var RowDD = /** @class */ (function () {
         }
         cloneElement.style.cursor = '';
         var rowEle = args.target ? closest(args.target, 'tr') : null;
-        var rowIdx = rowEle ? rowEle.rowIndex : -1;
+        var rowIdx = -1;
+        if (!isNullOrUndefined(this.parent.detailTemplate)) {
+            rowIdx = rowEle ? this.parent.getDataRows().indexOf(rowEle) : -1;
+        }
+        else {
+            rowIdx = rowEle ? rowEle.rowIndex : -1;
+        }
         if (rowIdx === -1) {
             this.canDrop = false;
             this.addErrorElem();
-            if (isNullOrUndefined(tObj.rowDropSettings.targetID)) {
-                this.removetopOrBottomBorder();
-                this.removeChildBorder();
-            }
+            this.removetopOrBottomBorder();
+            this.removeChildBorder();
             return;
         }
         var dragRecords = Array.isArray(args.data) ? args.data : [args.data];
         var droppedRecord = tObj.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
+        if (tObj.rowDropSettings.targetID) {
+            var dropElement = parentsUntil(args.target, 'e-treegrid');
+            if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
+                var srcControl = dropElement.ej2_instances[0];
+                droppedRecord = srcControl.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
+            }
+        }
         this.removeErrorElem();
         this.canDrop = true;
         this.ensuredropPosition(dragRecords, droppedRecord);
@@ -885,13 +1072,13 @@ var RowDD = /** @class */ (function () {
         var parentItem = 'parentItem';
         if (!tObj.rowDropSettings.targetID) {
             if (parentsUntil(args.target, 'e-content') || (this.dropPosition === 'Invalid' || !this.canDrop)) {
-                if (this.parent.element.querySelector('.e-errorelem')) {
+                if (this.parent.element.querySelector('.e-errorelem') || !this.canDrop) {
                     this.dropPosition = 'Invalid';
                 }
                 setValue('dropPosition', this.dropPosition, args);
                 tObj.trigger(events.rowDrop, args);
                 if (!args.cancel) {
-                    if (!isCountRequired(this.parent) && this.dropPosition === 'Invalid') {
+                    if (!isCountRequired(this.parent) && (this.dropPosition === 'Invalid' && !this.canDrop)) {
                         return;
                     }
                     if (!isCountRequired(this.parent)) {
@@ -908,9 +1095,15 @@ var RowDD = /** @class */ (function () {
         else {
             if (args.target && closest(args.target, '#' + tObj.rowDropSettings.targetID) || parentsUntil(args.target, 'e-treegrid') &&
                 parentsUntil(args.target, 'e-treegrid').id === tObj.rowDropSettings.targetID || args.target && document.getElementById(tObj.rowDropSettings.targetID)) {
+                if (this.parent.element.querySelector('.e-errorelem') || !this.canDrop) {
+                    this.dropPosition = 'Invalid';
+                }
                 setValue('dropPosition', this.dropPosition, args);
                 tObj.trigger(events.rowDrop, args);
                 if (!args.cancel && tObj.rowDropSettings.targetID) {
+                    if (this.dropPosition === 'Invalid' && !this.canDrop) {
+                        return;
+                    }
                     this.dragDropGrid(args);
                     if (tObj.isLocalData) {
                         tObj.flatData = this.orderToIndex(tObj.flatData);
@@ -1043,13 +1236,13 @@ var RowDD = /** @class */ (function () {
         }
     };
     /**
-     * Retrieves the index of the target row based on its 'data-rowindex' attribute.
+     * Retrieves the index of the target row based on its 'aria-rowindex' attribute.
      *
      * @param {Element} targetRow - The target row element from which to retrieve the index.
      * @returns {number} - The index of the target row, or 0 if the targetRow is null or undefined.
      */
     RowDD.prototype.getTargetIdx = function (targetRow) {
-        return targetRow ? parseInt(targetRow.getAttribute('data-rowindex'), 10) : 0;
+        return targetRow ? parseInt(targetRow.getAttribute('aria-rowindex'), 10) - 1 : 0;
     };
     /**
      * Retrieves the parent data of a given record during a row drag-and-drop operation.
@@ -1112,7 +1305,13 @@ var RowDD = /** @class */ (function () {
                     this.droppedRecord = tObj.getCurrentViewRecords()[parseInt(index.toString(), 10)];
                 }
                 else {
-                    this.droppedRecord = tObj.getCurrentViewRecords()[args.dropIndex];
+                    if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+                        var rowsObject = this.parent.grid.getRowsObject();
+                        this.droppedRecord = rowsObject.length > 0 ? rowsObject[args.dropIndex].data : undefined;
+                    }
+                    else {
+                        this.droppedRecord = tObj.getCurrentViewRecords()[args.dropIndex];
+                    }
                 }
             }
             var dragRecords = [];
@@ -1650,6 +1849,7 @@ var RowDD = /** @class */ (function () {
     };
     /**
      * Cleans up resources, event listeners, and DOM elements when the TreeGrid component is destroyed.
+     *
      * @returns {void}
      */
     RowDD.prototype.destroy = function () {

package/src/treegrid/actions/summary.js

@@ -201,7 +201,7 @@ var Aggregate = /** @class */ (function () {
         var cellElement = createElement('td', {
             className: 'e-summary'
         });
-        if (this.parent.isReact) {
+        if (this.parent.isReact && typeof (summaryColumn.footerTemplate) !== 'string') {
             var renderReactTemplates = 'renderReactTemplates';
             tempObj.fn(single[summaryColumn.columnName], this.parent, tempObj.property, '', null, null, cellElement);
             this.parent["" + renderReactTemplates]();

package/src/treegrid/actions/virtual-scroll.d.ts

@@ -21,7 +21,6 @@ export declare class VirtualScroll {
      * @param {TreeGrid} parent - Tree Grid instance
      */
     constructor(parent?: TreeGrid);
-    private returnVisualData;
     /**
      * For internal use only - Get the module name.
      *
@@ -39,7 +38,33 @@ export declare class VirtualScroll {
      * @returns {void}
      */
     removeEventListener(): void;
+    /**
+     * Handles the virtual child collapse or expand action in a tree grid.
+     *
+     * @param {object} row - Object containing information about the collapse/expand action.
+     * @param {string} row.action - The type of action, either "collapse" or "expand".
+     * @param {HTMLTableRowElement} row.row - The HTML row element that is affected by the action.
+     * @param {ITreeData} row.record - The tree data record associated with the row.
+     * @param {RowCollapsedEventArgs} row.args - Additional event arguments related to the row collapse or expand.
+     *
+     * @returns {void} No return value as the function executes a procedure.
+     */
     private collapseExpandVirtualchilds;
+    /**
+     * Handles selection logic for the TreeGrid component.
+     *
+     * @returns {void}
+     */
+    private handleSelection;
+    /**
+     * Handles the action related to virtual scrolling with paging details.
+     *
+     * @param {Object} pageingDetails - Contains the result data, count of results, and action arguments.
+     * @param {ITreeData[]} pageingDetails.result - The result data to be handled.
+     * @param {number} pageingDetails.count - The count of results.
+     * @param {ActionEventArgs} pageingDetails.actionArgs - The action arguments related to the virtual page action.
+     * @returns {void}
+     */
     private virtualPageAction;
     /**
      * To destroy the virtualScroll module
@@ -48,6 +73,14 @@ export declare class VirtualScroll {
      * @hidden
      */
     destroy(): void;
+    /**
+     * Updates the row selection when the header checkbox is clicked and the number of selected rows
+     * does not match the current view data length.
+     *
+     * @param {RowDeselectEventArgs} args - The arguments containing details of the row deselection event.
+     * @returns {void} - This method does not return a value.
+     */
+    private updateSelection;
 }
 export declare class TreeVirtual extends GridVirtualScroll {
     constructor(parent: IGrid, locator?: ServiceLocator);

package/src/treegrid/actions/virtual-scroll.js

@@ -39,9 +39,6 @@ var VirtualScroll = /** @class */ (function () {
         Grid.Inject(TreeVirtual);
         this.addEventListener();
     }
-    VirtualScroll.prototype.returnVisualData = function (args) {
-        args.data = this.visualData;
-    };
     /**
      * For internal use only - Get the module name.
      *
@@ -75,28 +72,58 @@ var VirtualScroll = /** @class */ (function () {
         this.parent.off(events.pagingActions, this.virtualPageAction);
         this.parent.off(events.destroy, this.destroy);
     };
+    /**
+     * Handles the virtual child collapse or expand action in a tree grid.
+     *
+     * @param {object} row - Object containing information about the collapse/expand action.
+     * @param {string} row.action - The type of action, either "collapse" or "expand".
+     * @param {HTMLTableRowElement} row.row - The HTML row element that is affected by the action.
+     * @param {ITreeData} row.record - The tree data record associated with the row.
+     * @param {RowCollapsedEventArgs} row.args - Additional event arguments related to the row collapse or expand.
+     *
+     * @returns {void} No return value as the function executes a procedure.
+     */
     VirtualScroll.prototype.collapseExpandVirtualchilds = function (row) {
         this.parent.grid.notify(events.virtualActionArgs, { isExpandCollapse: true });
         this.expandCollapseRec = row.record;
         row.record.expanded = row.action === 'collapse' ? false : true;
-        var ret = {
+        this.parent.flatData.map(function (e) { return e.expanded = e.uniqueID === row.record.uniqueID &&
+            e.expanded !== row.record.expanded ? row.record.expanded : e.expanded; });
+        var actionDetails = {
             result: this.parent.flatData,
             row: row.row,
             action: row.action,
             record: row.record,
             count: this.parent.flatData.length
         };
-        if (this.parent.enableVirtualization && this.parent.selectionSettings.mode === 'Cell' ||
-            this.parent.selectionSettings.mode === 'Row' && !this.parent.selectionSettings.persistSelection) {
+        this.handleSelection();
+        var requestType = getValue('isCollapseAll', this.parent) ? 'collapseAll' : 'refresh';
+        getValue('grid.renderModule', this.parent).dataManagerSuccess(actionDetails, { requestType: requestType });
+    };
+    /**
+     * Handles selection logic for the TreeGrid component.
+     *
+     * @returns {void}
+     */
+    VirtualScroll.prototype.handleSelection = function () {
+        if ((this.parent.selectionSettings.mode === 'Cell' ||
+            (this.parent.selectionSettings.mode === 'Row' && !this.parent.selectionSettings.persistSelection))) {
             this.parent.grid.clearSelection();
         }
         if (getValue('isCollapseAll', this.parent) && this.parent.selectionSettings.persistSelection && this.parent.getSelectedRecords().length > 0) {
             this.prevSelectedRecord = this.parent.getSelectedRecords();
             this.parent.grid.clearSelection();
         }
-        var requestType = getValue('isCollapseAll', this.parent) ? 'collapseAll' : 'refresh';
-        getValue('grid.renderModule', this.parent).dataManagerSuccess(ret, { requestType: requestType });
     };
+    /**
+     * Handles the action related to virtual scrolling with paging details.
+     *
+     * @param {Object} pageingDetails - Contains the result data, count of results, and action arguments.
+     * @param {ITreeData[]} pageingDetails.result - The result data to be handled.
+     * @param {number} pageingDetails.count - The count of results.
+     * @param {ActionEventArgs} pageingDetails.actionArgs - The action arguments related to the virtual page action.
+     * @returns {void}
+     */
     VirtualScroll.prototype.virtualPageAction = function (pageingDetails) {
         var _this = this;
         var dm = new DataManager(pageingDetails.result);
@@ -127,7 +154,7 @@ var VirtualScroll = /** @class */ (function () {
             if (requestType === 'filtering' || requestType === 'collapseAll' || requestType === 'searching' || (requestType === 'refresh' && getValue('isExpandAll', this.parent)) ||
                 (requestType === 'refresh' && this.parent.enableCollapseAll && endIndex > visualData.length && isNullOrUndefined(this.expandCollapseRec))) {
                 startIndex = 0;
-                endIndex = this.parent.grid.pageSettings.pageSize - 1;
+                endIndex = this.parent.grid.pageSettings.pageSize;
                 this.parent.grid.getContent().firstElementChild.scrollTop = 0;
                 this.parent.grid.notify(events.virtualActionArgs, { setTop: true });
             }
@@ -170,7 +197,7 @@ var VirtualScroll = /** @class */ (function () {
                         var newRowsCount = sIndex - startIndex;
                         startIndex = sIndex;
                         if (visualData.indexOf(this.expandCollapseRec) > visualData.length - resourceCount / 2) {
-                            var newTranslateY = translateY + (newRowsCount * this.parent.grid.getRowHeight());
+                            var newTranslateY = startIndex * this.parent.grid.getRowHeight();
                             this.parent.grid.contentModule['translateY'] = newTranslateY;
                             this.parent.grid.contentModule.virtualEle.adjustTable(0, newTranslateY);
                         }
@@ -193,7 +220,7 @@ var VirtualScroll = /** @class */ (function () {
                 if (pageingDetails.count < this.parent.getRows()[0].getBoundingClientRect().height) {
                     startIndex = 0;
                 }
-                else if (!this.parent['isExpandAll']) {
+                else if (!this.parent['isExpandAll'] && this.parent.grid.contentModule['translateY'] === 0) {
                     startIndex = this.prevstartIndex === -1 ? 0 : this.prevstartIndex;
                 }
             }
@@ -220,6 +247,26 @@ var VirtualScroll = /** @class */ (function () {
     VirtualScroll.prototype.destroy = function () {
         this.removeEventListener();
     };
+    /**
+     * Updates the row selection when the header checkbox is clicked and the number of selected rows
+     * does not match the current view data length.
+     *
+     * @param {RowDeselectEventArgs} args - The arguments containing details of the row deselection event.
+     * @returns {void} - This method does not return a value.
+     */
+    VirtualScroll.prototype.updateSelection = function (args) {
+        if (args.isHeaderCheckboxClicked &&
+            this.parent.grid.currentViewData.length !== this.parent.grid.selectionModule.selectedRowIndexes.length) {
+            var updateRowSelection = 'updateRowSelection';
+            for (var i = 0; i < this.parent.getRows().length; i++) {
+                if (this.parent.getRows()[parseInt(i.toString(), 10)].getElementsByClassName('e-frame e-icons e-uncheck').length) {
+                    this.parent.grid.selectionModule["" + updateRowSelection](this.parent.getRows()[parseInt(i.toString(), 10)], 
+                    // eslint-disable-next-line max-len
+                    this.parent.getCurrentViewRecords()[parseInt(i.toString(), 10)].index);
+                }
+            }
+        }
+    };
     return VirtualScroll;
 }());
 export { VirtualScroll };