@syncfusion/ej2-angular-grids 20.4.54 → 21.1.35

package/styles/grid/_layout.scss

@@ -79,7 +79,7 @@
       }
     }
 
-    .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons {
+    .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons {
       font-size: $grid-bigger-toolbar-icon-size;
     }
 
@@ -119,7 +119,7 @@
       font-size: $grid-bigger-grightarrow-icon-font-size;
     }
 
-    .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+    .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
       font-size: $grid-bigger-columnchooser-btn-font-size;
     }
 
@@ -238,9 +238,7 @@
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -1796,9 +1794,7 @@
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-filtermenudiv {
@@ -1913,7 +1909,7 @@
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -1927,7 +1923,7 @@
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -1958,6 +1954,18 @@
       padding: .3em;
     }
 
+    th.e-detailcell .e-rowcell,
+    th.e-detailcell .e-gridpager {
+      text-align: left;
+    }
+
+    &.e-rtl th.e-detailcell .e-rowcell,
+    &.e-rtl th.e-detailcell .e-gridpager,
+    th.e-detailcell .e-rtl .e-rowcell,
+    th.e-detailcell .e-rtl .e-gridpager {
+      text-align: right;
+    }
+
     &.e-verticallines .e-rowcell,
     &.e-verticallines .e-filterbarcell {
       border-width: 0 0 0 $grid-border-size;
@@ -2583,9 +2591,8 @@
       user-select: none;
     }
 
-    .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+    .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
       font-size: $grid-columnchooser-btn-font-size;
-      line-height: $grid-columnchooser-btn-line-height;
     }
 
     .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
@@ -3109,6 +3116,13 @@
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv{
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -3427,7 +3441,8 @@
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -3443,25 +3458,30 @@
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv  {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -3910,6 +3930,41 @@
   position: relative;
 }
 
+.e-ccdlg.e-cc .e-dlg-header-content {
+  @if $grid-skin == 'fluent' {
+    padding: 11px 24px 13px;
+  }
+}
+
+.e-filter-popup.e-excelfilter .e-dlg-content {
+  @if $grid-skin == 'fluent' {
+    padding-bottom: 12px;
+  }
+}
+
+.e-bigger {
+  .e-edit-dialog.e-dlg-modal {
+    .e-dlg-header-content{
+      @if $grid-skin == 'fluent' {
+        padding: 13px 20px 27px 28px;
+        .e-btn.e-dlg-closeicon-btn{
+          bottom: 4px;
+        }
+      }
+    }
+  }
+  .e-ccdlg.e-cc .e-dlg-header-content {
+    @if $grid-skin == 'fluent' {
+      padding: 14px 28px 17px;
+    }
+  }
+  .e-filter-popup.e-excelfilter .e-dlg-content {
+    @if $grid-skin == 'fluent' {
+      padding-bottom: 0;
+    }
+  }
+}
+
 .e-bigger .e-grid.e-row-responsive,
 .e-bigger.e-grid.e-row-responsive {
 
@@ -4391,3 +4446,10 @@
     float: left;
   }
 }
+
+/* stylelint-disable */
+.e-ddl.e-popup.e-popup-flmenu .e-dropdownbase,
+.e-ddl.e-popup.e-popup-flbar .e-dropdownbase {
+  max-height: $grid-fltrmnu-dd-max-height !important;
+}
+/* stylelint-enable */

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

@@ -36,7 +36,7 @@ $grid-group-clone-text-align: center !default;
 $grid-group-unpgroupicon-margin-top: 0 !default;
 $grid-ungroup-rtl-padding-right: 6px !default;
 $filter-text-color: $content-font-color !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 3px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 
@@ -53,6 +53,8 @@ $grouped-text-font-size: 13px !default;
 $grid-filtercell-both-border-width: 1px 0 0 1px !default;
 $grid-headercelldiv-margin: -7px !default;
 $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 .6em 0 .55em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .6em 0 1.15em !default;
 $grid-headercelldiv-padding: 0 1.8em 0 .6em !default;
 $grid-headercelldiv-right-align-padding: 0 .6em 0 1.9em !default;
 $grid-filterbarcell-text-input: 26px !default;
