@syncfusion/ej2-treegrid 26.2.5 → 26.2.8

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.2.5
+*  version : 26.2.8
 *  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/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treegrid@*",
-  "_id": "@syncfusion/ej2-treegrid@26.1.42",
+  "_id": "@syncfusion/ej2-treegrid@26.2.5",
   "_inBundle": false,
-  "_integrity": "sha512-UGPp38yDOArNOTGVss2EU+BoYFDbtuX7AQPGwepSDA/IvJZqVuuhzIbORFGAovtVu/49UWanMWu9ci47SKkjxw==",
+  "_integrity": "sha512-SbqItsn2WUqCY7wylqfKsT7CrQAMvcvOVg8fUxvlvaoLrY+WfKJilARHRfRsOgVCZd45ouHOhClP3BDqhgNZuA==",
   "_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.42.tgz",
-  "_shasum": "ac8621c6da11adaeb47f35a1b10f2e94520bea34",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-26.2.5.tgz",
+  "_shasum": "ce6e6979b443ce1f1031368a9280d8b3a7819bfb",
   "_spec": "@syncfusion/ej2-treegrid@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -38,8 +38,8 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~26.2.5",
     "@syncfusion/ej2-data": "~26.2.5",
-    "@syncfusion/ej2-grids": "~26.2.5",
-    "@syncfusion/ej2-popups": "~26.2.5"
+    "@syncfusion/ej2-grids": "~26.2.8",
+    "@syncfusion/ej2-popups": "~26.2.8"
   },
   "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.2.5",
+  "version": "26.2.8",
   "sideEffects": false
 }

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

@@ -12,6 +12,7 @@ export declare class VirtualScroll {
     private prevendIndex;
     private visualData;
     private prevrequestType;
+    prevSelectedRecord: object;
     /**
      * Constructor for VirtualScroll module
      *

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

@@ -88,6 +88,10 @@ var VirtualScroll = /** @class */ (function () {
             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 });
     };

package/src/treegrid/base/data.js

@@ -552,13 +552,13 @@ var DataManipulation = /** @class */ (function () {
                     e["" + result_1] = _this.parent.summaryModule.calculateSummaryValue(summaryQuery, e["" + result_1], true);
                 }
             }
+            if (rowDetails.action === 'remoteExpand' && _this.parent.allowPaging && _this.parent.pageSettings.pageSizeMode === 'All') {
+                _this.parent.grid.pageSettings.totalRecordsCount = _this.parent.grid.currentViewData.length + result.length;
+            }
             if (_this.parent.enableVirtualization) {
                 _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.js

@@ -1050,21 +1050,25 @@ var TreeGrid = /** @class */ (function (_super) {
             _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)) {
+                if (!isNullOrUndefined(args.data.parentItem) || args.isHeaderCheckboxClicked) {
                     _this.parentQuery = _this.query.queries.filter(function (q) { return q.e.field === _this.parentIdMapping; });
                     _this.query.queries = _this.query.queries.slice(0, 0);
                 }
             }
+            if (_this.pageSettings.pageSizeMode === 'Root') {
+                _this.grid.selectionModule['totalRecordsCount'] = _this.grid.currentViewData.length;
+            }
+            if (_this.enableVirtualization && args.rowIndex === _this.selectedRowIndex) {
+                args.cancel = true;
+            }
             _this.trigger(events.rowSelecting, args);
         };
         this.grid.rowDeselecting = function (args) {
             _this.IsExpandCollapseClicked(args);
-            if (isNullOrUndefined(args.data) && _this.selectionSettings.persistSelection
+            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.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);
         };
