@syncfusion/ej2-react-treegrid 19.3.53 → 19.4.40

package/CHANGELOG.md

@@ -2,52 +2,19 @@
 
 ## [Unreleased]
 
-### Tree Grid
-
-#### Bug Fixes
-
-- `#I342419` - Resolved performing add operation after calling refresh method.
-
-## 19.3.47 (2021-10-26)
-
-### Tree Grid
-
-#### Bug Fixes
-
-- `#F169151` - Resolved issue in drag and drop to Listbox component.
-- `#I343484` - Resolved deleting the record by using deleteRow and deleteRecord methods in cellSelection mode.
-- `#I345435` - Tree Column value shows properly when text wrap is enabled.
-- `#I343976` - Resolved top records hiding issue on random expand/collapse action when Virtualization enabled.
-- `#I342822` - Expand and collapse icon shown properly on re ordering column with `enablePersistence` property.
-
-- `#I345435` - Tree Column value shows properly when text wrap is enabled.
-
-## 19.3.46 (2021-10-19)
+## 19.4.38 (2021-12-17)
 
 ### Tree Grid
 
-#### Bug Fixes
-
-- `#I343755` - Resolved record missing while using single root node with Virtualization and ExpandStateMapping enabled.
-- `#I335120` - Resolved Deleting child records and creation of duplicate records after row drag and drop performed.
-
-## 19.3.45 (2021-10-12)
+#### New Features
 
-### Tree Grid
+- Provided support for `expandByKey`, `collapseByKey` methods and improved `expantAtLevel`, `collapseAtLevel` methods for nested records in tree grid.
+- Provided Adaptive UI layout support for all devices.
 
 #### Bug Fixes
 
-- `#I341871` - Resolved getCheckedRecords method doesn’t return collapsed records after filtering with Virtualization enabled.
-- `#I340839` - Resolved dragging and dropping creates duplicate rows  when setting initial sort for the newly added record.
-- `#I339818` - Resolved "No records to display" issue when we expand filtered parent record with Virtualization and collapseAll enabled.
-
-## 19.3.44 (2021-10-05)
-
-### Tree Grid
-
-#### New Features
-
-- `#314841` - Provided support to freeze the columns on right, left or both sides.
+- `#I348001`,`#I349046`,`#I349018` Throws script error while performing scroll on Virtualization enabled has been fixed.
+- `#F167694`  Resolved state changes not reflected for Treegrid column directive.
 
 ## 19.2.44 (2021-06-30)
 

package/README.md

@@ -66,4 +66,4 @@ Check the license detail [here](https://github.com/syncfusion/ej2-javascript-ui-
 
 Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/treegrid/CHANGELOG.md?utm_source=npm&utm_campaign=grid)
 
-© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
+© Copyright 2021 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

package/dist/ej2-react-treegrid.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-treegrid.umd.min.js
-*  version : 19.3.53
+*  version : 19.4.40
 *  Copyright Syncfusion Inc. 2001 - 2020. 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-react-treegrid@*",
-  "_id": "@syncfusion/ej2-react-treegrid@19.3.47",
+  "_id": "@syncfusion/ej2-react-treegrid@19.4.38",
   "_inBundle": false,
-  "_integrity": "sha512-eiDTrdviMB5g3PEt8UrBHzVDfExIvVAE5vR+6VT/HVIyzXDt/WMG1q9DOT6Ol2+VG1zNTM3STQP5jdEwG429dA==",
+  "_integrity": "sha512-Gau24igQvl5Tgjvzgd1j71QRVYgUR0p2joZ7IHZGXZbm7ZPB1IQDzM7bsi7s7yULkCBzNDZBXkLft8AONMHIQA==",
   "_location": "/@syncfusion/ej2-react-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-react-treegrid/-/ej2-react-treegrid-19.3.47.tgz",
-  "_shasum": "a2d10a48dc16ed0d2fc6ca6035c215706108e4c9",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-treegrid/-/ej2-react-treegrid-19.4.38.tgz",
+  "_shasum": "75ec652726117eca63aa66229c57e4be4893350f",
   "_spec": "@syncfusion/ej2-react-treegrid@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.53",
-    "@syncfusion/ej2-react-base": "~19.3.53",
-    "@syncfusion/ej2-treegrid": "19.3.53"
+    "@syncfusion/ej2-base": "~19.4.38",
+    "@syncfusion/ej2-react-base": "~19.4.38",
+    "@syncfusion/ej2-treegrid": "19.4.40"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component for React",
@@ -62,6 +62,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "19.3.53",
+  "version": "19.4.40",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -180,6 +180,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;

