@syncfusion/ej2-angular-grids 21.2.5 → 21.2.6

package/styles/fabric-dark.css

@@ -1135,6 +1135,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   padding: 0 10px;
   font-size: 14px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 0 10px;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 0 10px;
@@ -1193,6 +1197,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 30px;
+  padding: 0;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -1269,12 +1274,21 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-top: 1px;
   margin-right: 0;
+  padding-top: 0;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: 1px;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 10px;
   margin-top: 0;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell, .e-bigger .e-grid.e-rtl .e-groupheadercell:hover,
 .e-grid.e-bigger.e-rtl .e-groupheadercell,
 .e-grid.e-bigger.e-rtl .e-groupheadercell:hover {
@@ -1286,7 +1300,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-right: 8px;
   margin-top: 0;
-  padding-top: 0;
   padding-left: 0;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1797,6 +1810,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2238,6 +2252,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2652,6 +2668,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-top: 0;
+  padding-top: 0;
   padding-right: 0;
 }
 .e-grid .e-grptogglebtn {
@@ -3227,6 +3244,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -3569,6 +3587,10 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3718,8 +3740,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 18px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/fabric.css

@@ -1128,6 +1128,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   padding: 0 10px;
   font-size: 14px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 0 10px;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 0 10px;
@@ -1186,6 +1190,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 30px;
+  padding: 0;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -1262,12 +1267,21 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-top: 0;
   margin-right: 0;
+  padding-top: 0;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: 0;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 10px;
   margin-top: 0;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell, .e-bigger .e-grid.e-rtl .e-groupheadercell:hover,
 .e-grid.e-bigger.e-rtl .e-groupheadercell,
 .e-grid.e-bigger.e-rtl .e-groupheadercell:hover {
@@ -1279,7 +1293,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-right: 8px;
   margin-top: 0;
-  padding-top: 0;
   padding-left: 0;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1790,6 +1803,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2231,6 +2245,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2645,6 +2661,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-top: 0;
+  padding-top: 0;
   padding-right: 0;
 }
 .e-grid .e-grptogglebtn {
@@ -3220,6 +3237,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -3562,6 +3580,10 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3711,8 +3733,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 18px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/fluent-dark.css

@@ -1214,6 +1214,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   padding: 6px 0;
   font-size: 16px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 6px 0;
@@ -1272,6 +1276,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 8px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -1348,8 +1353,13 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-top: -4px;
   margin-right: 4px;
+  padding-top: 0;
   padding: 0 4px;
 }
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 0;
@@ -1357,6 +1367,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   padding: 0 4px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid.e-rtl span.e-groupsort.e-icons,
 .e-grid.e-bigger.e-rtl span.e-groupsort.e-icons {
   margin-top: 0;
@@ -1373,8 +1387,9 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: -9px;
   margin-right: -6px;
   margin-top: -4px;
-  padding-top: 4px;
   padding-left: 8px;
+  margin-top: 0;
+  padding: 0 4px;
 }
 .e-bigger .e-grid .e-groupcaption,
 .e-grid.e-bigger .e-groupcaption {
@@ -1887,6 +1902,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2332,6 +2348,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2749,7 +2767,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -13px;
-  margin-top: 1px;
+  margin-top: -3px;
+  padding-top: 8px;
   padding-right: 12px;
 }
 .e-grid .e-grptogglebtn {
@@ -3326,6 +3345,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -3337,7 +3357,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -14px;
-  padding-top: 4px;
+  padding-top: 8px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
   border-width: 0 0 0 1px;
@@ -3676,6 +3696,10 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 11.5px 4px 14px 4px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 8px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3846,8 +3870,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 21px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/fluent.css

@@ -1214,6 +1214,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   padding: 6px 0;
   font-size: 16px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 6px 0;
@@ -1272,6 +1276,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 8px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -1348,8 +1353,13 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-top: -4px;
   margin-right: 4px;
+  padding-top: 0;
   padding: 0 4px;
 }
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 0;
@@ -1357,6 +1367,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   padding: 0 4px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid.e-rtl span.e-groupsort.e-icons,
 .e-grid.e-bigger.e-rtl span.e-groupsort.e-icons {
   margin-top: 0;
@@ -1373,8 +1387,9 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: -9px;
   margin-right: -6px;
   margin-top: -4px;
-  padding-top: 4px;
   padding-left: 8px;
+  margin-top: 0;
+  padding: 0 4px;
 }
 .e-bigger .e-grid .e-groupcaption,
 .e-grid.e-bigger .e-groupcaption {
@@ -1887,6 +1902,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2332,6 +2348,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2749,7 +2767,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -13px;
-  margin-top: 1px;
+  margin-top: -3px;
+  padding-top: 8px;
   padding-right: 12px;
 }
 .e-grid .e-grptogglebtn {
@@ -3326,6 +3345,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -3337,7 +3357,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -14px;
-  padding-top: 4px;
+  padding-top: 8px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
   border-width: 0 0 0 1px;
@@ -3676,6 +3696,10 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 11.5px 4px 14px 4px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 8px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3846,8 +3870,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 21px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/grid/_bootstrap-dark-definition.scss

@@ -112,7 +112,6 @@ $grid-bigger-group-text-line-height: 32px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-rtl-group-headercell-margin: 3px 8px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 9px 0 4px 0 !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: -4px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -10px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -280,7 +279,7 @@ $grid-rowcell-both-border-width: 1px 0 0 1px !default;
 $grid-indentcell-border-width: 0 1px 0 0 !default;
 $grid-group-right-arrow-icon-font-size: 10px !default;
 $grid-group-right-arrow-icon-padding: 12px 9px 12px 10px !default;
-$grid-group-unpgroupicon-margin-top: 2px !default;
+$grid-group-unpgroupicon-padding-top: 4px !default;
 $grid-summary-cell-line-height: 19px !default;
 $grid-batch-updated-bg-color: #d7f9c7 !default;
 $grid-val-error-color: #f44336 !default;
@@ -290,7 +289,7 @@ $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 2px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 52px !default;
-$grid-ungroup-rtl-padding-top: 0 !default;
+$grid-ungroup-rtl-padding-top: 4px !default;
 $grid-rtl-group-headercell-margin-right: 8px !default;
 $grid-rtl-group-headercell-margin-left: 0 !default;
 $grid-fltr-rtl-sortnumber-margin: 9px 0 0 9px !default;
@@ -333,10 +332,12 @@ $grid-bigger-headercell-font-size: 15px !default;
 $grid-bigger-content-font-size: 14px !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -4px !default;
+$grid-device-group-sorticon-margin-top: -1px !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 5px 0 8px !default;
 $grid-bigger-group-headercell-margin: 4px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 9px 0 !default;
+$grid-device-group-headercell-padding: 9px 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 8px !default;
 $grid-bigger-icons-font-size: 14px !default;
@@ -346,8 +347,10 @@ $grid-bigger-grouped-headercell-border-radius: 6px !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 14px !default;
 $grid-bigger-groupcell-span-padding: 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -7px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -3px !default;
+$grid-device-ungroupbutton-icon-margin-top: -3px !default;
 $grid-bigger-groupcell-span-line-height: 37px !default;
 $grid-bigger-gdownarrow-icon-font-size: 14px !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -480,6 +483,7 @@ $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: 16px !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $grid-font-size !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: $grid-rtl-bigger-fltrdiv-margin !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: 0 !default;
@@ -589,6 +593,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;

package/styles/grid/_bootstrap-definition.scss

@@ -119,7 +119,6 @@ $grid-bigger-group-text-line-height: 32px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-rtl-group-headercell-margin: 3px 8px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 9px 0 4px 0 !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: -4px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -10px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -284,7 +283,7 @@ $grid-rowcell-both-border-width: 1px 0 0 1px !default;
 $grid-indentcell-border-width: 0 1px 0 0 !default;
 $grid-group-right-arrow-icon-font-size: 10px !default;
 $grid-group-right-arrow-icon-padding: 12px 9px 12px 10px !default;
-$grid-group-unpgroupicon-margin-top: 2px !default;
+$grid-group-unpgroupicon-padding-top: 4px !default;
 $grid-summary-cell-line-height: 19px !default;
 $grid-batch-updated-bg-color: #d7f9c7 !default;
 $grid-val-error-color: #f44336 !default;
@@ -294,7 +293,7 @@ $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 2px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 52px !default;
-$grid-ungroup-rtl-padding-top: 0 !default;
+$grid-ungroup-rtl-padding-top: 4px !default;
 $grid-rtl-group-headercell-margin-right: 8px !default;
 $grid-rtl-group-headercell-margin-left: 0 !default;
 $grid-fltr-rtl-sortnumber-margin: 9px 0 0 9px !default;
@@ -337,10 +336,12 @@ $grid-bigger-headercell-font-size: 15px !default;
 $grid-bigger-content-font-size: 14px !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -4px !default;
+$grid-device-group-sorticon-margin-top: -1px !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 5px 0 8px !default;
 $grid-bigger-group-headercell-margin: 6px 0 0 12px !default;
 $grid-bigger-group-headercell-padding: 9px 0 !default;
+$grid-device-group-headercell-padding: 9px 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 8px !default;
 $grid-bigger-icons-font-size: 14px !default;
@@ -350,8 +351,10 @@ $grid-bigger-grouped-headercell-border-radius: 6px !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 14px !default;
 $grid-bigger-groupcell-span-padding: 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -7px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -3px !default;
+$grid-device-ungroupbutton-icon-margin-top: -3px !default;
 $grid-bigger-groupcell-span-line-height: 37px !default;
 $grid-bigger-gdownarrow-icon-font-size: 14px !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -482,6 +485,7 @@ $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: $grid-clone-padding !default;
 $grouped-bigger-text-font-size: 16px !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $grid-font-size !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: $grid-rtl-bigger-fltrdiv-margin !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: 0 !default;
@@ -591,6 +595,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;

package/styles/grid/_bootstrap4-definition.scss

@@ -117,7 +117,6 @@ $grid-bigger-group-text-line-height: 3px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-rtl-group-headercell-margin: 14px 9px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 6px 6px 4px 9px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 3px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -15px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -285,7 +284,7 @@ $grid-rowcell-both-border-width: 1px 0 0 1px !default;
 $grid-indentcell-border-width: 0 1px 0 0 !default;
 $grid-group-right-arrow-icon-font-size: 10px !default;
 $grid-group-right-arrow-icon-padding: 12px 9px 12px 10px !default;
-$grid-group-unpgroupicon-margin-top: 0 !default;
+$grid-group-unpgroupicon-padding-top: 4px !default;
 $grid-summary-cell-line-height: 21px !default;
 $grid-batch-updated-bg-color: #dcfacf !default;
 $grid-val-error-color: #f44336 !default;
@@ -338,10 +337,12 @@ $grid-bigger-headercell-font-size: 16px !default;
 $grid-bigger-content-font-size: 16px !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -1px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 2px 8px 8px !default;
 $grid-bigger-group-headercell-margin: 15px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: 16px !default;
@@ -349,11 +350,13 @@ $group-collapse-icon-text-indent: 11px !default;
 $grid-bigger-grouparea-font-size: 16px !default;
 $grid-bigger-grouped-headercell-border-radius: 6px !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
-$grid-bigger-ungroupbutton-icons-font-size: 12px !default;
+$grid-bigger-ungroupbutton-icons-font-size: 16px !default;
 $grid-bigger-groupcell-span-padding: 8px 4px 10px 12px !default;
+$grid-device-grouped-headercell-span-padding: 0 4px 0 12px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -7px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -1px !default;
-$grid-bigger-groupcell-span-line-height: 4px !default;
+$grid-device-ungroupbutton-icon-margin-top: -1px !default;
+$grid-bigger-groupcell-span-line-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: 12px !default;
 $grid-gd-clone-border-radius: 4px !default;
 $grid-bigger-group-clone-broder-radius: 6px !default;
@@ -487,6 +490,7 @@ $grid-bigger-clone-padding: 2px 12px 1px !default;
 $grid-bigger-draganddrop-clone-padding: 2px 0 1px !default;
 $grouped-bigger-text-font-size: 14px !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 8px !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 8px !default;
 $grid-bigger-font-size: 16px !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -20px 0 -18px -54px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -9px !default;
@@ -595,6 +599,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 0 !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: 8px 4px 10px 8px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 12px !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;