@@ -71,8 +73,8 @@ $grid-sortdiv-padding: 3px !default;
 $grid-sortnumer-line-height: 16px !default;
 $grid-bigger-sortnumer-line-height: $grid-sortnumer-line-height !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 1px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 2px -5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-cc-checkbox-padding-left: 9px !default;
@@ -88,7 +90,6 @@ $grid-columnchooser-toolbar-div-padding: 0 10px !default;
 $grid-columnchooser-toolbar-icon-line-height: 1.9 !default;
 $grid-columnchooser-toolbar-icon-font-size: 15px !default;
 $grid-columnchooser-btn-font-size: 9px !default;
-$grid-columnchooser-btn-line-height: 3 !default;
 $grid-bigger-columnchooser-btn-font-size: 12px !default;
 $grid-columnchooser-toolbardiv-padding: 3px 0 0 !default;
 $grid-columnchooser-toolbardiv-margin-top: 0 !default;
@@ -178,6 +179,7 @@ $grid-flmenu-padding: 24px 0 0 !default;
 $grid-flmenu-boolean-content-padding: 18px 18px 0 !default;
 $grid-flmenu-boolean-button-width: 110px !default;
 $grid-flmenu-device-padding: 24px 0 0 !default;
+$grid-fltrmnu-dd-max-height: 298px !default;
 $grid-rtl-fltrdiv-margin: -18px 0 -18px -11px !default;
 $grid-rtl-bigger-fltrdiv-margin: -18px 0 -18px -11px !default;
 $grid-rtl-headercelldiv-rightalign-fltricon-margin: -7px !default;
@@ -205,18 +207,18 @@ $grid-rtl-headercelldiv-fltricon-padding: 0 1.6em 0 10px !default;
 $grid-sortnumber-filtericon-rightalign-margin: 7px 2px 0 5px !default;
 $grid-bigger-checkbox-filter-min-height: 352px !default;
 $grid-checkbox-filter-min-height: 322px !default;
-$grid-rtl-bigger-fltricon-sortdiv-margin: -15px 30px 0 0 !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -16px 10px !default;
+$grid-rtl-bigger-fltricon-sortdiv-margin: -20px 30px 0 14px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -20px 14px !default;
 $grid-rows-bg-color: $grey-dark !default;
 $grid-resize-border-width: 1px !default;
 $grid-filterbarcell-input-padding: 0 26px 0 10px !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -18px 5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -11px 24px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -20px 18px !default;
 $grid-bigger-wrap-sortdiv-margin: -20px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -20px 2px !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -10px 18px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -12px 2px !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -10px 5px !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
 $grid-header-padding: 21px !default;
 $grid-header-first-last-cell-padding: 21px !default;
 $grid-header-bottom-padding: 0 !default;
@@ -312,7 +314,6 @@ $grid-grouptext-margin-right: 6px !default;
 $grid-groupdroparea-rtl-text-align: right !default;
 $grid-rtl-th-firstcell-border-left: 0 !default;
 $grid-gd-clone-border-radius: 13px !default;
-$group-ungroupicon-font-size: 9px !default;
 $grid-checkbox-cell-padding-top-bottom: 6px !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rowselect-text-indent: 7% !default;
@@ -470,7 +471,7 @@ $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -46px !default;
 $grid-reorderarrow-font-size: 8px !default;
-$grid-bigger-wrap-line-height: $grid-wrap-line-height !default;
+$grid-bigger-wrap-line-height: 18px !default;
 $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: $grouped-text-font-size !default;

package/styles/grid/_material-definition.scss

@@ -40,7 +40,7 @@ $grid-group-clone-text-align: center !default;
 $grid-group-unpgroupicon-margin-top: 0 !default;
 $grid-ungroup-rtl-padding-right: 6px !default;
 $filter-text-color: $content-font-color !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 3px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 
