@syncfusion/ej2-treegrid 26.1.41 → 26.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.41
+*  version : 26.2.4
 *  Copyright Syncfusion Inc. 2001 - 2023. 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/hotfix/26.1.35_Vol2.txt

@@ -0,0 +1 @@
+hotfix/26.1.35_Vol2

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treegrid@*",
-  "_id": "@syncfusion/ej2-treegrid@26.1.40",
+  "_id": "@syncfusion/ej2-treegrid@26.1.42",
   "_inBundle": false,
-  "_integrity": "sha512-FLSDQfoQPPsupYO9MJXtMfWLY77d98nS3kGQxBRoMIkotzYme8lIBz/YMXQA+h+owNWyryNZloaJaTx6Owt4Xg==",
+  "_integrity": "sha512-UGPp38yDOArNOTGVss2EU+BoYFDbtuX7AQPGwepSDA/IvJZqVuuhzIbORFGAovtVu/49UWanMWu9ci47SKkjxw==",
   "_location": "/@syncfusion/ej2-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -24,8 +24,8 @@
     "/@syncfusion/ej2-react-treegrid",
     "/@syncfusion/ej2-vue-treegrid"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-26.1.40.tgz",
-  "_shasum": "1604c276e7bfbbb1c64993484869265e35ab082f",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-26.1.42.tgz",
+  "_shasum": "ac8621c6da11adaeb47f35a1b10f2e94520bea34",
   "_spec": "@syncfusion/ej2-treegrid@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -36,10 +36,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-data": "~26.1.41",
-    "@syncfusion/ej2-grids": "~26.1.41",
-    "@syncfusion/ej2-popups": "~26.1.41"
+    "@syncfusion/ej2-base": "~26.2.4",
+    "@syncfusion/ej2-data": "~26.2.4",
+    "@syncfusion/ej2-grids": "~26.2.4",
+    "@syncfusion/ej2-popups": "~26.2.4"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component",
@@ -76,6 +76,6 @@
     "url": "git+https://github.com/syncfusion/ej2-treegrid.git"
   },
   "typings": "index.d.ts",
-  "version": "26.1.41",
+  "version": "26.2.4",
   "sideEffects": false
 }

package/src/treegrid/actions/selection.js

