@syncfusion/ej2-treegrid 19.4.54 → 20.1.47

package/styles/material.css

@@ -217,6 +217,11 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
@@ -487,12 +492,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 #e3165b;
+  border-top: 1px solid #e3165b;
+  box-shadow: 0 0 0 0 #e3165b;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid #e3165b;
+  border-top: 1px solid #e3165b;
+  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/tailwind-dark.css

@@ -54,6 +54,7 @@
 
 .e-popup.e-ddl .e-dropdownbase {
   min-height: 26px;
+  padding: 4px 0;
 }
 
 .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
@@ -78,24 +79,6 @@
   background-color: #374151;
 }
 
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 0;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
-}
-
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
-}
-
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
-}
-
 .e-input-group.e-ddl,
 .e-input-group.e-ddl .e-input,
 .e-input-group.e-ddl .e-ddl-icon {
@@ -107,45 +90,6 @@
   border-bottom-width: 0;
 }
 
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
-}
-
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
-}
-
-.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
-}
-
-.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
-  padding: 8px 16px;
-}
-
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }
@@ -170,23 +114,23 @@
 
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
-  content: '\e707';
+  content: '\e75c';
 }
 
 .e-treegrid .e-toolbar-item .e-expand::before {
-  content: '\e762';
+  content: '\e7c9';
 }
 
 .e-treegrid .e-toolbar-item .e-collapse::before {
-  content: '\e750';
+  content: '\e80f';
 }
 
 .e-treegrid .e-toolbar-item .e-indent::before {
-  content: '\e7ac';
+  content: '\e810';
 }
 
 .e-treegrid .e-toolbar-item .e-outdent::before {
-  content: '\e735';
+  content: '\e72a';
 }
 
 .e-bigger .e-treegrid .e-treegridexpand,
@@ -209,6 +153,11 @@
   width: 18px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 18px;
+  width: 18px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
@@ -364,22 +313,22 @@
 }
 
 .e-treegrid .e-errorelem::before {
-  color: #4f46e5;
+  color: #f87171;
   content: "";
   transform: rotate(180deg);
 }
 
 .e-treegrid .e-gridcontent td.e-childborder {
-  border-color: #4f46e5;
+  border-color: #22d3ee;
   border-width: 2px 0 0;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #22d3ee;
   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 #22d3ee;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
@@ -390,7 +339,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 #22d3ee;
   position: relative;
   z-index: 1;
 }
@@ -414,19 +363,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 #22d3ee;
   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: #22d3ee;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #4f46e5;
+  border-bottom-color: #22d3ee;
 }
 
 .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
@@ -459,7 +408,7 @@
 
 .e-treegrid .e-gridheader .e-firstrow-border,
 .e-treegrid .e-gridcontent .e-lastrow-border {
-  background-color: #4f46e5;
+  background-color: #22d3ee;
   bottom: 0;
   display: none;
   height: 1px;
@@ -471,7 +420,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 #22d3ee;
 }
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
@@ -479,14 +428,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 #22d3ee;
+}
+
+.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 #22d3ee;
+}
+
+.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 #22d3ee;
 }
 
-.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 #22d3ee;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridheader .e-firstrow-dragborder {
@@ -494,7 +455,7 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
-  border-color: #4f46e5;
+  border-color: #22d3ee;
   border-width: 2px 0 2px 0;
   position: relative;
   z-index: 1;
@@ -508,7 +469,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 #22d3ee;
   position: relative;
   z-index: 1;
 }
@@ -531,12 +492,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: #22d3ee;
   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: #22d3ee;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {

package/styles/tailwind.css

@@ -54,6 +54,7 @@
 
 .e-popup.e-ddl .e-dropdownbase {
   min-height: 26px;
+  padding: 4px 0;
 }
 
 .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
@@ -78,24 +79,6 @@
   background-color: #fff;
 }
 
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 0;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
-}
-
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
-}
-
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
-}
-
 .e-input-group.e-ddl,
 .e-input-group.e-ddl .e-input,
 .e-input-group.e-ddl .e-ddl-icon {
@@ -107,45 +90,6 @@
   border-bottom-width: 0;
 }
 
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
-}
-
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
-}
-
-.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
-}
-
-.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
-  padding: 8px 16px;
-}
-
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }
@@ -170,23 +114,23 @@
 
 .e-treegrid .e-treegridexpand::before,
 .e-treegrid .e-treegridcollapse::before {
-  content: '\e707';
+  content: '\e75c';
 }
 
 .e-treegrid .e-toolbar-item .e-expand::before {
-  content: '\e762';
+  content: '\e7c9';
 }
 
 .e-treegrid .e-toolbar-item .e-collapse::before {
-  content: '\e750';
+  content: '\e80f';
 }
 
 .e-treegrid .e-toolbar-item .e-indent::before {
-  content: '\e7ac';
+  content: '\e810';
 }
 
 .e-treegrid .e-toolbar-item .e-outdent::before {
-  content: '\e735';
+  content: '\e72a';
 }
 
 .e-bigger .e-treegrid .e-treegridexpand,
@@ -209,6 +153,11 @@
   width: 18px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 18px;
+  width: 18px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
@@ -364,7 +313,7 @@
 }
 
 .e-treegrid .e-errorelem::before {
-  color: #4f46e5;
+  color: #dc2626;
   content: "";
   transform: rotate(180deg);
 }
@@ -479,12 +428,24 @@
   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 #4f46e5;
+}
+
+.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 #4f46e5;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   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 {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 2px solid #4f46e5;
   box-shadow: 0 0 0 0 #4f46e5;
 }

package/styles/treegrid/_bootstrap5-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
 
@@ -24,7 +24,7 @@ $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/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/treegrid/_fluent-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: $primary;
-$error-elem-color: $icon-color;
+$childborder-color: $primary !default;
+$error-elem-color: $danger !default;
 
 // Layout
 
@@ -22,7 +22,7 @@ $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 $primary;
+$treegrid-rowdrag-childborder-border: 2px dashed $primary;
 $treegrid-rowdd-topbottom-border: 2px solid $primary !default;
 $treegrid-rowdd-boxshadow: $primary !default;
 $treegrid-rowdd-childborder-width: 2px 0 0 !default;

package/styles/treegrid/_layout.scss

@@ -21,9 +21,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 +54,9 @@
 
       .e-headercell .e-css.e-hierarchycheckbox {
         height: 20px;
+        @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+          padding-top: 0;
+        }
         vertical-align: middle;
       }
     }
@@ -70,6 +90,13 @@
       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 {
       .e-treegridcollapse {
         transform: scale(-1);
@@ -112,8 +139,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 +175,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 +343,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 +355,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 +378,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/_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
 
@@ -24,7 +24,7 @@ $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

@@ -172,6 +172,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;
 }
@@ -250,8 +258,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 +453,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;
 }