@@ -58,6 +58,8 @@ $grid-summary-row-bg-color: lighten($group-row-bg-stcolor, 4%) !default;
 $grid-filtercell-both-border-width: 1px 0 0 1px !default;
 $grid-headercelldiv-margin: -7px !default;
 $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 .6em 0 .55em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .6em 0 1.15em !default;
 $grid-headercelldiv-padding: 0 1.8em 0 .6em !default;
 $grid-headercelldiv-right-align-padding: 0 .6em 0 1.9em !default;
 $grid-filterbarcell-text-input: 26px !default;
@@ -76,8 +78,8 @@ $grid-sortdiv-padding: 3px !default;
 $grid-sortnumer-line-height: 16px !default;
 $grid-bigger-sortnumer-line-height: $grid-sortnumer-line-height !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 1px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 2px -5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-cc-checkbox-padding-left: 9px !default;
@@ -93,7 +95,6 @@ $grid-columnchooser-toolbar-div-padding: 0 10px !default;
 $grid-columnchooser-toolbar-icon-line-height: 1.9 !default;
 $grid-columnchooser-toolbar-icon-font-size: 15px !default;
 $grid-columnchooser-btn-font-size: 9px !default;
-$grid-columnchooser-btn-line-height: 3 !default;
 $grid-bigger-columnchooser-btn-font-size: 12px !default;
 $grid-columnchooser-toolbardiv-padding: 3px 0 0 !default;
 $grid-columnchooser-toolbardiv-margin-top: 0 !default;
@@ -183,6 +184,7 @@ $grid-flmenu-padding: 24px 0 0 !default;
 $grid-flmenu-boolean-content-padding: 18px 18px 0 !default;
 $grid-flmenu-boolean-button-width: 110px !default;
 $grid-flmenu-device-padding: 24px 0 0 !default;
+$grid-fltrmnu-dd-max-height: 298px !default;
 $grid-rtl-fltrdiv-margin: -18px 0 -18px -11px !default;
 $grid-rtl-bigger-fltrdiv-margin: -18px 0 -18px -11px !default;
 $grid-rtl-headercelldiv-rightalign-fltricon-margin: -7px !default;
@@ -210,18 +212,18 @@ $grid-rtl-headercelldiv-fltricon-padding: 0 1.6em 0 10px !default;
 $grid-sortnumber-filtericon-rightalign-margin: 7px 2px 0 5px !default;
 $grid-bigger-checkbox-filter-min-height: 352px !default;
 $grid-checkbox-filter-min-height: 322px !default;
-$grid-rtl-bigger-fltricon-sortdiv-margin: -15px 30px 0 0 !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -16px 0 !default;
+$grid-rtl-bigger-fltricon-sortdiv-margin: -20px 30px 0 14px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -20px 14px !default;
 $grid-rows-bg-color: $content-bg-color !default;
 $grid-resize-border-width: 1px !default;
 $grid-filterbarcell-input-padding: 0 26px 0 10px !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -18px 5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -11px 24px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -20px 18px !default;
 $grid-bigger-wrap-sortdiv-margin: -20px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -20px 2px !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -10px 18px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -12px 2px !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -10px 5px !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
 $grid-header-padding: 21px !default;
 $grid-header-first-last-cell-padding: 21px !default;
 $grid-header-bottom-padding: 0 !default;
@@ -315,7 +317,6 @@ $grid-grouptext-margin-right: 6px !default;
 $grid-groupdroparea-rtl-text-align: right !default;
 $grid-rtl-th-firstcell-border-left: 0 !default;
 $grid-gd-clone-border-radius: 13px !default;
-$group-ungroupicon-font-size: 9px !default;
 $grid-checkbox-cell-padding-top-bottom: 6px !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rowselect-text-indent: 7% !default;
@@ -469,7 +470,7 @@ $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -46px !default;
 $grid-reorderarrow-font-size: 8px !default;
-$grid-bigger-wrap-line-height: $grid-wrap-line-height !default;
+$grid-bigger-wrap-line-height: 18px !default;
 $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: $grouped-text-font-size !default;

package/styles/grid/_tailwind-definition.scss

