@syncfusion/ej2-treegrid 19.4.55 → 20.1.48

package/styles/treegrid/_layout.scss

@@ -8,10 +8,6 @@
         width: $treegrid-bigger-icon-size;
       }
 
-      .e-rowcell.e-treerowcell {
-        padding-left: $treegrid-bigger-treecell-padding;
-      }
-
       .e-hierarchycheckbox {
         padding-left: 2px;
       }
@@ -21,9 +17,26 @@
         width: $treegrid-frame-bigger-icon-width;
       }
 
+      .e-hierarchycheckbox .e-frame {
+        @if $skin-name == 'bootstrap' or $skin-name == 'boostrap-dark' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+          font-size: 12px;
+          line-height: 12px;
+          padding: 2px 0;
+        }
+        height: $treegrid-frame-bigger-icon-height;
+        width: $treegrid-frame-bigger-icon-width;
+      }
+
       .e-treecell {
         line-height: $treegrid-bigger-icon-size;
       }
+
+      .e-row[aria-expanded = 'true'] .e-treecell {
+        @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+          font-size: 16px;
+          font-weight: bold;
+        }
+      }
     }
   }
 
@@ -37,6 +50,9 @@
 
       .e-headercell .e-css.e-hierarchycheckbox {
         height: 20px;
+        @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+          padding-top: 0;
+        }
         vertical-align: middle;
       }
     }
@@ -66,8 +82,17 @@
       color: $treegrid-right-arrow-hover-color;
     }
 