@@ -58,6 +58,7 @@ var Selection = /** @class */ (function () {
         this.removeEventListener();
     };
     Selection.prototype.checkboxSelection = function (args) {
+        var _a;
         var target = getObject('target', args);
         var checkWrap = parentsUntil(target, 'e-checkbox-wrapper');
         var checkBox;
@@ -75,6 +76,14 @@ var Selection = /** @class */ (function () {
             checkBox = checkWrap.querySelector('input[type="checkbox"]');
             this.triggerChkChangeEvent(checkBox, checkBoxvalue, target.closest('tr'));
         }
+        if (!isNullOrUndefined(this.parent['parentQuery']) && this.parent.selectionSettings.persistSelection
+            && this.parent['columnModel'].filter(function (col) { return col.type === 'checkbox'; }).length > 0
+            && isRemoteData(this.parent)) {
+            if (this.parent['parentQuery'].length > 0) {
+                (_a = this.parent.query.queries).push.apply(_a, this.parent['parentQuery']);
+                this.parent['parentQuery'] = [];
+            }
+        }
     };
     Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState, rowElement) {
         var data = this.parent.getCurrentViewRecords()[rowElement.rowIndex];

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

@@ -118,7 +118,7 @@ var VirtualScroll = /** @class */ (function () {
         }
         else {
             var requestType = pageingDetails.actionArgs.requestType;
-            if (requestType === 'filtering' || requestType === 'collapseAll' || requestType === 'searching' ||
+            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;
@@ -159,7 +159,7 @@ var VirtualScroll = /** @class */ (function () {
                 }
             }
             //}
-            if (this.prevrequestType === 'collapseAll' && pageingDetails.actionArgs.requestType === 'virtualscroll') {
+            if (this.prevrequestType === 'collapseAll' && pageingDetails.actionArgs.requestType === 'virtualscroll' && !isNullOrUndefined(this.parent.idMapping)) {
                 startIndex = 0;
                 endIndex = this.parent.grid.pageSettings.pageSize - 1;
                 this.parent.grid.notify(events.virtualActionArgs, { setTop: true });

package/src/treegrid/base/data.js

@@ -556,6 +556,9 @@ var DataManipulation = /** @class */ (function () {
                 _this.parent.grid.pageSettings.totalRecordsCount = e.count;
             }
             e.count = _this.parent.grid.pageSettings.totalRecordsCount;
+            if (rowDetails.action === 'remoteExpand' && _this.parent.allowPaging) {
+                _this.parent.grid.pageSettings.totalRecordsCount = _this.parent.grid.currentViewData.length + result.length;
+            }
             var virtualArgs = {};
             if (_this.parent.enableVirtualization) {
                 _this.remoteVirtualAction(virtualArgs);

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

@@ -86,6 +86,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private isAddedFromGantt;
     private isIndentEnabled;
     private indentOutdentAction;
+    private parentQuery;
     private isCollapsedEventTriggered;
     private isCollapsingEventTriggered;
     private isExpandedEventTriggered;

package/src/treegrid/base/treegrid.js

@@ -883,7 +883,7 @@ var TreeGrid = /** @class */ (function (_super) {
             || (/[0-9]$/.test(this.height.toString()) && /[px]$/.test(this.height.toString()))) {
             failureCases.push('column width and height should be in pixels');
         }
-        if (!isNullOrUndefined(this.childMapping) && !isNullOrUndefined(this.idMapping)) {
+        if ((this.childMapping !== 'Children') && !isNullOrUndefined(this.idMapping)) {
             failureCases.push('Both IdMapping and ChildMapping should not be used together for tree grid rendering.');
         }
         if ((!isNullOrUndefined(this.idMapping) && (isNullOrUndefined(this.parentIdMapping))) ||
@@ -1048,10 +1048,24 @@ var TreeGrid = /** @class */ (function (_super) {
         var _this = this;
         this.grid.rowSelecting = function (args) {
             _this.IsExpandCollapseClicked(args);
+            if (!isNullOrUndefined(args.data) && _this.selectionSettings.persistSelection
+                && _this.columnModel.filter(function (col) { return col.type === 'checkbox'; }).length > 0 && isRemoteData(_this)) {
+                if (!isNullOrUndefined(args.data.parentItem)) {
+                    _this.parentQuery = _this.query.queries.filter(function (q) { return q.e.field === _this.parentIdMapping; });
+                    _this.query.queries = _this.query.queries.slice(0, 0);
+                }
+            }
             _this.trigger(events.rowSelecting, args);
         };
         this.grid.rowDeselecting = function (args) {
             _this.IsExpandCollapseClicked(args);
+            if (isNullOrUndefined(args.data) && _this.selectionSettings.persistSelection
+                && _this.columnModel.filter(function (col) { return col.type === 'checkbox'; }).length > 0 && isRemoteData(_this)) {
+                if (isNullOrUndefined(args.data.parentItem)) {
+                    _this.parentQuery = _this.query.queries.filter(function (q) { return q.e.field === _this.parentIdMapping; });
+                    _this.query.queries = _this.query.queries.slice(0, 0);
+                }
+            }
             _this.trigger(events.rowDeselecting, args);
         };
         this.grid.rowSelected = function (args) {
@@ -1804,7 +1818,8 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.onPropertyChanged = function (newProp) {
         var properties = Object.keys(newProp);
         var requireRefresh = false;
-        if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns)) {
+        if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns) && this.frozenColumns === 0
+            && this.frozenRows === 0 && !this.columnModel.some(function (col) { return col.isFrozen || col.freeze; })) {
             this.grid.columns = this.getGridColumns(newProp.columns);
             this.grid['updateColumnObject']();
             requireRefresh = true;
@@ -3016,13 +3031,13 @@ var TreeGrid = /** @class */ (function (_super) {
                 return e.hasChildRecords;
             });
         }
-        else if (isNullOrUndefined(record)) {
+        else if (isNullOrUndefined(record) && !isNullOrUndefined(row)) {
             if (this.detailTemplate) {
                 record = this.grid.getCurrentViewRecords()[row.getAttribute('data-rowindex')];
             }
             else {
-                if (this.enableVirtualization && this.isCollapseAll) {
-                    if (this.isExpandAll && row.rowIndex === -1) {
+                if (this.enableVirtualization && (this.isCollapseAll || this.isExpandAll)) {
+                    if (row.rowIndex === -1) {
                         record = this.grid.getCurrentViewRecords()[parseInt(row.getAttribute('data-rowindex'), 10)];
                     }
                     else {
@@ -3375,9 +3390,12 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.expandCollapse = function (action, row, record, isChild) {
         var _this = this;
         var expandingArgs = { row: row, data: record, childData: [], requestType: action };
-        var childRecords = this.grid.currentViewData.filter(function (e) {
-            return e.parentUniqueID === record.uniqueID;
-        });
+        var childRecords;
+        if (!isNullOrUndefined(record)) {
+            childRecords = this.grid.currentViewData.filter(function (e) {
+                return e.parentUniqueID === record.uniqueID;
+            });
+        }
         var targetEle;
         if ((!isRemoteData(this) && action === 'expand' && this.isSelfReference && isCountRequired(this) && !childRecords.length) || (action === 'collapse' || (this.isExpandAll && this.loadChildOnDemand) && !isRemoteData(this) && this.isSelfReference && isCountRequired(this))) {
             this.updateChildOnDemand(expandingArgs);
@@ -3406,7 +3424,7 @@ var TreeGrid = /** @class */ (function (_super) {
             var displayAction = void 0;
             if (action === 'expand') {
                 displayAction = 'table-row';
-                if (!isChild) {
+                if (!isChild && !isNullOrUndefined(record)) {
                     record.expanded = true;
                     this.uniqueIDCollection[record.uniqueID].expanded = record.expanded;
                 }
@@ -3427,7 +3445,7 @@ var TreeGrid = /** @class */ (function (_super) {
             }
             else {
                 displayAction = 'none';
-                if (!isChild || isCountRequired(this)) {
+                if ((!isChild || isCountRequired(this)) && !isNullOrUndefined(row)) {
                     record.expanded = false;
                     this.uniqueIDCollection[record.uniqueID].expanded = record.expanded;
                 }

package/src/treegrid/renderer/virtual-tree-content-render.js

@@ -516,7 +516,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
     };
     VirtualTreeContentRenderer.prototype.appendContent = function (target, newChild, e) {
         if ((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
-            && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent) || this.parent.isFrozenGrid()) {
+            && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent)) {
             if (getValue('isExpandCollapse', e)) {
                 this.isRemoteExpand = true;
             }

package/styles/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/treegrid/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);