@@ -32,7 +32,7 @@ $group-droparea-hover-color: $black !default;
 $grid-group-broder-color:  $border-light !default;
 $grid-group-hover-broder-color: $border-hover !default;
 $grid-group-text-line-height: 21px !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 1px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 
@@ -57,7 +57,6 @@ $grid-bigger-headercelldiv-line-height: 18px !default;
 $grid-filterbarcell-text-indent: 1px !default;
 $grid-groupdroparea-rtl-text-align: center !default;
 $grid-rtl-th-firstcell-border-left: 0 !default;
-$group-ungroupicon-font-size: 11px !default;
 $grid-checkbox-cell-padding-top-bottom: 8px !default;
 $grid-rowselect-text-indent: 1px !default;
 $grid-toolbar-border-width: 1px solid !default;
@@ -65,8 +64,8 @@ $grid-filterdiv-padding: 0 !default;
 $grid-headercelldiv-height: 29px !default;
 $grid-filterbarcell-input-height: 26px !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 10px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 5px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 6px 5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -79,9 +78,8 @@ $grid-columnchooser-search-border-fcolor: $border-focus !default;
 $grid-columnchooser-footer-border-opacity: 1 !default;
 $grid-columnchooser-toolbar-div-padding: 0 10px !default;
 $grid-columnchooser-toolbar-icon-line-height: 1.9 !default;
-$grid-columnchooser-toolbar-icon-font-size: 15px !default;
+$grid-columnchooser-toolbar-icon-font-size: $font-icon-15 !default;
 $grid-columnchooser-btn-font-size: $text-lg !default;
-$grid-columnchooser-btn-line-height: 3 !default;
 $grid-columnchooser-toolbardiv-padding: 4px !default;
 $grid-columnchooser-toolbardiv-margin-top: 0 !default;
 $grid-columnchooser-toolbar-icon-vertical-align: middle !default;
@@ -112,7 +110,7 @@ $grid-bigger-grightarrow-icon-font-size: $text-base !default;
 $group-bigger-sorticon-margin-right: 0 !default;
 $grid-bigger-groupdroparea-padding: 13px 6px !default;
 $grid-bigger-group-headercell-height: 34px !default;
-$grid-bigger-ungroup-button-font-size: 22px !default;
+$grid-bigger-ungroup-button-font-size: $font-icon-22 !default;
 $grid-bigger-group-text-line-height: 22px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-rtl-group-headercell-margin: 5px 0 0 6px !default;
@@ -150,6 +148,7 @@ $grid-flmenu-padding: 14px 0 0 !default;
 $grid-flmenu-boolean-content-padding: 18px 18px 0 !default;
 $grid-flmenu-boolean-button-width: 110px !default;
 $grid-flmenu-device-padding: 24px 0 0 !default;
+$grid-fltrmnu-dd-max-height: 232px !default;
 $grid-rtlfltrdiv-float: left !default;
 $grid-checkbox-wrapper-height: 20px !default;
 $grid-checkbox-wrapper-line-height: 20px !default;
@@ -207,7 +206,7 @@ $grid-rtl-toolbar-search-clear-icon-margin: 0 !default;
 $grid-bigger-toolbar-search-clear-icon-padding: 7px 0 7px 12px !default;
 $grid-bigger-toolbar-search-clear-icon-min-width: 38px !default;
 $grid-bigger-toolbar-search-clear-icon-margin: 0 !default;
-$grid-bigger-toolbar-search-clear-icon-font-size: 22px !default;
+$grid-bigger-toolbar-search-clear-icon-font-size: $font-icon-22 !default;
 $grid-rtl-bigger-toolbar-search-clear-icon-padding: 7px 6px 7px 0 !default;
 $grid-rtl-bigger-toolbar-search-clear-icon-min-width: 38px !default;
 $grid-rtl-bigger-toolbar-search-clear-icon-margin: 0 !default;
@@ -310,6 +309,8 @@ $grid-rtl-group-text-margin-left: -8px !default;
 $grid-rtl-group-sorticon-margin-right: 0 !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 .4em 0 4.2em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 .5em 0 .45em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .4em !default;
 $grid-ungroup-rtl-padding-right: -9px !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
