@syncfusion/ej2-treegrid 19.4.56 → 20.1.47

package/styles/treegrid/bootstrap.css

@@ -173,6 +173,14 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  font-size: 12px;
+  line-height: 12px;
+  padding: 2px 0;
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
@@ -251,8 +259,11 @@
 }
 
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  height: 20px;
-  width: 20px;
+  font-size: 10px;
+  height: 16px;
+  line-height: 11px;
+  padding: 2px 0;
+  width: 16px;
 }
 
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
@@ -443,12 +454,24 @@
   border-top: 1px solid #317ab9;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
+  border-bottom: 1px solid #317ab9;
+  border-top: 1px solid #317ab9;
+  box-shadow: 0 0 0 0 #317ab9;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid #317ab9;
+  border-top: 1px solid #317ab9;
+  box-shadow: 0 0 0 0 #317ab9;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 1px solid #317ab9;
   box-shadow: 0 0 0 0 #317ab9;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 1px solid #317ab9;
   box-shadow: 0 0 0 0 #317ab9;
 }

package/styles/treegrid/bootstrap4.css

@@ -213,6 +213,11 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 16px;
 }
@@ -473,8 +478,8 @@
 
 .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: 1px solid #e3165b;
-  border-top: 1px solid #e3165b;
+  border-bottom: 1px solid;
+  border-top: 1px solid;
   box-shadow: 0 0 0 0 #e3165b;
 }
 
@@ -483,12 +488,24 @@
   border-top: 1px solid #e3165b;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+  box-shadow: 0 0 0 0 #e3165b;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+  box-shadow: 0 0 0 0 #e3165b;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 1px solid #e3165b;
   box-shadow: 0 0 0 0 #e3165b;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 1px solid #e3165b;
   box-shadow: 0 0 0 0 #e3165b;
 }

package/styles/treegrid/bootstrap5-dark.css

@@ -90,6 +90,13 @@
   color: #adb5bd;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -206,6 +213,11 @@
   width: 18px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 18px;
+  width: 18px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
@@ -309,7 +321,7 @@
 
 .e-treegrid .e-treecell {
   display: table-cell;
-  line-height: normal;
+  line-height: 26px;
 }
 
 .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -361,22 +373,22 @@
 }
 
 .e-treegrid .e-errorelem::before {
-  color: #4f46e5;
+  color: #e4606d;
   content: "";
   transform: rotate(180deg);
 }
 
 .e-treegrid .e-gridcontent td.e-childborder {
-  border-color: #4f46e5;
+  border-color: #0d6efd;
   border-width: 2px 0 0;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   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 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
@@ -387,7 +399,7 @@
 
 .e-treegrid .e-gridcontent td.e-childborder:first-child {
   border-left: 2px solid #4f46e5;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   position: relative;
   z-index: 1;
 }
@@ -411,19 +423,19 @@
 .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 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   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: #4f46e5;
+  border-top-color: #0d6efd;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #4f46e5;
+  border-bottom-color: #0d6efd;
 }
 
 .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