@@ -3009,6 +3013,19 @@ var TreeGrid = /** @class */ (function (_super) {
             else if (!this.isExpandAll) {
                 this.trigger(events.expanded, expandArgs);
             }
+            if (record.expanded && this.enableVirtualization && this.selectionSettings.persistSelection
+                && !isNullOrUndefined(this.virtualScrollModule.prevSelectedRecord)) {
+                for (var i = 0; i < this.virtualScrollModule.prevSelectedRecord.length; i++) {
+                    if (record.uniqueID ===
+                        this.virtualScrollModule.prevSelectedRecord[parseInt(i.toString(), 10)].parentItem.uniqueID) {
+                        var updateRowSelection = 'updateRowSelection';
+                        var index = 
+                        // eslint-disable-next-line max-len
+                        this.getCurrentViewRecords().indexOf(this.virtualScrollModule.prevSelectedRecord[parseInt(i.toString(), 10)]);
+                        this.grid.selectionModule["" + updateRowSelection](this.getRows()[parseInt(index.toString(), 10)], index);
+                    }
+                }
+            }
         }
     };
     TreeGrid.prototype.expandCollapseAllChildren = function (record, action, key, level) {

package/styles/bootstrap-dark.css

@@ -179,6 +179,7 @@
   font-size: 10px;
   height: 18px;
   width: 18px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -190,6 +191,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -208,10 +212,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #f0f0f0;
@@ -245,6 +252,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -268,7 +278,7 @@
   height: 16px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -309,7 +319,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #e3165b;

package/styles/bootstrap.css

@@ -179,6 +179,7 @@
   font-size: 10px;
   height: 18px;
   width: 18px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -193,6 +194,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -211,10 +215,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #333;
@@ -248,6 +255,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -274,7 +284,7 @@
   height: 16px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -315,7 +325,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #e3165b;

package/styles/bootstrap4.css

@@ -233,6 +233,7 @@
   font-size: 10px;
   height: 16px;
   width: 16px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -244,6 +245,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 16px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -262,10 +266,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #343a40;
@@ -299,6 +306,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -322,7 +332,7 @@
   height: 16px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -363,7 +373,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #e3165b;

package/styles/bootstrap5-dark.css

@@ -222,6 +222,7 @@
   font-size: 22px;
   height: 22px;
   width: 22px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -233,6 +234,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -251,10 +255,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #dee2e6;
@@ -288,6 +295,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -311,7 +321,7 @@
   height: 18px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -352,7 +362,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #e4606d;

package/styles/bootstrap5.css

@@ -222,6 +222,7 @@
   font-size: 22px;
   height: 22px;
   width: 22px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -233,6 +234,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -251,10 +255,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #343a40;
@@ -288,6 +295,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -311,7 +321,7 @@
   height: 18px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -352,7 +362,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #dc3545;

package/styles/fabric-dark.css

@@ -154,6 +154,7 @@
   font-size: 10px;
   height: 18px;
   width: 18px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -168,6 +169,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -186,10 +190,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #dadada;
@@ -223,6 +230,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -249,7 +259,7 @@
   height: 16px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -290,7 +300,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #e3165b;

package/styles/fabric.css

@@ -147,6 +147,7 @@
   font-size: 10px;
   height: 18px;
   width: 18px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -161,6 +162,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -179,10 +183,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #333;
@@ -216,6 +223,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -242,7 +252,7 @@
   height: 16px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -283,7 +293,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #e3165b;

package/styles/fluent-dark.css

@@ -201,6 +201,7 @@
   font-size: 22px;
   height: 22px;
   width: 22px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -215,6 +216,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-bigger .e-treegrid .e-row[aria-expanded=true] .e-treecell {
   font-size: 16px;
   font-weight: bold;
@@ -238,10 +242,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #f3f2f1;
@@ -282,6 +289,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -308,7 +318,7 @@
   height: 18px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -349,7 +359,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #d13438;

package/styles/fluent.css

@@ -201,6 +201,7 @@
   font-size: 22px;
   height: 22px;
   width: 22px;
+  vertical-align: bottom;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
@@ -215,6 +216,9 @@
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
+.e-bigger .e-treegrid .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-bigger .e-treegrid .e-row[aria-expanded=true] .e-treecell {
   font-size: 16px;
   font-weight: bold;
@@ -238,10 +242,13 @@
   text-overflow: ellipsis;
 }
 .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
-  display: inline;
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-treegrid .e-templatecell .e-treecolumn-container span {
+  vertical-align: middle;
+}
 .e-treegrid .e-treegridexpand:hover::before,
 .e-treegrid .e-treegridcollapse:hover::before {
   color: #323130;
@@ -282,6 +289,9 @@
 }
 .e-treegrid .e-treecolumn-container span {
   display: inline-block;
+  vertical-align: text-bottom;
+}
+.e-treegrid .e-templatecell .e-treecolumn-container span {
   vertical-align: middle;
 }
 .e-treegrid .e-cloneproperties .e-treecolumn-container span {
@@ -308,7 +318,7 @@
   height: 18px;
   padding: 0;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   width: 16px;
 }
 .e-treegrid .e-treecell {
@@ -349,7 +359,7 @@
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 .e-treegrid .e-errorelem::before {
   color: #d13438;