@@ -369,7 +370,7 @@ $grid-cc-checkbox-padding-left: 8px !default;
 $grid-column-chooser-searchdiv-left: 1px !default;
 $grid-columnchooser-content-margin: 40px 0 0 !default;
 $grid-bigger-columnchooser-content-margin: 40px 0 0 !default;
-$grid-bigger-columnchooser-btn-font-size: 22px !default;
+$grid-bigger-columnchooser-btn-font-size: $font-icon-22 !default;
 $grid-bigger-sortdiv-rightalign-margin: -15px 6px -15px -6px !default;
 $grid-bigger-sortdiv-margin: -15px -6px -15px 6px !default;
 $grid-bigger-header-icons-font-size: $text-xs !default;
@@ -437,12 +438,12 @@ $grid-content-batch-font-color: $success !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 
 $grid-header-wrap-rightalign-sortfilter-div-margin: -21px -5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -14px 20px -29px 0 !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -20px 20px -29px 14px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -26px -20px 0 0 !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -30px 28px -31px 0 !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -14px 0 !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
 $grid-drag-font-size: $text-lg !default;
 $grid-drag-icon-font-weight: $font-weight-bold !default;
 $grid-drag-move-icon: 10px !default;

package/styles/grid/_theme.scss

@@ -251,18 +251,19 @@
       border-right-color: $frozen-border-color;
     }
 
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
+    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;
         color: $grid-hover-content-font-color;
       }
     }
 
-    & tr[role = 'row']:hover .e-rowdragdrop {
+    & .e-row:hover .e-rowdragdrop {
       cursor: move;
     }
 

package/styles/grid/bootstrap-dark.css

@@ -409,8 +409,8 @@
   min-width: 38px;
   padding: 0;
 }
-.e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons,
-.e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons {
+.e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons,
+.e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons {
   font-size: 18px;
 }
 .e-bigger .e-grid .e-flmenu-valuediv,
@@ -450,8 +450,8 @@
 .e-grid.e-bigger .e-icon-grightarrow {
   font-size: 14px;
 }
-.e-bigger .e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn,
-.e-grid.e-bigger .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+.e-bigger .e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn,
+.e-grid.e-bigger .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
   font-size: 12px;
 }
 .e-bigger .e-grid .e-gridheader tr th:last-child,
@@ -564,6 +564,10 @@
 .e-grid.e-bigger .e-gridheader .e-fltr-icon .e-sortfilterdiv {
   margin: -30px 16px -30px 0;
 }
+.e-bigger .e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv,
+.e-grid.e-bigger.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
+  padding: 0 0.35em 0 0.3em;
+}
 .e-bigger .e-grid .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
 .e-bigger .e-grid .e-wrap .e-sortfilterdiv,
 .e-grid.e-bigger .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -1719,6 +1723,9 @@
 .e-grid .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
   padding: 0 1.8em 0 0.4em;
 }
+.e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
+  padding: 0 0.35em 0 0.3em;
+}
 .e-grid .e-filtermenudiv {
   float: right;
   margin: -20px -7px;
@@ -1785,10 +1792,10 @@
   margin: -29px -11px 0 0;
 }
 .e-grid.e-wrap .e-gridheader .e-rightalign .e-sortnumber {
-  margin: 3px 2px 0 5px;
+  margin: 3px 2px 0 20px;
 }
 .e-grid.e-wrap .e-gridheader .e-sortnumber {
-  margin: 3px 5px 0 2px;
+  margin: 3px -3px 0 2px;
 }
 .e-grid.e-wrap .e-gridheader .e-sortfilterdiv {
   margin: -9px 10px;
@@ -1805,7 +1812,7 @@
   padding: 6px;
 }
 .e-grid.e-wrap .e-columnmenu {
-  margin: -15px -20px -20px -20px;
+  line-height: 10px;
 }
 .e-grid.e-rtl .e-columnmenu {
   left: 5px;
@@ -1813,7 +1820,7 @@
   margin: -20px -18px -18px 1px;
 }
 .e-grid.e-wrap.e-rtl .e-columnmenu {
-  margin: -15px -13px -23px -3px;
+  line-height: 10px;
 }
 .e-grid [class^=e-] {
   box-sizing: border-box;
@@ -1837,6 +1844,15 @@
   border-top-width: 1px;
   padding: 0.3em;
 }