@@ -456,7 +468,7 @@
 
 .e-treegrid .e-gridheader .e-firstrow-border,
 .e-treegrid .e-gridcontent .e-lastrow-border {
-  background-color: #4f46e5;
+  background-color: #0d6efd;
   bottom: 0;
   display: none;
   height: 1px;
@@ -468,7 +480,7 @@
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
   border-bottom: 2px solid #4f46e5;
   border-top: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
@@ -476,14 +488,26 @@
   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 {
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
+  border-bottom: 2px solid #4f46e5;
+  border-top: 2px solid #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 2px solid #4f46e5;
+  border-top: 2px solid #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridheader .e-firstrow-dragborder {
@@ -491,7 +515,7 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
-  border-color: #4f46e5;
+  border-color: #0d6efd;
   border-width: 2px 0 2px 0;
   position: relative;
   z-index: 1;
@@ -505,7 +529,7 @@
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder:first-child {
   border-right: 2px solid #4f46e5;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   position: relative;
   z-index: 1;
 }
@@ -528,12 +552,12 @@
 
 .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: #4f46e5;
+  border-top-color: #0d6efd;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #4f46e5;
+  border-bottom-color: #0d6efd;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {

package/styles/treegrid/bootstrap5.css

@@ -90,6 +90,13 @@
   color: #6c757d;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -206,6 +213,11 @@
   width: 18px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 18px;
+  width: 18px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
@@ -309,7 +321,7 @@
 
 .e-treegrid .e-treecell {
   display: table-cell;
-  line-height: normal;
+  line-height: 26px;
 }
 
 .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -361,22 +373,22 @@
 }
 
 .e-treegrid .e-errorelem::before {
-  color: #4f46e5;
+  color: #dc3545;
   content: "";
   transform: rotate(180deg);
 }
 
 .e-treegrid .e-gridcontent td.e-childborder {
-  border-color: #4f46e5;
+  border-color: #0d6efd;
   border-width: 2px 0 0;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   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 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
@@ -387,7 +399,7 @@
 
 .e-treegrid .e-gridcontent td.e-childborder:first-child {
   border-left: 2px solid #4f46e5;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   position: relative;
   z-index: 1;
 }
@@ -411,19 +423,19 @@
 .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 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   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: #4f46e5;
+  border-top-color: #0d6efd;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #4f46e5;
+  border-bottom-color: #0d6efd;
 }
 
 .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
@@ -456,7 +468,7 @@
 
 .e-treegrid .e-gridheader .e-firstrow-border,
 .e-treegrid .e-gridcontent .e-lastrow-border {
-  background-color: #4f46e5;
+  background-color: #0d6efd;
   bottom: 0;
   display: none;
   height: 1px;
@@ -468,7 +480,7 @@
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
   border-bottom: 2px solid #4f46e5;
   border-top: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
@@ -476,14 +488,26 @@
   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 {
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
+  border-bottom: 2px solid #4f46e5;
+  border-top: 2px solid #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 2px solid #4f46e5;
+  border-top: 2px solid #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridheader .e-firstrow-dragborder {
@@ -491,7 +515,7 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
-  border-color: #4f46e5;
+  border-color: #0d6efd;
   border-width: 2px 0 2px 0;
   position: relative;
   z-index: 1;
@@ -505,7 +529,7 @@
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder:first-child {
   border-right: 2px solid #4f46e5;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   position: relative;
   z-index: 1;
 }
@@ -528,12 +552,12 @@
 
 .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: #4f46e5;
+  border-top-color: #0d6efd;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #4f46e5;
+  border-bottom-color: #0d6efd;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {

package/styles/treegrid/fabric-dark.css

@@ -146,6 +146,14 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  font-size: 12px;
+  line-height: 12px;
+  padding: 2px 0;
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
@@ -224,8 +232,11 @@
 }
 
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  height: 20px;
-  width: 20px;
+  font-size: 10px;
+  height: 16px;
+  line-height: 11px;
+  padding: 2px 0;
+  width: 16px;
 }
 
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
@@ -416,12 +427,24 @@
   border-top: 1px solid #0074cc;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
+  border-bottom: 1px solid #0074cc;
+  border-top: 1px solid #0074cc;
+  box-shadow: 0 0 0 0 #0074cc;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid #0074cc;
+  border-top: 1px solid #0074cc;
+  box-shadow: 0 0 0 0 #0074cc;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 1px solid #0074cc;
   box-shadow: 0 0 0 0 #0074cc;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 1px solid #0074cc;
   box-shadow: 0 0 0 0 #0074cc;
 }

package/styles/treegrid/fabric.css

@@ -139,6 +139,14 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  font-size: 12px;
+  line-height: 12px;
+  padding: 2px 0;
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
@@ -217,8 +225,11 @@
 }
 
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  height: 20px;
-  width: 20px;
+  font-size: 10px;
+  height: 16px;
+  line-height: 11px;
+  padding: 2px 0;
+  width: 16px;
 }
 
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
@@ -409,12 +420,24 @@
   border-top: 1px solid #0078d6;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
+  border-bottom: 1px solid #0078d6;
+  border-top: 1px solid #0078d6;
+  box-shadow: 0 0 0 0 #0078d6;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid #0078d6;
+  border-top: 1px solid #0078d6;
+  box-shadow: 0 0 0 0 #0078d6;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 1px solid #0078d6;
   box-shadow: 0 0 0 0 #0078d6;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 1px solid #0078d6;
   box-shadow: 0 0 0 0 #0078d6;
 }