package/styles/bootstrap.css

@@ -181,6 +181,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;

package/styles/bootstrap4.css

@@ -221,6 +221,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;

package/styles/bootstrap5-dark.css

@@ -63,6 +63,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
@@ -213,6 +214,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;
@@ -355,22 +361,22 @@
 }
 
 .e-treegrid .e-errorelem::before {
-  color: #0d6efd;
+  color: #4f46e5;
   content: "";
   transform: rotate(180deg);
 }
 
 .e-treegrid .e-gridcontent td.e-childborder {
-  border-color: #0d6efd;
+  border-color: #4f46e5;
   border-width: 2px 0 0;
-  box-shadow: 0 1px 0 0 #0d6efd;
+  box-shadow: 0 1px 0 0 #4f46e5;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
 .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
-  box-shadow: 0 1px 0 0 #0d6efd;
+  box-shadow: 0 1px 0 0 #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
@@ -380,14 +386,14 @@
 }
 
 .e-treegrid .e-gridcontent td.e-childborder:first-child {
-  border-left: 2px solid #0d6efd;
-  box-shadow: 0 1px 0 0 #0d6efd;
+  border-left: 2px solid #4f46e5;
+  box-shadow: 0 1px 0 0 #4f46e5;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-childborder:last-child {
-  border-right: 2px solid #0d6efd;
+  border-right: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder {
@@ -395,29 +401,29 @@
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder:last-child {
-  border-right: 2px solid #0d6efd;
+  border-right: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder:first-child {
-  border-left: 2px solid #0d6efd;
+  border-left: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-dropbottom:first-child,
 .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom,
 .e-treegrid .e-gridcontent td.e-dropbottom {
-  box-shadow: 0 1px 0 0 #0d6efd;
+  box-shadow: 0 1px 0 0 #4f46e5;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-gridcontent td.e-droptop:first-child,
 .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
-  border-top-color: #0d6efd;
+  border-top-color: #4f46e5;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #0d6efd;
+  border-bottom-color: #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
@@ -450,7 +456,7 @@
 
 .e-treegrid .e-gridheader .e-firstrow-border,
 .e-treegrid .e-gridcontent .e-lastrow-border {
-  background-color: #0d6efd;
+  background-color: #4f46e5;
   bottom: 0;
   display: none;
   height: 1px;
@@ -460,23 +466,23 @@
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-childborder,
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
-  border-bottom: 2px solid #0d6efd;
-  border-top: 2px solid #0d6efd;
+  border-bottom: 2px solid #4f46e5;
+  border-top: 2px solid #4f46e5;
   box-shadow: 0 0 0 0 #4f46e5;
 }
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-droptop {
-  border-top: 2px solid #0d6efd;
+  border-top: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
-  border-bottom: 2px solid #0d6efd;
+  border-bottom: 2px solid #4f46e5;
   box-shadow: 0 0 0 0 #4f46e5;
 }
 
 .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
-  border-bottom: 2px solid #0d6efd;
+  border-bottom: 2px solid #4f46e5;
   box-shadow: 0 0 0 0 #4f46e5;
 }
 
@@ -485,7 +491,7 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
-  border-color: #0d6efd;
+  border-color: #4f46e5;
   border-width: 2px 0 2px 0;
   position: relative;
   z-index: 1;
@@ -498,14 +504,14 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder:first-child {
-  border-right: 2px solid #0d6efd;
-  box-shadow: 0 1px 0 0 #0d6efd;
+  border-right: 2px solid #4f46e5;
+  box-shadow: 0 1px 0 0 #4f46e5;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-childborder:last-child {
-  border-left: 2px solid #0d6efd;
+  border-left: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder {
@@ -513,21 +519,21 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder:last-child {
-  border-right: 2px solid #0d6efd;
+  border-right: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder:first-child {
-  border-left: 2px solid #0d6efd;
+  border-left: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-droptop:first-child,
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-droptop {
-  border-top-color: #0d6efd;
+  border-top-color: #4f46e5;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #0d6efd;
+  border-bottom-color: #4f46e5;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {

package/styles/bootstrap5.css

@@ -63,6 +63,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
@@ -213,6 +214,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;
@@ -355,22 +361,22 @@
 }
 
 .e-treegrid .e-errorelem::before {
-  color: #0d6efd;
+  color: #4f46e5;
   content: "";
   transform: rotate(180deg);
 }
 
 .e-treegrid .e-gridcontent td.e-childborder {
-  border-color: #0d6efd;
+  border-color: #4f46e5;
   border-width: 2px 0 0;
-  box-shadow: 0 1px 0 0 #0d6efd;
+  box-shadow: 0 1px 0 0 #4f46e5;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
 .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
-  box-shadow: 0 1px 0 0 #0d6efd;
+  box-shadow: 0 1px 0 0 #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
@@ -380,14 +386,14 @@
 }
 
 .e-treegrid .e-gridcontent td.e-childborder:first-child {
-  border-left: 2px solid #0d6efd;
-  box-shadow: 0 1px 0 0 #0d6efd;
+  border-left: 2px solid #4f46e5;
+  box-shadow: 0 1px 0 0 #4f46e5;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-childborder:last-child {
-  border-right: 2px solid #0d6efd;
+  border-right: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder {
@@ -395,29 +401,29 @@
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder:last-child {
-  border-right: 2px solid #0d6efd;
+  border-right: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder:first-child {
-  border-left: 2px solid #0d6efd;
+  border-left: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-dropbottom:first-child,
 .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom,
 .e-treegrid .e-gridcontent td.e-dropbottom {
-  box-shadow: 0 1px 0 0 #0d6efd;
+  box-shadow: 0 1px 0 0 #4f46e5;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-gridcontent td.e-droptop:first-child,
 .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
-  border-top-color: #0d6efd;
+  border-top-color: #4f46e5;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #0d6efd;
+  border-bottom-color: #4f46e5;
 }
 
 .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
@@ -450,7 +456,7 @@
 
 .e-treegrid .e-gridheader .e-firstrow-border,
 .e-treegrid .e-gridcontent .e-lastrow-border {
-  background-color: #0d6efd;
+  background-color: #4f46e5;
   bottom: 0;
   display: none;
   height: 1px;
@@ -460,23 +466,23 @@
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-childborder,
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
-  border-bottom: 2px solid #0d6efd;
-  border-top: 2px solid #0d6efd;
+  border-bottom: 2px solid #4f46e5;
+  border-top: 2px solid #4f46e5;
   box-shadow: 0 0 0 0 #4f46e5;
 }
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-droptop {
-  border-top: 2px solid #0d6efd;
+  border-top: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
-  border-bottom: 2px solid #0d6efd;
+  border-bottom: 2px solid #4f46e5;
   box-shadow: 0 0 0 0 #4f46e5;
 }
 
 .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
-  border-bottom: 2px solid #0d6efd;
+  border-bottom: 2px solid #4f46e5;
   box-shadow: 0 0 0 0 #4f46e5;
 }
 
@@ -485,7 +491,7 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
-  border-color: #0d6efd;
+  border-color: #4f46e5;
   border-width: 2px 0 2px 0;
   position: relative;
   z-index: 1;
@@ -498,14 +504,14 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder:first-child {
-  border-right: 2px solid #0d6efd;
-  box-shadow: 0 1px 0 0 #0d6efd;
+  border-right: 2px solid #4f46e5;
+  box-shadow: 0 1px 0 0 #4f46e5;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-childborder:last-child {
-  border-left: 2px solid #0d6efd;
+  border-left: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder {
@@ -513,21 +519,21 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder:last-child {
-  border-right: 2px solid #0d6efd;
+  border-right: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder:first-child {
-  border-left: 2px solid #0d6efd;
+  border-left: 2px solid #4f46e5;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-droptop:first-child,
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-droptop {
-  border-top-color: #0d6efd;
+  border-top-color: #4f46e5;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #0d6efd;
+  border-bottom-color: #4f46e5;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {

package/styles/fabric-dark.css

@@ -154,6 +154,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;

package/styles/fabric.css

@@ -147,6 +147,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;

package/styles/highcontrast-light.css

@@ -164,6 +164,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;

package/styles/highcontrast.css

@@ -164,6 +164,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;

package/styles/material-dark.css

@@ -190,6 +190,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;

package/styles/material.css

@@ -225,6 +225,11 @@
   content: '';
 }
 
+.e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
+  height: 20px;
+  vertical-align: middle;
+}
+
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
   text-align: center;