@syncfusion/ej2-treegrid 32.1.25 → 32.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.1.25
+*  version : 32.2.4
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-treegrid",
-  "version": "32.1.25",
+  "version": "32.2.4",
   "description": "Essential JS 2 TreeGrid Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-treegrid.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.1.24",
-    "@syncfusion/ej2-data": "~32.1.24",
-    "@syncfusion/ej2-grids": "~32.1.25",
-    "@syncfusion/ej2-popups": "~32.1.25"
+    "@syncfusion/ej2-base": "~32.2.3",
+    "@syncfusion/ej2-data": "~32.2.3",
+    "@syncfusion/ej2-grids": "~32.2.3",
+    "@syncfusion/ej2-popups": "~32.2.4"
   },
   "devDependencies": {},
   "keywords": [

package/src/treegrid/actions/batch-edit.js

@@ -228,7 +228,7 @@ var BatchEdit = /** @class */ (function () {
             return;
         }
         if (this.parent.editModule['isAddedRowByMethod'] && !isNullOrUndefined(this.parent.editModule['addRowIndex']) &&
-            !this.parent.editModule['isAddedRowByContextMenu'] && (this.parent.grid.selectedRowIndex === -1 || this.parent.editModule['batchEditModule'].isAdd)) {
+            !this.parent.editModule['isAddedRowByContextMenu'] && (this.parent.editModule['selectedIndex'] >= 0 || this.parent.editModule['batchEditModule'].isAdd)) {
             this.selectedIndex = this.parent.editModule['selectedIndex'];
             this.addRowIndex = this.parent.editModule['addRowIndex'];
             this.addRowRecord = this.batchRecords.length ? this.batchRecords[this.selectedIndex]
@@ -603,6 +603,9 @@ var BatchEdit = /** @class */ (function () {
         if (this.parent.editModule['isAddedRowByContextMenu']) {
             this.parent.editModule['isAddedRowByContextMenu'] = false;
         }
+        if (this.parent.editModule['isAddedRowByMethod']) {
+            this.parent.editModule['isAddedRowByMethod'] = false;
+        }
     };
     BatchEdit.prototype.getActualRowObjectIndex = function (index) {
         var rows = this.parent.grid.getDataRows();

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

@@ -7,6 +7,10 @@ import { TreeGrid } from '../base/treegrid';
 export declare class InfiniteScroll {
     private parent;
     private visualData;
+    private maxPage;
+    private treeAction;
+    private collapsedData;
+    private dataBoundFunction;
     /**
      * Constructor for VirtualScroll module
      *
@@ -30,6 +34,10 @@ export declare class InfiniteScroll {
      * @returns {void}
      */
     removeEventListener(): void;
+    private dataBound;
+    private onDataReady;
+    private collapseActionComplete;
+    private makeCollapseRequest;
     /**
      * Handles the Expand Collapse action for Remote data with infinite scrolling.
      *

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

@@ -1,4 +1,4 @@
-import { Grid, InfiniteScroll as GridInfiniteScroll } from '@syncfusion/ej2-grids';
+import { Grid, InfiniteScroll as GridInfiniteScroll, getRowIndexFromElement } from '@syncfusion/ej2-grids';
 import { RowRenderer, resetRowIndex } from '@syncfusion/ej2-grids';
 import { getValue, isNullOrUndefined, remove } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
@@ -40,6 +40,10 @@ var InfiniteScroll = /** @class */ (function () {
         this.parent.grid.on('infinite-edit-handler', this.infiniteEditHandler, this);
         this.parent.grid.on('infinite-crud-cancel', this.createRows, this);
         this.parent.grid.on('content-ready', this.contentready, this);
+        this.parent.on(events.collapseActionComplete, this.collapseActionComplete, this);
+        this.parent.grid.on('data-ready', this.onDataReady, this);
+        this.dataBoundFunction = this.dataBound.bind(this);
+        this.parent.addEventListener(events.dataBound, this.dataBoundFunction);
     };
     /**
      * @hidden
@@ -55,6 +59,53 @@ var InfiniteScroll = /** @class */ (function () {
         this.parent.off(events.pagingActions, this.infinitePageAction);
         this.parent.grid.off('infinite-crud-cancel', this.createRows);
         this.parent.grid.off('content-ready', this.contentready);
+        this.parent.off(events.collapseActionComplete, this.collapseActionComplete);
+        this.parent.grid.off('data-ready', this.onDataReady);
+        this.parent.removeEventListener(events.dataBound, this.dataBoundFunction);
+    };
+    InfiniteScroll.prototype.dataBound = function () {
+        if (this.treeAction === 'collapse') {
+            this.treeAction = 'refresh';
+            this.makeCollapseRequest();
+        }
+        else if (this.treeAction === 'refresh') {
+            this.treeAction = null;
+        }
+    };
+    InfiniteScroll.prototype.onDataReady = function (e) {
+        if (!isNullOrUndefined(e.count) && e.requestType !== 'infiniteScroll') {
+            this.maxPage = Math.ceil(e.count / this.parent.pageSettings.pageSize);
+        }
+    };
+    InfiniteScroll.prototype.collapseActionComplete = function (args) {
+        if (!this.parent.infiniteScrollSettings.enableCache && args.isCollapse) {
+            var contentBounds = this.parent.getContent().firstElementChild.getBoundingClientRect();
+            var tableBounds = this.parent.grid.contentModule.getTable().getBoundingClientRect();
+            if (Math.round(tableBounds.bottom - this.parent.grid.getRowHeight()) <= Math.round(contentBounds.bottom)) {
+                this.treeAction = 'collapse';
+                this.collapsedData = args.data;
+                this.makeCollapseRequest(args);
+            }
+        }
+    };
+    InfiniteScroll.prototype.makeCollapseRequest = function (args) {
+        var rows = this.parent.getRows();
+        var index = getRowIndexFromElement(rows[rows.length - 1]);
+        var previousPage = this.parent.grid.pageSettings.currentPage;
+        var nextPage = Math.ceil(index / this.parent.grid.pageSettings.pageSize) + 1;
+        if ((previousPage >= this.maxPage) || (nextPage > this.maxPage)) {
+            return;
+        }
+        this.parent.grid.pageSettings.currentPage = nextPage;
+        this.parent['isInfiniteCollapse'] = true;
+        var scrollArg = {
+            requestType: 'infiniteScroll',
+            currentPage: this.parent.grid.pageSettings.currentPage,
+            prevPage: previousPage,
+            startIndex: index + 1,
+            direction: 'down'
+        };
+        this.parent.grid.notify('model-changed', scrollArg);
     };
     /**
      * Handles the Expand Collapse action for Remote data with infinite scrolling.
@@ -114,6 +165,7 @@ var InfiniteScroll = /** @class */ (function () {
      * @returns {void}
      */
     InfiniteScroll.prototype.infinitePageAction = function (pageingDetails) {
+        var _this = this;
         var dm = new DataManager(pageingDetails.result);
         var expanded = new Predicate('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
         var visualData = dm.executeLocal(new Query().where(expanded));
@@ -145,7 +197,12 @@ var InfiniteScroll = /** @class */ (function () {
                 if (!isCache && actionArgs.requestType === 'delete') {
                     var skip = lastIndex - actionArgs.data.length + 1;
                     var take = actionArgs.data.length;
-                    query = query.skip(skip).take(take);
+                    if (skip < 0) {
+                        query = query.take(take);
+                    }
+                    else {
+                        query = query.skip(skip).take(take);
+                    }
                 }
                 else if (isCache && actionArgs.requestType === 'delete' ||
                     (actionArgs.requestType === 'save' && actionArgs.action === 'add')) {
@@ -153,13 +210,36 @@ var InfiniteScroll = /** @class */ (function () {
                     query = query.take(this.parent.infiniteScrollSettings.initialBlocks * this.parent.pageSettings.pageSize);
                 }
                 else {
-                    query = query.page(current, size);
+                    if (this.treeAction !== 'collapse' && this.treeAction !== 'refresh') {
+                        query = query.page(current, size);
+                    }
                 }
             }
             else {
                 query = query.page(current, size);
             }
             dm.dataSource.json = visualData;
+            if (this.treeAction === 'collapse') {
+                var rows = this.parent.getRows();
+                var skip = getRowIndexFromElement(rows[rows.length - 1]) + 1;
+                query = query.skip(skip);
+                var renderedChildDataCount = this.parent.grid.getRowsObject().filter(function (record) {
+                    return record.data.parentUniqueID === _this.collapsedData.uniqueID;
+                }).length;
+                var remainingChildDataCount = this.collapsedData.childRecords.length - renderedChildDataCount;
+                if (remainingChildDataCount > 0) {
+                    query = query.take(Math.max(remainingChildDataCount, 0));
+                }
+                else {
+                    query = query.take(this.parent.pageSettings.pageSize);
+                }
+            }
+            else if (this.treeAction === 'refresh') {
+                var rows = this.parent.getRows();
+                var skip = getRowIndexFromElement(rows[rows.length - 1]) + 1;
+                query = query.skip(skip);
+                query = query.take(this.parent.infiniteScrollSettings.initialBlocks * this.parent.pageSettings.pageSize);
+            }
             if (!isCache && !isNullOrUndefined(actionArgs) && actionArgs.requestType === 'save' && actionArgs.action === 'add') {
                 pageingDetails.result = [actionArgs.data];
             }

package/src/treegrid/base/constant.d.ts

@@ -156,3 +156,5 @@ export declare const ariaColIndex: string;
 export declare const ariaRowIndex: string;
 /** @hidden */
 export declare const actionFailure: string;
+/** @hidden */
+export declare const collapseActionComplete: string;

package/src/treegrid/base/constant.js

@@ -156,3 +156,5 @@ export var ariaColIndex = 'aria-colindex';
 export var ariaRowIndex = 'aria-rowindex';
 /** @hidden */
 export var actionFailure = 'actionFailure';
+/** @hidden */
+export var collapseActionComplete = 'collapseActionComplete';

package/src/treegrid/base/treegrid.d.ts

@@ -126,6 +126,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private componentRefresh;
     private isComponentRefresh;
     private isVirtualExpandCollapse;
+    private isInfiniteCollapse;
     private isExcel;
     /** @hidden */
     initialRender: boolean;

package/src/treegrid/base/treegrid.js

@@ -82,6 +82,7 @@ var TreeGrid = /** @class */ (function (_super) {
         _this.componentRefresh = Component.prototype.refresh;
         _this.isComponentRefresh = false;
         _this.isVirtualExpandCollapse = false;
+        _this.isInfiniteCollapse = false;
         _this.objectEqualityChecker = function (old, current) {
             if (old) {
                 var keys = Object.keys(old);
@@ -958,12 +959,12 @@ var TreeGrid = /** @class */ (function (_super) {
         var checkboxColumn = this.columnModel.filter(function (col) { return col.showCheckbox; });
         var treeColumn = this.columns[this.treeColumnIndex];
         if (checkboxColumn.length !== 0) {
-            if (checkboxColumn !== treeColumn) {
-                failureCases.push('ShowCheckbox column should not be defined other than the tree column.');
-            }
             if (checkboxColumn.length > 1) {
                 failureCases.push('Only one column can have the ShowCheckbox option enabled.');
             }
+            else if (checkboxColumn[0].field !== treeColumn.field) {
+                failureCases.push('ShowCheckbox column should not be defined other than the tree column.');
+            }
         }
         var alignColumn;
         if (this.treeColumnIndex !== null && this.treeColumnIndex !== -1 && this.treeColumnIndex < this.columns.length) {
@@ -1595,6 +1596,12 @@ var TreeGrid = /** @class */ (function (_super) {
             if (args.action === 'clearFilter' && _this.enableCollapseAll) {
                 _this.collapseAll();
             }
+            if (args.action === 'clearFilter' && _this.enableInfiniteScrolling) {
+                _this.expandAll();
+            }
+            if (args.requestType === 'sorting' && _this.enableInfiniteScrolling) {
+                _this.expandAll();
+            }
             if (_this.action === 'indenting' || _this.action === 'outdenting') {
                 _this.action = _this.action === 'indenting' ? 'indented' : 'outdented';
                 var selectedItem_1 = [_this.selectedRecords];
@@ -3450,13 +3457,6 @@ var TreeGrid = /** @class */ (function (_super) {
             else if (!this.isCollapseAll) {
                 this.trigger(events.collapsed, collapseArgs);
             }
-            if (this.enableInfiniteScrolling) {
-                var scrollHeight = this.grid.getContent().firstElementChild.scrollHeight;
-                var scrollTop = this.grid.getContent().firstElementChild.scrollTop;
-                if ((scrollHeight - scrollTop) < this.grid.getRowHeight() + +this.height) {
-                    this.grid.getContent().firstElementChild.scrollBy(0, this.grid.getRowHeight());
-                }
-            }
         }
     };
     TreeGrid.prototype.updateExpandStateMapping = function (record, state) {
@@ -3840,10 +3840,13 @@ var TreeGrid = /** @class */ (function (_super) {
                 if ((!isCountRequired(this) || childRecords.length) || action === 'collapse') {
                     this.localExpand(action, row, record);
                 }
+                if (this.enableInfiniteScrolling && action === 'collapse' && !this.isCollapseAll) {
+                    this.notify(events.collapseActionComplete, { isCollapse: true, data: record, row: row });
+                }
                 var lastrowIdx = this.getVisibleRecords()[this.getVisibleRecords().length - 1]['index'];
                 var lastRow = this.getRowByIndex(lastrowIdx);
                 var borderElement = lastRow ? lastRow.nextElementSibling ? lastRow.nextElementSibling.classList.contains('e-detailrow') ? lastRow.nextElementSibling : lastRow : lastRow : null;
-                if (this.grid.getContentTable().clientHeight <= this.grid.getContent().clientHeight && !isNullOrUndefined(borderElement) && !borderElement.cells[0].classList.contains('e-lastrowcell')) {
+                if (!this.isInfiniteCollapse && this.grid.getContentTable().clientHeight <= this.grid.getContent().clientHeight && !isNullOrUndefined(borderElement) && !borderElement.cells[0].classList.contains('e-lastrowcell')) {
                     this.lastRowBorder(borderElement, true);
                 }
             }
@@ -3858,7 +3861,7 @@ var TreeGrid = /** @class */ (function (_super) {
                 targetEle.closest('.e-treerowcell').classList.remove('e-cellselectionbackground');
                 targetEle.closest('.e-treerowcell').removeAttribute('aria-selected');
             }
-            if (this.isPixelHeight() && !row.cells[0].classList.contains('e-lastrowcell')) {
+            if (this.isPixelHeight() && !row.cells[0].classList.contains('e-lastrowcell') && !this.isInfiniteCollapse) {
                 var totalRows = this.getRows();
                 var rows = this.getContentTable().rows;
                 totalRows = [].slice.call(rows);
@@ -3875,6 +3878,7 @@ var TreeGrid = /** @class */ (function (_super) {
             this.notify('rowExpandCollapse', { detailrows: detailrows, action: displayAction, record: record, row: row });
             this.updateAltRow(gridRows);
         }
+        this.isInfiniteCollapse = false;
     };
     TreeGrid.prototype.updateChildOnDemand = function (expandingArgs) {
         var _this = this;
@@ -4007,11 +4011,18 @@ var TreeGrid = /** @class */ (function (_super) {
         }
     };
     TreeGrid.prototype.localExpand = function (action, row, record) {
+        var _this = this;
         var rows;
         var detailRow = row.nextElementSibling ? row.nextElementSibling.classList.contains('e-detailrow') ? row.nextElementSibling : null : null;
-        var childRecords = this.grid.currentViewData.filter(function (e) {
-            return e.parentUniqueID === record.uniqueID;
-        });
+        var childRecords;
+        if (this.enableInfiniteScrolling) {
+            childRecords = this.grid.getRowsObject().filter(function (e) { return e.data.parentUniqueID === record.uniqueID; });
+        }
+        else {
+            childRecords = this.grid.currentViewData.filter(function (e) {
+                return e.parentUniqueID === record.uniqueID;
+            });
+        }
         if (this.isPixelHeight() && row.cells[0].classList.contains('e-lastrowcell')) {
             this.lastRowBorder(row, false);
         }
@@ -4051,9 +4062,9 @@ var TreeGrid = /** @class */ (function (_super) {
             });
         }
         var gridRowsObject = this.grid.getRowsObject();
-        var currentViewData = this.grid.currentViewData;
+        var currentViewData = this.enableInfiniteScrolling ? this.grid.getRowsObject() : this.grid.currentViewData;
         var currentRecord = currentViewData.filter(function (e) {
-            return e.uniqueID === record.uniqueID;
+            return _this.enableInfiniteScrolling ? e.data.uniqueID === record.uniqueID : e.uniqueID === record.uniqueID;
         });
         var currentIndex = currentViewData.indexOf(currentRecord[0]);
         if (!isNullOrUndefined(gridRowsObject[parseInt(currentIndex.toString(), 10)].visible) &&