-    .e-rowcell.e-treerowcell {
-      padding-left: $treegrid-treecell-padding;
+    .e-rowcell.e-treerowcell.e-treegridcheckbox {
+      @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+        padding-left: $treegrid-treecell-padding;
+      }
+    }
+
+    .e-row[aria-expanded = 'true'] .e-treecell {
+      @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+        font-size: 14px;
+        font-weight: bold;
+      }
     }
 
     .e-rtl {
@@ -112,8 +137,17 @@
     }
 
     .e-hierarchycheckbox .e-frame {
-      height: $cbox-height;
-      width: $cbox-width;
+      @if $skin-name == 'bootstrap' or $skin-name == 'boostrap-dark' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+        font-size: 10px;
+        height: 16px;
+        line-height: 11px;
+        padding: 2px 0;
+        width: 16px;
+      }
+      @else {
+        height: $cbox-height;
+        width: $cbox-width;
+      }
     }
 
     .e-checkselection {
@@ -139,7 +173,12 @@
 
     .e-treecell {
       display: table-cell;
-      line-height: normal;
+      @if $skin-name == 'bootstrap5' or $skin-name == 'boostrap5-dark' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+        line-height: 26px;
+      }
+      @else {
+        line-height: normal;
+      }
     }
 
     .e-grid {
@@ -302,8 +341,8 @@
       tr.e-row:first-child {
         td.e-rowcell.e-childborder ,
         td.e-rowdragdrop.e-childborder {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          border-top: $treegrid-rowdd-topbottom-border;
+          border-bottom: $treegrid-rowdrag-childborder-border;
+          border-top: $treegrid-rowdrag-childborder-border;
           box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
         }
 
@@ -314,7 +353,22 @@
        }
 
       td.e-rowcell {
-        &.e-childborder,
+        &.e-childborder {
+          border-bottom: $treegrid-rowdrag-childborder-border;
+          border-top: $treegrid-rowdrag-childborder-border;
+          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+        }
+      }
+
+      td.e-rowdragdrop {
+        &.e-childborder {
+          border-bottom: $treegrid-rowdrag-childborder-border;
+          border-top: $treegrid-rowdrag-childborder-border;
+          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+        }
+      }
+
+      td.e-rowcell {
         &.e-dropbottom {
           border-bottom: $treegrid-rowdd-topbottom-border;
           box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
@@ -322,7 +376,6 @@
       }
 
       td.e-rowdragdrop {
-        &.e-childborder,
         &.e-dropbottom {
           border-bottom: $treegrid-rowdd-topbottom-border;
           box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;

package/styles/treegrid/_material-dark-definition.scss

@@ -9,8 +9,6 @@ $treegrid-right-arrow-icon-height: 16px !default;
 $treegrid-right-arrow-icon-width: 16px !default;
 $treegrid-right-arrow-icon-vertical-align: middle;
 $treegrid-content-right-padding: 21px !default;
-$treegrid-treecell-padding: 18px !default;
-$treegrid-bigger-treecell-padding: 25px !default;
 $treegrid-bigger-icon-size: 18px !default;
 $treegrid-smaller-icon-size: 16px !default;
 $treegrid-bigger-icon-font-size: 10px !default;

package/styles/treegrid/_material-definition.scss

@@ -9,8 +9,6 @@ $treegrid-right-arrow-icon-height: 16px !default;
 $treegrid-right-arrow-icon-width: 16px !default;
 $treegrid-right-arrow-icon-vertical-align: middle;
 $treegrid-content-right-padding: 21px !default;
-$treegrid-treecell-padding: 18px !default;
-$treegrid-bigger-treecell-padding: 25px !default;
 $treegrid-bigger-icon-size: 18px !default;
 $treegrid-smaller-icon-size: 16px !default;
 $treegrid-bigger-icon-font-size: 10px !default;

package/styles/treegrid/_tailwind-definition.scss

@@ -1,8 +1,8 @@
 // color
 $treegrid-right-arrow-icon-color: $icon-color !default;
 $treegrid-right-arrow-hover-color: $icon-color-hover !default;
-$childborder-color: #4f46e5;
-$error-elem-color: #4f46e5;
+$childborder-color: $primary !default;
+$error-elem-color: $danger !default;
 
 // Layout
 
@@ -20,11 +20,9 @@ $treegrid-frame-bigger-icon-width: 18px !default;
 $treegrid-frame-icon-height: 16px !default;
 $treegrid-frame-icon-width: 16px !default;
 $treegrid-content-right-padding: 21px !default;
-$treegrid-treecell-padding: 12px !default;
-$treegrid-bigger-treecell-padding: 7px !default;
 $treegrid-rowdrag-childborder-border: 2px solid #4f46e5;
 $treegrid-rowdd-topbottom-border: 2px solid #4f46e5 !default;
-$treegrid-rowdd-boxshadow: #4f46e5 !default;
+$treegrid-rowdd-boxshadow: $primary !default;
 $treegrid-rowdd-childborder-width: 2px 0 0 !default;
 $treegrid-lastrowdd-childborder-width: 2px 0 !default;
 $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;

package/styles/treegrid/bootstrap-dark.css

@@ -159,10 +159,6 @@
   width: 18px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -172,6 +168,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;
 }
@@ -208,10 +212,6 @@
   color: #f0f0f0;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }
@@ -250,8 +250,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,
@@ -442,12 +445,24 @@
   border-top: 1px solid #0070f0;
 }
 
-.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 #0070f0;
+  border-top: 1px solid #0070f0;
+  box-shadow: 0 0 0 0 #0070f0;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid #0070f0;
+  border-top: 1px solid #0070f0;
+  box-shadow: 0 0 0 0 #0070f0;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 1px solid #0070f0;
   box-shadow: 0 0 0 0 #0070f0;
 }
 
-.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 #0070f0;
   box-shadow: 0 0 0 0 #0070f0;
 }

package/styles/treegrid/bootstrap.css

@@ -160,10 +160,6 @@
   width: 18px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -173,6 +169,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;
 }
@@ -209,10 +213,6 @@
   color: #333;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }
@@ -251,8 +251,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 +446,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

@@ -200,10 +200,6 @@
   width: 16px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 12px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -213,6 +209,11 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 16px;
 }
@@ -249,10 +250,6 @@
   color: #343a40;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 9px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }
@@ -473,8 +470,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 +480,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,
@@ -193,10 +200,6 @@
   width: 22px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 7px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -206,6 +209,11 @@
   width: 18px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 18px;
+  width: 18px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
@@ -242,10 +250,6 @@
   color: #dee2e6;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 12px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }
@@ -309,7 +313,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 +365,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 +391,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 +415,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 +460,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 +472,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 +480,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 +507,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 +521,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 +544,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 {