+.e-grid th.e-detailcell .e-rowcell,
+.e-grid th.e-detailcell .e-gridpager {
+  text-align: left;
+}
+.e-grid.e-rtl th.e-detailcell .e-rowcell, .e-grid.e-rtl th.e-detailcell .e-gridpager,
+.e-grid th.e-detailcell .e-rtl .e-rowcell,
+.e-grid th.e-detailcell .e-rtl .e-gridpager {
+  text-align: right;
+}
 .e-grid.e-verticallines .e-rowcell, .e-grid.e-verticallines .e-filterbarcell {
   border-width: 0 0 0 1px;
 }
@@ -2314,9 +2330,8 @@
       -ms-user-select: none;
           user-select: none;
 }
-.e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+.e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
   font-size: 9px;
-  line-height: 3;
 }
 .e-grid .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
   margin-top: 2px;
@@ -2709,6 +2724,11 @@
 .e-grid.e-rtl .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
   margin: -5px -8px -5px 0;
 }
+.e-grid.e-rtl.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv, .e-grid.e-rtl .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+  height: auto;
+  margin-bottom: 2px;
+  margin-top: 0;
+}
 .e-grid.e-rtl .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
   margin: -5px;
 }
@@ -2910,7 +2930,7 @@
   margin: -20px 0 -20px -36px;
   padding: 6px;
 }
-.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv {
+.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
   height: Auto;
   line-height: 18px;
   overflow-wrap: break-word;
@@ -2921,17 +2941,17 @@
 .e-grid.e-wrap .e-stackedheader .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-stackedheader .e-columnheader .e-headercelldiv {
   max-height: 36px;
 }
-.e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv {
+.e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
   margin-bottom: 2px;
   margin-top: 0;
 }
-.e-grid.e-wrap .e-columnheader .e-filtermenudiv {
-  line-height: 18px;
+.e-grid.e-wrap .e-columnheader .e-filtermenudiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
+  line-height: 10px;
 }
-.e-grid .e-columnheader.e-wrap .e-filtermenudiv {
-  line-height: 18px;
+.e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
+  line-height: 10px;
 }
-.e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
+.e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
   height: Auto;
   line-height: 18px;
   overflow-wrap: break-word;
@@ -2950,10 +2970,10 @@
   margin: -30px -5px;
 }
 .e-grid .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -24px 28px -29px 0;
+  margin: -30px 14px -29px 14px;
 }
 .e-grid .e-columnheader.e-wrap .e-fltr-icon.e-rightalign .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon.e-rightalign .e-sortfilterdiv {
-  margin: -24px 0;
+  margin: -30px 14px;
 }
 .e-grid .e-columnheader.e-wrap .e-icon-group::before, .e-grid.e-wrap .e-columnheader .e-icon-group::before {
   display: inline-block;
@@ -3696,6 +3716,13 @@
   float: left;
 }
 
+/* stylelint-disable */
+.e-ddl.e-popup.e-popup-flmenu .e-dropdownbase,
+.e-ddl.e-popup.e-popup-flbar .e-dropdownbase {
+  max-height: 298px !important;
+}
+
+/* stylelint-enable */
 /*! Grid theme */
 .e-grid {
   border-color: #484848;
@@ -3883,11 +3910,11 @@
 .e-grid.e-rtl .e-frozenheader.e-frozen-right-header > .e-table, .e-grid.e-rtl .e-frozencontent.e-frozen-right-content > .e-table {
   border-right-color: #9c9c9c;
 }
-.e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: #393939;
   color: #f0f0f0;
 }
-.e-grid tr[role=row]:hover .e-rowdragdrop {
+.e-grid .e-row:hover .e-rowdragdrop {
   cursor: move;
 }
 .e-grid .e-sortnumber {